为什么我不能在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延迟循环（以便每个点将相隔3秒），没有任何东西被绘制。我已经输入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

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

Answer 2

看起来像你清晰后超时！ 如果它只是一个错误 - 试试我的问题，我问了几天前：unexpected screen clearing WebGL