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

Question

所以我在查找一些学习 WebGL 的基础教程，发现它们都将 GLSL 代码块的字符串表示形式作为参数传递（例如 this or this）。

我查看了 WebGLRenderingContext, and sure enough, the source parameter description for the shaderSource 方法的文档是：

A DOMString containing the GLSL source code to set.

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

这是故意的设计选择，还是 Javascript 的其他功能真的没有提供可能的替代方案？（即最后的选择）

这种情况是否也出现在其他语言中，或者通常应该避免这种情况？

编辑：将 GLSL 误认为 Javascript

Answer 1

着色器将作为文本（或作为字节缓冲区，或其他）加载，无论它存储在何处。不是JS，是GLSL；一种非常不同的语言，更像是专门的 C。您的电脑不了解 vertex/fragment/compute OpenGL 着色器的文件类型，事实上，没有正式的类型，只是建议。

OpenGL 最终进行编译，这意味着您将程序文本传递给它进行编译，而不是 JS 对象。

现在，无论你是在你的应用程序中将它写成 JS 字符串，还是写成不同类型的脚本标签，或者你手动将它们全部作为文本获取并传入，这取决于你。

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

但一般来说，它们是表示文本的一组字节，在您的应用程序内部进行解析和编译，或者预编译并存储为缓存（不确定这在 WebGL 中是否有效；很高兴以其他方式显示）。

Answer 2

WebGL 不使用 Javascript 代码块的字符串表示。它使用字符串作为 GLSL 的表示，GLSL 是一种在您的 GPU 上运行的着色语言（好吧，浏览器 and/or 图形驱动程序将其转换为在您的 GPU 上运行的东西）。

早在 2011 年 WebGL 首次发布时，获取多行字符串的最简单方法就是使用 <script type="anything-other-than-the-javascript"> 脚本标签。从那时起 multiline template literals 变得可用，它正在慢慢变得越来越普遍，但是有很多年的例子都是用脚本标签的方式来做的

对于语法高亮，您可以使用 ES6 import/export 语法 JavaScript 制作包含单个 GLSL 字符串的文件

文件：//一些顶点-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

见

PS：听起来您是 WebGL 的新手，因此您可能会发现 these tutorials 有帮助。

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

Why does WebGL use string representations of GLSL code blocks?

javascript

string

shader

webgl