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有关。

当调用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函数？

2 个答案: