3D Graphics

A room, and how a GPU draws it

The notebook's first "classic graphics" exploration: a real scene in Three.js, with a deferred renderer and a genuine G-buffer layered on top so we can open up the pipeline and look inside, stage by stage.

The scene is a closed environment: a room with three windows letting in sunlight, and three solids at the center — a red cube, a blue pyramid and a yellow sphere. You move around with a flying camera (WASD + mouse). So far, it's a real-time graphics demo like many others.

The interesting part is how it gets rendered. Instead of the usual forward rendering, the scene uses a deferred pipeline: a first pass draws the geometry, writing four buffers at once for every pixel (Multiple Render Targets) — albedo, world-space normals, world-space position and depth. This set of textures is the G-buffer. A second pass (a full-screen quad) reads the G-buffer and reconstructs the lighting — the final result, the "Beauty".

How to use it — click the scene to enter (the mouse gets captured). WASD to move, Space/Shift up and down, mouse to look around. Right-click to release the cursor (inspect mode) and drag the divider; right-click again to go back to flying. From the top-right panel pick which pipeline stage to visualize: for every stage other than Beauty a vertical line appears, acting as a mask — the chosen stage on the left, the Beauty on the right.

Closed room · G-buffer inspector

WASD move · Space up · Shift down
Mouse look · Right-click inspect / fly

▶ Click to enter

Inspect — drag the divider · right-click to fly

stage ⇆ beauty

Rendering Pipeline

Beauty 1/1

[ ] cycle · 0–9 jump
drag the divider: stage vs. beauty

Fig. — interactive. Deferred renderer with a real MRT G-buffer. The 11 stages: Beauty, Albedo, World Normals, World Position, Linear Depth, View-Z, Roughness, Metalness, N·L, Shadow/occlusion, Fresnel. The first four are the "true" G-buffer channels; the others are terms reconstructed in the lighting pass. The divider compares the stage against the Beauty pixel by pixel within the same pass.

Why deferred, and what you learn by looking inside

Forward rendering shades every fragment while drawing the geometry: if many surfaces overlap, you pay for lighting even on pixels that will end up covered. The deferred approach separates the two problems — first what and where (the G-buffer), then how much light (the lighting pass, which runs once per screen pixel). It's the basis of how many engines handle large numbers of lights; and it's also a great teaching tool, because it makes the terms that usually stay implicit tangible.

Looking at World Normals explains Lambert lighting all by itself: the floor is green (normal pointing up), the ceiling magenta, walls on opposite axes have opposite colors. Linear Depth shows depth remapped over the room. Albedo is the "flat" color with no light at all — the starting point on top of which the Beauty adds diffuse and specular. It's the same scene, seen through the layers that produce it.

Honest note — four stages (albedo, normals, position, depth) are the actual channels written into the G-buffer. The others (N·L, Fresnel, "shadow") are derived on the fly in the lighting pass for illustration purposes: a pure G-buffer contains no shadows — those would require a dedicated shadow-map pass. They are labeled as such in the figure.