WebGL的 - 試圖創造一個3D模型逐步

Question

我有我的代碼主要有兩個功能：

1. initBuffers
2. drawScene函數

，我改變了緩衝數據，即頂點和顏色的循環並調用drawScene函數，如下所示：

function tick() { 
    initBuffers(); //use default set of vertices to draw a plane 
    drawScene(); 
var vertices = [ 
    // Bottom face 
    -2.0, 1.0, -2.0, 
    -2.0, 1.0, 2.0, 
    2.0, 1.0, 2.0, 
    2.0, 1.0, -2.0, 
]; 
initBuffers(vertices); 
drawScene(); 
} 

這個工作一切正常。我得到了兩個平面，第一個從默認的頂點集中繪製，第二個從上面顯示的「vetices」中繪製。

但是，如果我的最後一行更改爲：

setTimeout(drawScene(), 3000); 

我只能看到「頂點」，我的第一架飛機消失繪製的第二架飛機。我怎樣才能解決這個問題？

我的目標是在for循環中使用不同頂點繪製大約100個平面，並通過setTimeout逐步顯示給用戶。

Answer 1

首先，永遠不要使用setTimeout !!!!它對用戶的機器進行DOS操作。 Use requestAnimationFrame。

這個問題很有可能是您創建WebGL上下文時需要將preserveDrawingBuffer設置爲true。

gl = canvas.getContext("experimental-webgl", { preserveDrawingBuffer: true }); 

默認情況下，WebGL在每次複合操作後清除畫布。這通常意味着在每次從當前事件返回JavaScript之後。它這樣做是因爲它有可能更快，所以它是默認的。但是如果你不想這樣做，那麼你需要通過傳遞preserveDrawingBuffer: true