WebGL - trying to create a 3D model progressively

Question

I have mainly two functions in my code:

1. initBuffers
2. drawScene

I am changing the buffer data ie vertices and color in a loop and calling the drawScene function as shown below:

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();
}

This works all fine. I get two planes, first one drawn from default set of vertices and the second one drawn from the "vetices" shown above.

But if I change the last line to:

setTimeout(drawScene(), 3000);

I can only see the second plane drawn from "vertices" and my first plane disappears. How can I fix this?

My goal is to draw some 100s of planes using different vertices in a for loop, and show it progressively to the user by using setTimeout.

Answer 1

First off, NEVER USE setTimeout!!!! It DOSes the user's machine. Use requestAnimationFrame .

The issue is most likely that you need to set preserveDrawingBuffer to true when you create the WebGL context.

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

By default WebGL clears the canvas after every composite operation. That generally means after each time you return from JavaScript from the current event. It does this because it has the potential to be much faster so it's the default. But if you want it not to do this clearing then you need to tell it by passing in preserveDrawingBuffer: true