webgl 中的内部计数器？

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 传递。

您的代码将无法运行，因为计数器是顶点着色器的局部变量并且不与其他变量共享。即使它是共享的，请记住顶点着色器以任意顺序调用的顶点数时间。

最佳做法是保留仅用于渲染的着色器以及应用程序中的那些逻辑。

Answer 2

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

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

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

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

在 WebGL1 中使用您自己的计数器或在 WebGL2 中使用内置计数器是相当罕见的。

GLSL 着色器在一次迭代和下一次迭代之间没有状态，因此您的反例将不起作用。

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

webgl 中的内部计数器？

an internal counter in webgl?

javascript

glsl

webgl