javascript - 为什么 webgl 程序的着色器必须位于 html 文件中？

Question

我看到以下问题，有人询问如何从 html 中删除着色器: WebGL - is there an alternative to embedding shaders in HTML?

有一些详细的解决方法可以加载到包含问题答案中建议的着色器的文件中。

在我看到的教程中，着色器代码直接嵌入在html中。javascript 代码使用 getElementById 引用它。但由于多种原因，将着色器直接嵌入到 html 中是很丑陋的。为什么我不能使用 src= 属性在外部引用它？

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

上面的方法不起作用，我只是想知道为什么不起作用。这显然与脚本本身的限制有关，但我不明白。

Answer 1

您不必使用<script>根本没有标签来加载着色器程序。大多数教程和示例只是将它们用作容器，在网页的 DOM 中存储字符串。脚本类型"x-shader/x-fragment"对于网络浏览器来说毫无意义，因此它们不会执行该脚本。然而，他们确实将该标签的内容作为字符串存储在 DOM 中，然后可以通过“真实”脚本访问。仅当脚本内容位于 HTML 文件中时才有效。 当您通过 src 属性加载脚本时，内容不会成为脚本标记的文本子节点，因此无法通过 DOM 树访问。

您也可以将着色器的源代码作为字符串存储在 Javascript 文件中:

// myVertextShader.glsl.js
var myVertexShaderSrc =         
        "attribute vec3 pos;"+      
        "void main() {"+        
        "   gl_Position = vec4(pos, 1.0);"+     
        "}"
    ;

然后您将像这样编译着色器:

var vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, myVertexShaderSrc);
gl.compileShader(vertexShader);

gl.attachShader(program, vertexShader);