WebGL Rendering Pipeline

Although WebGL is often thought of as a comprehensive 3D API, it is, in reality, just a rasterization engine. It draws points, lines, and triangles based on the code you supply. Getting WebGL to do anything else requires you to provide code to use points, lines, and triangles to accomplish your task.

WebGL runs on the GPU on your computer. As such, you need to provide code that runs on that GPU. The code should be provided in the form of pairs of functions. Those two functions are known as the vertex shader and fragment shader, and they are each written in a very strictly-typed C/C++-like language called GLSL (GL Shader Language). Together, they are called a program.

A vertex shader's job is to compute vertex attributes. Based on various positions, the function outputs values that can be used to rasterize various kinds of primitives, including points, lines, and triangles. When rasterizing these primitives, it calls a second user-supplied function known as a fragment shader. A fragment shader's job is to compute a color for each pixel of the primitive currently being drawn.

Nearly all of the WebGL API is about setting up state for these pairs of functions to execute. For each thing you want to draw, you need to set up state to run these functions by invoking gl.drawArrays or gl.drawElements, which executes your shaders on the GPU.

Before going any further, let's examine what WebGL's rendering pipeline looks like. In subsequent chapters, we will discuss the pipeline in more detail. The following is a diagram of a simplified version of WebGL's rendering pipeline:

Let's take a moment to describe each element.