从 2018 年开始在 WebGL 中加载着色器？
Loading Shaders in WebGL as of 2018?
我记得我们必须像这样将着色器嵌入 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 or Grunt to process the code and merge them into one single source file. You can look at the source code of Three.js 这样的 Javascript 工具包，看看它是如何组织的。如果你想使用那个库，你所要做的就是将一个文件导入你的 HTML 页面。该文件包含 Javascript 和相关着色器。
我记得我们必须像这样将着色器嵌入 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 or Grunt to process the code and merge them into one single source file. You can look at the source code of Three.js 这样的 Javascript 工具包，看看它是如何组织的。如果你想使用那个库，你所要做的就是将一个文件导入你的 HTML 页面。该文件包含 Javascript 和相关着色器。