在WebGL中使用GLSL着色器的流行方式似乎是将它们嵌入到主html文件中.顶点和片段着色器嵌入在以下标记中:
<script id="shader-fs" type="x-shader/x-fragment">
这与我在Mozilla Developer Network页面中的WebGL示例中看到的相同.
这适用于简单的应用程序,但是当你有一个带有许多着色器的复杂应用程序时,html文件会变得混乱.(我一直在编辑错误的着色器!)另外,如果你想重复使用着色器,这个方案很不方便.
所以我考虑将这些着色器放在一个单独的XML文件中,并使用XMLHttpRequest()加载它们.然后我看到其他人有同样的想法:
http://webreflection.blogspot.com/2010/09/fragment-and-vertex-shaders-my-way-to.html
我喜欢使用.c文件的建议,因为这为GLSL提供了语法高亮和其他编辑器便利.
但是上述方法的问题是(据我所知)XMLHttpRequest()在开发和测试WebGL应用程序时无法加载本地.c文件 - 即在客户端.但是在此过程中继续将其上传到服务器是很麻烦的.
因此,如果我想将着色器保留在html文件之外,那么将它们作为字符串嵌入代码中是唯一的选择吗？但这会使编写和调试变得困难......
我很感激有关在WebGL应用程序中管理多个GLSL着色器的任何建议.
问候
编辑(2011年5月5日)
由于我使用Mac进行开发,我决定启用Apache服务器,并将我的webgl代码放在http:// localhost/~username /下.这避免了在开发期间禁用文件:协议的问题.现在javascript文件加载代码在本地工作,因为使用了http:而不是file:.我以为我会把它放在这里以防万一有人发现它有用.
只是好奇; 如何将我的webgl着色器放在外部文件中？
目前我正在;
<script id="shader-fs" type="x-shader/x-fragment">
#ifdef GL_ES
precision highp float;
#endif
void main(void)
{
gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
}
</script>
<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 aVertexPosition;
uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;
void main(void)
{
gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
}
</script>
在我的html标题中,如何从外部文件中链接？ - 我尝试了通常的javascript方法;
<script type="text/javascript" src="webgl_shader.js"></script>
因此，我查找了一些学习 WebGL 的基本教程，并注意到它们都将 GLSL 代码块的字符串表示形式作为参数传递（例如this或this）。
我查看了WebGLRenderingContext的文档，果然，shaderSource方法的源参数描述是：
包含要设置的 GLSL 源代码的 DOMString。
我一直认为这种事情是可能的，但不是一个好的编码实践。
这是一个有意的设计选择，还是 Javascript 的其他功能确实没有提供可能的替代方案？（即最后的选择）
这种情况在其他语言中也会发生吗？或者通常应该避免这种情况？
编辑：误认为 GLSL 为 Javascript