我记得我们必须将着色器嵌入到 html 中，如下所示：
<script id="fragmentShader" type="x-shader/x-vertex"> </script>
<script id="vertexShader" type="x-shader/x-vertex"></script>
对我来说，这并不理想。当然，我可以创建着色器文件并使用PHP来包含它们，但我也不想这样。
有没有其他选择可以在没有第三方工具的情况下在 HTML 中使用着色器？
着色器代码必须以某种方式可用于WebGL代码，所以这里没有魔法。一些替代方案是：
- 使用 Ajax 检索着色器的源代码。在这种情况下，您的HTML将没有着色器，Javascript代码将通过异步调用来检索它们。此方法的缺点是您可能有很多请求，并且页面加载时间可能会受到影响。
- 在 Javascript 代码中将着色器的源代码硬编码为字符串文字。这将很难维护，因为您将在同一文件中混合Javascript代码和着色器代码。它可能适用于小型项目，但从长远来看会带来头痛。
- 使用 WebAssembly 并将代码(包括着色器源(编译为
wasm文件。在这种情况下，着色器源将隐藏在wasm文件中，并由浏览器直接处理。 - 使用工具包创建分发捆绑包。您可以将着色器和 Javascript 代码分开并组织起来(例如，放入目录等(。然后，您可以使用像Gulp或Grunt这样的Javascript工具包来处理代码并将它们合并到一个源文件中。你可以看看 Three.js 的源代码，看看它是如何组织的。如果你想使用该库，你所要做的就是将一个文件导入到你的HTML页面中。该文件包含Javascript和相关着色器。