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

Question

我的代码中主要有两个功能：

1. initBuffers
2. 绘制场景

我正在循环中更改缓冲区数据，即顶点和颜色，并调用 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();
}

这一切正常。我得到两个平面，第一个从默认顶点​​集绘制，第二个从上面显示的“顶点”绘制。

但是如果我把最后一行改成：

setTimeout(drawScene(), 3000);

我只能看到从“顶点”绘制的第二个平面，而我的第一个平面消失了。我该如何解决这个问题？

我的目标是在 for 循环中使用不同顶点绘制大约 100 个平面，并使用 setTimeout 逐步向用户显示。

Answer 1

首先，永远不要使用 setTimeout！！！！它DOSes用户的机器。 Use requestAnimationFrame.

这个问题很可能是您在创建 WebGL 上下文时需要将 preserveDrawingBuffer 设置为 true。

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

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