Our First Draw Call

Draw calls “start” the rendering process

gl.drawArrays(primitiveType, startVertex, count); 
function render() {
   gl.clear(gl.COLOR_BUFFER_BIT);

   gl.useProgram(program);

   gl.drawArrays(gl.TRIANGLES, 0, 3);
}

Notes

To actually render anything in an interactive application, we need to issue drawing commands. Our first drawing command is gl.drawArrays(), which requests the GPU to process a number of vertices specified by the count parameter. We’re using the command in a special way here initially, but we’ll see more advanced usage (which is related to specifying vertex data) shortly.

In our render() function, you see we begin each rendering by clearing the window. We then bind the shader pipeline we’re going to use to process and render our first triangle (and later, collections of more complex geometry), and the issue our drawing command.

Generally speaking, this composes what any interactive graphics application does for each frame it draws. We’ll see more complex examples, but they’re all variations on this theme.