1 2 3 4 5 6

Render loop

158

A small introduction for newcomers

Back in 20th century when we wrote computer graphics software, we animated only those parts of the screen where something did actually change. This approach has changed after 3D graphics accelerators were introduced. In 21st century we draw the whole scene from scratch every frame. So, a render loop is an infinite loop where each iteration is a complete scene rendering from scratch.

WebGL render loop

In OpenGL or Direct3D we should implement a render loop by ourselves. In WebGL we don't have such a control. So the first question you should ask — when should I render the next frame? Some guys use JavaScript setInterval or setTimeout functions for that, and this approach is wrong.

The correct approach is to request the system to call a render callback when the system decide that it's time to render. This should be done as follows:

window.requestAnimationFrame(function(timestamp)
{
    // Do the rendering here
});

The system will pass a timestamp into the animation callback. You should use this timestamp to animate things.

Also this request fires only once, so you should request for the animation frame every time at the end of this callback to get a smooth animation:

function draw(timestamp)
{
    // Do the rendering here

    window.requestAnimationFrame(draw);
}

window.requestAnimationFrame(draw);

Here is a complete example of HTML page with WebGL render loop which just fills (or clears) the canvas with black color:

<!DOCTYPE html>
<html>
    <body>
        <canvas id="canvas" width="800" height="600"></canvas>
        <script type="text/javascript">
            const canvas = document.getElementById("canvas");
            const gl = canvas.getContext("webgl2");

            function draw(timestamp)
            {
                gl.clearColor(0, 0, 0, 1);
                gl.clear(gl.COLOR_BUFFER_BIT);

                window.requestAnimationFrame(draw);
            }

            window.requestAnimationFrame(draw);
        </script>
    </body>
</html>

Now the rendering pipeline is set up and we can focus on the frame rendering itself.

Rate this post:
Lesson 2
Share this page:

Learning plan

A few words about 3D graphics APIs before we get started
How to setup a canvas and get it's WebGL context
3. Render loop
How to setup WebGL render loop property
The very basics of how things are being presented and processed in 3D graphics
The very basics of steps you should perform to draw a triangle or a 3D model from scratch
Let's create a simple vertex shader, compile it, and check for compilation issues