WebGL：如何在javascript和着色器之间进行交互，以及如何使用多个着色器

Question

我在WebGL上看到过演示

1. 彩色矩形表面
2. 将纹理附加到矩形
3. 绘制线框
4. 具有半透明的纹理

我不了解的是如何将这些效果组合到一个程序中，以及如何与对象进行交互以改变其外观。

假设我想用以上所有内容创建一个场景，并且能够更改任何矩形的颜色或更改纹理。

我试图了解代码的组织。 以下是一些简短的相关问题：

1. 我可以创建具有相应颜色缓冲区的顶点缓冲区。 我可以有一些带有纹理的矩形，有些没有纹理吗？
2. 如果没有，我必须为所有具有颜色的对象创建一个顶点缓冲区，并为纹理创建另一个顶点缓冲区。 我可以在矢量的每个矩形上附加不同的纹理吗？

3. 对于某些带有颜色的矩形而其他带有纹理的情况，则需要两个不同的着色器程序。 我看到的所有演示都只有一个，但是显然更复杂的程序有多个。 如何在着色器之间切换？

4. 如何打开和关闭线框？ 可以与纹理结合吗？ 换句话说，是否可以编写可以通过标志打开和关闭线框等功能的着色器，还是需要对两个不同的着色器进行两次不同的调用？

5. 我见过的所有演示都使用带有三角形的索引缓冲区。 WebGL不再支持Quads吗？ 显然，在某些情况下需要三角形，但是如果我有一堆矩形，那就不必创建三角形索引了。

对于上述三种情况，如果我想更改点，颜色，纹理或透明度，我是否正确理解glSubBuffer将允许用新数据替换当前缓冲区中的数据。

拥有单个对象来维护这些对象并更新颜色和纹理是否合理，或者这不是一个好的设计？

Answer 1

您提出的问题不仅涉及WebGL，还涉及OpenGL和3D。

交互最常用的方法是在开始时设置属性，并在开始时和运行时设置制服。

通常 ，对您所有问题的回答都是“使用引擎”。

想象一下，就像您拥有基于Java的javascript的lang，然后拥有WebGL一样，它类似于JS的东西库，它允许与GPU进行低级通信（记住，低级），然后您需要拥有着色器，即GPU程序提供，但仅适用于特定数据。

要执行比“简单”还重要的任何事情，需要使用一个工具，该工具将允许您直接跳过使用WebGL的操作（并且通常还直接编写着色器）。 我们称为引擎的工具。 引擎通常将一组功能绑定在一起，而跳过其他功能（例如2D和3D引擎之间的差异）。 引擎函数按特定的顺序调用某些WebGL预设函数，因此您绝不能再接触WebGL API 。 引擎还提供了非常复杂的逻辑，仅基于几个简单的引擎api调用即可仅构建一对着色器，或仅构建一对着色器。 原因是在整个程序期间，交换shader program成本很高。

你的问题

我可以创建具有相应颜色缓冲区的顶点缓冲区。 我可以有一些带有纹理的矩形，有些没有纹理吗？ 如果没有，我必须为所有具有颜色的对象创建一个顶点缓冲区，并为纹理创建另一个顶点缓冲区。 我可以在矢量的每个矩形上附加不同的纹理吗？

让我们有一个缓冲区，我们称为顶点缓冲区。 我们将各种数据放入顶点缓冲区。 数据不是作为个人而是作为集合。 在设置每个唯一数据时，我们称为属性。 该属性对其顶点着色器或片段着色器代码决定的顶点具有任何含义。

如果我们有充满三角形数据的缓冲区，则可以设置例如属性，该属性说明特定顶点是否应使三角形纹理化，并在着色器中进行纹理化逻辑。 无论如何，我认为每个顶点的属性的数据大小必须相等（因此，带纹理的三角形将吃掉与无纹理的三角形相同的大小）。

对于某些带有颜色的矩形而其他带有纹理的情况，则需要两个不同的着色器程序。 我看到的所有演示都只有一个，但是显然更复杂的程序有多个。 如何在着色器之间切换？

并非如此，即使非常复杂的程序也可能只有一对着色器（一个WebGL程序）。 但是仍然可以在运行时更改程序：

https://www.khronos.org/registry/webgl/specs/latest/1.0/#5.14.9 WebGL API函数useProgram

如何打开和关闭线框？ 可以与纹理结合吗？ 换句话说，是否可以编写可以通过标志打开和关闭线框等功能的着色器，还是需要对两个不同的着色器进行两次不同的调用？

WebGL API允许以线框模式绘制。 它是shader program独立选项。 您可以在每次绘图调用时进行切换。 无论如何，也可以编写着色器，将其绘制为线框并使用标志进行控制（标志可以是统一的，也可以是基于属性的）。

我见过的所有演示都使用带有三角形的索引缓冲区。 WebGL不再支持Quads吗？ 显然，在某些情况下需要三角形，但是如果我有一堆矩形，那就不必创建三角形索引了。

WebGL仅支持四边形和三角形。 我猜是因为没有四边形，着色器更简单。

对于上述三种情况，如果我想更改点，颜色，纹理或透明度，我是否正确理解glSubBuffer将允许用新数据替换当前缓冲区中的数据。

我会说很少在运行时更新缓冲区数据。 这会大大降低程序速度。 glSubBuffer不在WebGL中（不同的名称？？？）。 无论如何不要使用它;）

拥有单个对象来维护这些对象并更新颜色和纹理是否合理，或者这不是一个好的设计？

是的，它被称为场景图 ，已被广泛使用，并且可能与显示列表之类的其他技术结合使用。