为什么我不能在 WebGL 中延迟 gl.drawArrays 函数？

Question

在我的主要功能中，我有以下代码来绘制三个点：

工作：

  for (var i = 0; i < 3; i++) {
    gl.vertexAttrib3f(vPosition, vertices[i * 2], vertices[i * 2 + 1], 0.0);
    gl.drawArrays(gl.POINTS, 1, 1);
  }

这会从顶点数组中绘制三个点。

现在，当我使用几乎相同的代码，但使用 setTimeout 来延迟循环（这样每个点将相隔三秒绘制）时，什么也没有绘制。我输入了一个 console.log 并检查了循环确实是运行，只是没有绘制任何东西。

不工作：

  for (var i = 0; i < 3; i++) {
    setTimeout (function () {
      gl.vertexAttrib3f(vPosition, vertices[i], vertices[i + 1], 0.0);
      gl.drawArrays(gl.POINTS, i, 1);
      gl.clear(gl.COLOR_BUFFER_BIT);
    }, 3000 * i );
  }

知道为什么这行不通吗？

Answer 1

看来你在平局超时后清场了！如果这只是一个错误 - 请尝试我几天前提出的问题：unexpected screen clearing WebGL

Answer 2

这与 WebGL 无关。它与 javascript 如何在超时循环中处理 i 有关。

当匿名函数 inn setTimeout 被调用时，i 已经是 2。我使用的解决方案是创建一个闭包，以便 i 保留它的值在调用 setTimeout 函数时进入循环。正确且有效的代码如下所示：

  for (var index = 0; index < 3; index++) {
    (function (i) {
      setTimeout (function () {
        gl.vertexAttrib3f(vPosition, vertices[i * 2], vertices[i * 2 + 1], 0.0);
        gl.drawArrays(gl.POINTS, i, 1);
      }, 1000 * (i + 1));      
    })(index);
  }

为什么我不能在 WebGL 中延迟 gl.drawArrays 函数？

Why can't I delay my gl.drawArrays function in WebGL?

javascript

webgl