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