javascript - 从 2018 年开始在 WebGL 中加载着色器？

Question

<分区>

Answer 1

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

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