Chapter 10: 3D Visuals with WebGL

WebGL (Web Graphics Library) is a low-level JavaScript API for rendering high-performance 2D and 3D graphics. Based on OpenGL ES, WebGL allows developers to leverage the massive parallel processing power of the Graphics Processing Unit (GPU).

---

I. Architectural Overview: The WebGL State Machine

WebGL is not an object-oriented drawing API where you manipulate "shapes." Instead, it is a global State Machine. When you execute a command, the behavior is determined by the current global state of the WebGL context.

1. The CPU-GPU Relationship

The JavaScript code (CPU) sends commands and data to the WebGL Context (GPU). The CPU acts as the "Manager" while the GPU is the "Executor."

2. State Management: The "Bind" Pattern

Because there is only one "Current" buffer slot for each type, you must bind an object to that slot before manipulating it.

// 1. Create two buffer objects
const bufferA = gl.createBuffer();
const bufferB = gl.createBuffer();

// 2. State Change: Make bufferA the "current" ARRAY_BUFFER
gl.bindBuffer(gl.ARRAY_BUFFER, bufferA);
gl.bufferData(gl.ARRAY_BUFFER, dataA, gl.STATIC_DRAW); // Affects bufferA

// 3. State Change: Switch "current" to bufferB
gl.bindBuffer(gl.ARRAY_BUFFER, bufferB);
gl.bufferData(gl.ARRAY_BUFFER, dataB, gl.STATIC_DRAW); // Affects bufferB

// CRITICAL: Subsequent draw calls will use bufferB because it's still bound!

3. The Rendering Pipeline

The GPU pipeline converts geometric primitives into pixels through a strictly defined sequence of stages. Every stage is programmable or configurable via the WebGL state.

1. Vertex Processing: The Vertex Shader is executed once for every vertex provided in the bound buffer. Its primary responsibility is to transform 3D coordinates into Clip Space.

   • Built-in Output: Must set gl_Position.
   • Attributes: Input variables that change per vertex (e.g., a_position).
   • Varyings: Output variables from the Vertex Shader that are passed to the Fragment Shader. The GPU interpolates these values across the primitive's surface.

2. Rasterization: This is a non-programmable, hardware-fixed stage that converts math-based primitives (triangles) into Fragments.

   • The Process: The GPU determines which pixels on the screen are covered by the triangle.
   • Viewport Transform: Clip Space coordinates are mapped to actual screen pixels (e.g., 0 to 1920).
   • Interpolation: If Vertex A is Red and Vertex B is Blue, the rasterizer calculates the specific blend of Purple for every fragment in between using Barycentric Coordinates.

3. Fragment Processing: The Fragment Shader runs once for every potential pixel (fragment). Its job is to determine the final RGBA color.

   • Built-in Output: Must set gl_FragColor.
   • Texture Sampling: Fragments use varying texture coordinates (UVs) to look up colors in a texture buffer using texture2D().
   • Discarding: Fragments can be discarded using the discard keyword (useful for transparency or masking).

---

II. Comprehensive API Reference

1. Shader & Program Management

Shaders are written in GLSL (OpenGL Shading Language) and compiled at runtime.

2. Buffer & Attribute Plumbing

Buffers store raw vertex data (positions, colors, normals) on the GPU.

---

III. Implementation: The 3D Rendering Pattern

1. Coordinate Spaces & The MVP Pipeline

Rendering in 3D requires transforming vertices through a sequence of mathematical spaces. This sequence is known as the MVP Transform.

A. Local (Model) Space

The coordinates of the object relative to its own origin (e.g., a cube's center is at 0,0,0).

B. World Space (Model Matrix)

The object's position in the global universe. The Model Matrix applies translation, rotation, and scaling to move the object from Local -> World.

C. View Space (View Matrix)

The world relative to the camera. The View Matrix moves the entire world in the opposite direction of the camera's position and rotation.

D. Clip Space (Projection Matrix)

The Projection Matrix (Perspective or Orthographic) maps 3D coordinates into a 4D Homogeneous Coordinate system (x, y, z, w).

• The W Component: In perspective projection, w represents distance from the camera. The GPU later divides x, y, z by w to create the illusion of depth (objects getting smaller as they move away).

E. NDC (Normalized Device Coordinates)

The final stage before rasterization. All coordinates are compressed into a cube ranging from -1.0 to 1.0. Anything outside this cube is "clipped" (discarded).

// Technical Logic: The MVP Multiply
// Order is critical: Projection * View * Model * Vertex
// (Read right-to-left: Vertex is moved to world, then to camera view, then projected)
const mvpMatrix = mat4.create();
mat4.multiply(mvpMatrix, projectionMatrix, viewMatrix);
mat4.multiply(mvpMatrix, mvpMatrix, modelMatrix);

// Pass the final matrix to the shader uniform
gl.uniformMatrix4fv(u_mvpLocation, false, mvpMatrix);

2. Implementation: Basic 3D Shader (GLSL)

// VERTEX SHADER
attribute vec3 a_position;
uniform mat4 u_mvpMatrix; // Model-View-Projection Matrix

void main() {
  // Multiply position by the MVP matrix
  gl_Position = u_mvpMatrix * vec4(a_position, 1.0);
}

// FRAGMENT SHADER
precision mediump float;
uniform vec4 u_color;

void main() {
  gl_FragColor = u_color;
}

---

IV. Advanced Implementation: Lighting Models

A professional 3D engine simulates lighting using the Phong Reflection Model, which combines three components.

1. Ambient: Constant low-level light (global illumination).
2. Diffuse: Light reflecting evenly in all directions (based on surface angle).
3. Specular: The "highlight" (based on the angle between the viewer and the light).

---

V. Critical Performance Mandates

1. Performance Mandates

• Minimize Draw Calls: Batch small objects into a single large buffer and use Instanced Rendering (drawElementsInstanced).
• Texture Atlasing: Combine multiple small textures into one large image to avoid frequent bindTexture calls.
• Frustum Culling: Do not send objects to the GPU if they are outside the camera's view volume.

2. Memory & Lifecycle Mandates

• Resource Cleanup: GPU memory is not garbage collected. You must manually delete resources.

  gl.deleteProgram(program);
  gl.deleteBuffer(buffer);
  gl.deleteTexture(texture);
  

• Context Loss: Listen for webglcontextlost. This happens if the OS needs to reclaim GPU memory. Your app must be able to reload all shaders and textures.