Question

我的代码中主要有两个函数：

initBuffers
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 !!!!它用尽了用户的机器。 Use requestAnimationFrame

在创建WebGL上下文时，您很可能需要将preserveDrawingBuffer设置为true。

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

默认情况下，WebGL会在每次复合操作后清除画布。这通常意味着每次从当前事件返回JavaScript之后。这样做是因为它有可能更快，因此它是默认值。但是如果你不想这样做，那么你需要通过传递preserveDrawingBuffer: true

来告诉它

WebGL - 尝试逐步创建3D模型

1 个答案: