截至 2018 年在 WebGL 中加载着色器？ [复制]

Question

我记得我们必须像这样将着色器嵌入到 html 中：

<script id="fragmentShader" type="x-shader/x-vertex"> </script>
<script id="vertexShader" type="x-shader/x-vertex"></script>

对我来说这并不理想。当然，我可以创建着色器文件并使用 PHP 来包含它们，但我也不想要。

在没有第三方工具的情况下，有没有其他方法可以在 HTML 中使用着色器？

Answer 1

着色器代码必须以某种方式可用于 WebGL 代码，所以这里没有魔法。一些替代方案是：

• 使用 Ajax 检索着色器的源代码。在这种情况下，您的 HTML 将没有着色器，而 Javascript 代码将通过异步调用来检索它们。这种方法的缺点是您可能有很多请求，并且可能会影响页面加载时间。
• 将 Javascript 代码中的着色器源硬编码为字符串文字。这将很难维护，因为您会将 Javascript 代码与着色器代码混合在同一个文件中。它可能适用于小型项目，但从长远来看会带来麻烦。
• 使用 WebAssembly 并将您的代码（包括着色器源）编译为 wasm 文件。在这种情况下，着色器源将隐藏在 wasm 文件中，并由浏览器直接处理。
• 使用工具包创建分发包。您可以将着色器和 Javascript 代码分开并组织起来（例如，放入目录等）。然后，您可以使用像 Gulp 或 Grunt 这样的 Javascript 工具包来处理代码并将它们合并到一个源文件中。您可以查看source code of Three.js 并了解它是如何组织的。如果您想使用该库，您所要做的就是将一个文件导入您的 HTML 页面。该文件包含 Javascript 和相关着色器。