Overview of WebGL's rendering pipeline

Here we will see a simplified version of WebGL's rendering pipeline. In subsequent chapters, we will discuss the pipeline in more detail.

Let's take a moment to describe every element separately.

Vertex Buffer Objects (VBOs)

VBOs contain the data that WebGL requires to describe the geometry that is going to be rendered. As mentioned in the introduction, vertex coordinates are usually stored and processed in WebGL as VBOs. Additionally, there are several data elements such as vertex normals, colors, and texture coordinates, among others, that can be modeled as VBOs.

Vertex shader

The vertex shader is called on each vertex. This shader manipulates per-vertex data such as vertex coordinates, normals, colors, and texture coordinates. This data is represented by attributes inside the vertex shader. Each attribute points to a VBO from where it reads vertex data.

Fragment shader

Every set of three vertices defines a triangle and each element on the surface of that...