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

【问题标题】：Why can't I delay my gl.drawArrays function in WebGL?为什么我不能在 WebGL 中延迟我的 gl.drawArrays 函数？
【发布时间】：2015-08-08 01:20:43
【问题描述】：

在我的 main 函数中，我有以下代码来绘制三个点：

工作：

  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 );
  }

知道为什么这不起作用吗？

【问题讨论】：

标签： javascript webgl

【解决方案1】：

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

【讨论】：

删除gl.clear 只会给我GL_INVALID_OPERATION : glDrawArrays: attempt to access out of range vertices in attribute 0

【解决方案2】：

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

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

  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);
  }

【讨论】：