Before we write the first line of code that uses WebGL, it's essential to understand the context in which WebGL operates: the rendering pipeline. Writing programs for the GPU requires a lot of boilerplate code, and without a clear understanding of the rendering pipeline, this code can seem intimidating.

The rendering pipeline consists of all the steps WebGL follows to produce an output.

Picture the rendering pipeline as an assembly line in a factory. Your raw materials (data like points and colors) go through a series of stations, each adding something new until you get a finished product. This output could be a frame of a video game, the result of a parallelized computation, or any other form of processed data.

The WebGL rendering pipeline is made up of several stages. Some stages are programmable, allowing you to write custom code, while others are fixed-function, meaning you can only set specific parameters, and the GPU handles the rest.

The pipeline starts with raw vertex data you provide, points in 2D or 3D space that define your geometry (e.g., the corners of a triangle or a 3D model). Each vertex can include attributes like position, color, texture coordinates, or normals.

• Vertex Shader (Programmable): The vertex shader processes each vertex individually. It's a small program you write in GLSL (OpenGL Shading Language) and runs on the GPU.
• Primitive Assembly (Fixed-Function): The GPU takes the processed vertices and assembles them into primitives, basic shapes like triangles, lines, or points.
• Rasterization (Fixed-Function): The primitives are converted into fragments. Think of fragments as "potential pixels".
• Fragment Shader (Programmable): The fragment shader runs on each fragment, determining its final color. With this, you can create effects like lighting, textures, shadows, etc.
• Testing and Blending (Fixed-Function): Before fragments become pixels on the screen, they go through tests and adjustments, for example:
  • Depth Test: Ensures closer fragments overwrite farther ones (e.g., a wall hides what's behind it)
  • Blending: Combines fragment colors with what's already in the framebuffer (e.g., for transparency or effects).

Finally, the final values of the processed fragments are written to the framebuffer, which can be associated with an HTML canvas element and rendered as part of the webpage.

      
graph TD
    G[Input<br><small>Raw vertex data</small>] --> A[Vertex Shader<br><small>Processes each vertex individually</small>]
    A --> B[Primitive Assembly<br><small>Assembles vertices into primitives</small>]
    B --> C[Rasterization<br><small>Converts primitives into fragments</small>]
    C --> D[Fragment Shader<br><small>Determines fragment colors</small>]
    D --> E[Testing and Blending<br><small>Applies depth test and blending</small>]
    E --> F[Framebuffer<br><small>Writes final pixel values</small>]

    classDef programmable fill:#87CEFA,stroke:#000
    classDef fixed fill:#90EE90,stroke:#000
    classDef none1 fill:none,stroke:none

    class A,D programmable
    class B,C,E fixed
    class G,F none1
    
    

Every command you write in WebGL is about setting up or controlling one of the pipeline's stages. Think of it as giving instructions to a team of workers, and each stage needs to know what to do before the final image can appear on your screen.

Before the pipeline can start working, you have to provide the raw materials: your vertex data. This includes points in space that define your shapes, along with attributes like color or texture coordinates. This data is the foundation that the pipeline builds upon, much like supplying steel and bolts to a factory line.

Next, you interact with the primitive assembly stage. When you call gl.drawArrays() to draw your shape, you have to tell WebGL how to connect your vertices. Want a triangle? Pass gl.TRIANGLES. Prefer a line? Use gl.LINES. This choice directs the pipeline on how to build your geometry, like choosing whether to assemble Lego bricks into a wall or a bridge.

What if you're rendering multiple objects, like a cube in front of a wall? That's where the testing and blending stage comes in. By enabling the depth test with gl.enable(gl.DEPTH_TEST), you tell WebGL to figure out which objects are closer and should appear on top. It's a simple command, but it ties directly to the pipeline's job of sorting fragments before they hit the screen.

Almost every WebGL call you make, loading data, setting shaders, or tweaking options, talks to one of these pipeline stages. Understanding this connection turns a pile of confusing code into a clear roadmap.

In this post, we've journeyed through the WebGL rendering pipeline, from defining vertices to displaying the final image on your canvas. With this, you're ready to start experimenting with WebGL yourself.

Next time, we'll roll up our sleeves and set up a basic WebGL context, then render a simple shape to the screen.