javascript - 截至 2018 年在 WebGL 中加载着色器？

Question

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

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

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

是否有任何替代方法可以在没有第三方工具的情况下在 HTML 中使用着色器？

score 1 · Accepted Answer

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

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

1 回答 1