Question

我正在通过做一个简单的绘图来学习WebGL：水平线和垂直线，或者每隔10帧（即10帧显示一条水平线，然后接下来的10帧显示一条垂直线）。我通过在js代码中保留一个计数器来实现，然后在每个帧上给顶点着色器适当的坐标。有没有办法让WebGL程序代替js处理此计数器？是否可以一次将2点中的4点传递给WebGL程序，并使其使用某种变量进行计数，该变量在每个主要交互过程中都保持不变？

我希望我可以用下面的代码更好地演示。计数器变量是我希望的

attribute vec3 coordinates;
int counter = 0;
void main(void) {
    counter = counter + 1;
    if (counter < 10){
        gl_Position = vec4(coordinates[0], coordinates[1], coordinates[2], 1.0);
    } else {
        gl_Position = vec4(coordinates[3], coordinates[4], coordinates[5], 1.0);
    }
    if (counter >= 20){
        counter = 0;
    }
}

如果这不可能，请告诉我如何处理此问题？是从js代码传递正确的顶点吗？

非常感谢您的关注。任何帮助将不胜感激。

Answer 1

您需要将js中的计数器作为uniform传递。

您的代码将不起作用，因为counter是顶点着色器的局部变量，不能与其他对象共享。即使是共享的，也请记住，顶点着色器以任意顺序调用了多个顶点时间。

最佳做法是将着色器和着色仅保留在应用程序中。

Answer 2

在WebGL1中没有计数器。您必须传递一个。您可以通过填充数量递增的缓冲区并将其作为属性传递给顶点着色器来实现。

在WebGL2中，有一个内置计数器gl_VertexID和gl_InstanceID

是否应该使用计数器取决于您的用例。绘制大量点的通常方法是通过属性将点作为数据传递。

通常，连续绘制相邻点的方法是传入顶点，该顶点生成一个三角形，该三角形覆盖要渲染的点。

在WebGL1中使用您自己的计数器或在WebGL2中使用内置计数器的情况很少见。

GLSL着色器在一个迭代和下一个迭代之间没有状态，因此您的计数器示例将无法工作。

如果您是WebGL的新手，我建议these articles

webgl中的内部计数器？

2 个答案: