爲什麼我不能在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