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

Question

所以我在查找一些学习WebGL的基本教程，并注意到它们都传递GLSL代码块的字符串表示作为参数(例如这个或这个(。

我浏览了WebGLRenderingContext的文档，果然，shaderSource方法的源参数描述是：

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

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

这是一个深思熟虑的设计选择，还是Javascript的其他功能真的没有可能的替代方案？(即最后的选择(

这在其他语言中是否也会发生，或者通常应该避免？

编辑：将GLSL误认为Javascript

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;
};
`;

然后，您可以使用

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的新手，所以你可能会发现这些教程很有帮助。