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

我在WebGL上看到过这样的演示

彩色矩形表面

将纹理附加到矩形

画线框

有半透明的纹理

我不明白的是如何将这些效果组合到一个单独的程序中，以及如何与对象交互以改变其外观

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

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

我可以用相应的颜色缓冲区创建顶点缓冲区。我可以要一些有纹理的长方形和一些没有纹理的长方形吗

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

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

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

我看到的所有演示都使用带有三角形的索引缓冲区。WebGL中不再支持四边形吗？显然，有些事情需要三角形，但如果我有一堆矩形，不必创建三角形索引就好了

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

---

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

您提出的问题不仅仅是关于WebGL，还包括OpenGL和3D

最常用的交互方式是在开始时设置属性，在开始和跑步时设置制服

一般来说，您所有问题的答案都是“使用引擎”

想象一下，就像你有javascript，基于CPU的语言，然后你有WebGL，它就像一个JS库，允许与GPU进行低级通信（记住，低级），然后你有着色器，这是你必须提供的GPU程序，但它只适用于特定的数据

做任何比“简单”更简单的事情都需要一个工具，该工具允许您直接跳过使用WebGL（并且通常还可以直接编写着色器）。我们称之为引擎的工具。引擎通常会将一些能力组合在一起，并跳过其他能力（例如2D和3D引擎之间的差异）。引擎函数以特定顺序调用某些WebGL预设函数，因此您不能再触摸WebGL API。引擎还提供了非常复杂的逻辑，仅基于几个简单的引擎api调用构建单个着色器对或几个着色器对。原因是在整个程序中，交换

着色器程序

的成本很高

您的问题

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

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

如果我们的缓冲区中充满了三角形的数据，那么可以设置例如属性，该属性表示特定顶点是否应该对三角形进行纹理处理，并在着色器中执行纹理逻辑。无论如何，我认为每个顶点属性的数据大小必须相等（因此纹理三角形的大小将与非纹理三角形的大小相同）

对于一些带有颜色的矩形和其他带有纹理的矩形， 它需要两个不同的着色器程序。我看到的所有演示都有 只有一个，但显然更复杂的程序有多个。怎么办 在着色器之间切换

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

WebGL API函数

useProgram

如何打开和关闭线框？它可以与纹理结合吗？在里面 换言之，是否可以编写一个可以转换特征的着色器 像带旗子的线框开关，还是需要两种不同的方式 调用两个不同的着色器

WebGL API允许以线框模式绘制。它是

着色器程序

独立选项。您可以在每次抽签呼叫时切换它。无论如何，也可以编写将绘制为线框的着色器，并使用标志控制它（标志可以是统一的或基于属性的）

我看到的所有演示都使用带有三角形的索引缓冲区。四头肌 WebGL中不再支持？很明显，有些东西是三角形的 可能需要，但如果我有一堆矩形就好了 不必创建三角形索引

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

对于上述所有三种情况，如果我想更改点， 颜色、纹理或透明度，我说的对吗 理解glSubBuffer将允许替换当前在中的数据 缓冲区中包含新数据

我想说，很少更新缓冲区数据