Render loop
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.