glsl - WebGL - 有没有在 HTML 中嵌入着色器的替代方法？

Question

在 WebGL 中使用 GLSL 着色器的流行方式似乎是将它们嵌入到主 html 文件中。
顶点和片段着色器嵌入在标签中，例如:

<script id="shader-fs" type="x-shader/x-fragment">

这与我在 Mozilla 开发者网络页面的 WebGL 示例中看到的约定相同。

这适用于简单的应用程序，但是当您有一个具有多个着色器的复杂应用程序时，html 文件会变得困惑。 (我一直在编辑错误的着色器!)另外，如果你想重用你的着色器，这个方案很不方便。

所以我正在考虑将这些着色器放在一个单独的 XML 文件中，并使用 XMLHttpRequest() 加载它们。然后我看到其他人也有同样的想法:

http://webreflection.blogspot.com/2010/09/fragment-and-vertex-shaders-my-way-to.html

我喜欢使用 .c 文件的建议，因为这为您提供了语法高亮和 GLSL 的其他编辑器便利。

但是上述方法的问题是(据我所知) XMLHttpRequest() 无法加载本地 .c 文件 - 即在客户端 - 在您开发和测试 WebGL 应用程序时。但是在这个过程中一直上传到服务器很麻烦。

因此，如果我想将着色器排除在 html 文件之外，那么将它们作为字符串嵌入代码中的唯一选择是什么？但这会使编写和调试变得困难......

对于在 WebGL 应用程序中管理多个 GLSL 着色器的任何建议，我将不胜感激。

问候

编辑(2011 年 5 月 5 日)

由于我使用 Mac 进行开发，所以我决定启用 Apache 服务器，并将我的 webgl 代码放在 http://localhost/~username/ 下。 .这回避了 file: 协议(protocol)在开发过程中被禁用的问题。现在 javascript 文件加载代码在本地工作，因为使用的是 http:，而不是 file:。只是想我会把它放在这里以防万一有人觉得它有用。

Answer 1

不是确切的解决方案，但对我有好处。
我使用 Pug(旧 Jade)编译 HTML，并使用包含在着色器脚本标签中

script#vertexShader(type="x-shader/x-vertex")
    include shader.vert

script#fragmentShader(type="x-shader/x-fragment")
    include shader.frag

结果是相同的，一个内嵌代码的 HTML，但您可以单独使用着色器。