从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和相关的着色器。