为什么WebGL使用GLSL代码块的字符串表示形式？

Question

因此，我在查找一些用于学习WebGL的基本教程，并注意到它们都将GLSL代码块的字符串表示形式作为参数（例如this或this ）传递。

我仔细阅读了WebGLRenderingContext的文档， 可以肯定的是， shaderSource方法的源参数描述为：

包含要设置的GLSL源代码的DOMString。

我总是觉得这种事情是可能的，但不是好的编码实践。

这是一个故意的设计选择，还是Javascript的其他功能确实没有提供其他选择？ （即不得已）

这是否也会在其他语言中发生，还是应该避免？

编辑：Java的Mistook GLSL

Answer 1

无论将着色器存储在何处，着色器都将作为文本（或作为字节缓冲区，等等）加载。 不是JS，而是GLSL； 这是一种非常不同的语言，更像是专用的C语言。您的PC不了解顶点/片段/计算OpenGL着色器的文件类型，实际上，没有正式的类型，仅是建议。

OpenGL最终完成了编译，这意味着您要向其传递程序文本进行编译，而不是JS对象。

现在，无论您将其编写为应用程序中的JS字符串，还是编写为其他类型的脚本标签，还是手动将它们全部提取为文本并将其传递进来，这取决于您。

大多数人选择在教程中使用脚本标签，因为...懒惰？ 阻力最小的路径？ 真正相信他们想要一个50,000行索引文件？ 我不知道。

但总的来说，它们是代表文本的一些字节组，这些字节在应用程序内部进行了解析和编译，或者被预编译并存储为缓存（不确定在WebGL中是否有效；否则我们很乐意显示）。

Answer 2

WebGL的不使用Javascript代码块的字符串表示。 它使用字符串表示GLSL，GLSL是在GPU上运行的一种着色语言（好吧，浏览器和/或图形驱动程序会转换为在GPU上运行的某种语言）。

早在2011年，WebGL首次发布获取多行字符串的最简单方法就是使用<script type="anything-other-than-the-javascript">脚本标记。 从那时起， 多行模板文字就变得可用了，这种文字正逐渐变得越来越普遍，但是有很多使用脚本标记方式的示例

为了突出显示语法，您可以使用ES6导入/导出语法制作包含单个GLSL字符串的JavaScript文件。

文件：// some-vertex-shader.glsl

export default `
attibute vec4 position;

uniform mat4 matrix;

void main() {
  gl_Position = matrix * position;
};
`;

然后，您可以将with与

import someVertexShaderSource from `./some-vertex-shader.glsl`;

...
gl.shaderSource(someShader, someVertexShaderSource);  // send the string to WebGL

现在，您可以配置编辑器以将.glsl文件突出显示为GLSL

参见https://stackoverflow.com/a/14248861/128511

PS：听起来您是WebGL的新手，所以您可能会发现这些教程很有用。