How does a flat screen create a 3D game world?

Start with a little world

The rover, wheels, arch and ramp have actual vertices and triangles in three dimensions. Turning the camera changes their picture; it does not need to change their stored size.

Choose what the camera can see

Geometry is transformed toward the camera’s image. Triangles crossing the view boundary are clipped, sometimes becoming several triangles, before their positions are divided by perspective depth.

Ask which samples a triangle covers

A triangle can cover all, part or none of an image square. The first mode checks the square’s center. Shared edges use a consistent ownership rule so neighboring triangles do not leave holes or both claim the same boundary.

Let the nearest opaque surface win

Each sample keeps a stored depth. A nearer candidate can replace it. The rest of the rover still exists behind an arch, even when that part does not contribute to this image.

Keep a texture on its surface

The ramp’s checker belongs to coordinates on the ramp. Perspective-correct interpolation keeps those coordinates tied to the surface as it slopes away. Straight screen blending can distort the checker while leaving the outline unchanged.

Give the surface a color

The surface direction and light direction affect the model’s matte response. Move only the light: the same triangle can stay visible while its color changes. A dark-facing side is not automatically a cast shadow.

Resolve the image samples

In four-sample mode, each square checks four explicit places. Each can see a different surface. The renderer averages their linear colors and encodes the result for the image.

Make the next picture

Moving the rover changes the scene state. The renderer makes another image. A target of 60 pictures per second gives about 16.67 milliseconds between pictures, but that number is not a measurement of this device’s GPU.

The coordinate contract

This renderer uses a right-handed camera looking along negative Z, an OpenGL-style homogeneous clip volume −w ≤ x,y,z ≤ w, and top-left image coordinates. Near and far distances are 0.5 and 35 authored scene units. Those choices are stated rather than mixed with another API’s conventions.

Clip first, divide second

The implementation clips all six homogeneous planes and linearly carries vertex attributes to newly created intersections. It preserves original triangle IDs and separately numbers generated pieces. Dividing a behind-camera vertex and clamping its image position would give a different, incorrect result.

A reproducible shared-edge rule

Image vertices are snapped to 1/256 of a pixel for this teaching rasterizer. Positive-area triangles include an edge when its vertical difference is negative, or when it is horizontal and points right. This stated top-left convention gives a shared sample to exactly one adjacent triangle.

Depth is not distance in meters

Window depth maps the selected perspective projection into [0,1]. It varies nonlinearly with camera distance. The buffer starts at 1 and uses strict LESS. Equal-depth candidates keep the first submission; a sample exactly on the far plane can fail against the clear depth of 1.

Perspective-correct attributes

For screen weights λ and clip values w, a surface attribute is Σ(λa/w) divided by Σ(λ/w). Already-projected window depth instead uses the straight weighted sum Σ(λd). Applying perspective correction to that depth again would be a mistake.

Why a surface normal needs special care

A normal is perpendicular to a surface. Under a nonuniform object scaling, inverse-transpose transformation preserves that relationship. Treating it like an ordinary direction can produce plausible-looking but incorrect shading. Interpolated normals are normalized before use.

A bounded diffuse response

Linear base color is multiplied by 0.1 + 0.9 max(0, n·l). The constants are authored dimensionless coefficients. Physical Lambertian reflection has a ρ/π BRDF; this simple ambient shortcut does not solve full environmental light transport or cast shadows.

Linear light and sRGB codes differ

A linear value of 0.5 encodes to about sRGB byte 188, not 128. This renderer averages linear sample colors before applying the piecewise sRGB transfer function once. The ramp’s two original colors are specified directly in linear RGB.

Supersampling is a specific algorithm

Four-sample mode evaluates coverage, depth and shading at quarter-offset positions. It is supersampling, not a claim to implement hardware MSAA. Four points do not exactly integrate the covered area of every possible edge.

Counts answer a different question from timers

The counters count work actually performed by this software renderer: input and clipped triangles, candidate tests, covered candidates, successful writes and final visible samples. None is a GPU shader-invocation count. Doubling width and height quadruples pixel count, but it does not establish a universal fourfold runtime.

One auditable image

The pixel report and lossless image are calculated by the same rasterizer. Optional wire edges and contrast-expanded depth are inspection overlays, and their differences are labeled. Source screenshots are separate graphics tests; their pixels are not substituted for the original scene.

A useful subset of rendering

Modern games may use ray tracing, physically based materials, level-of-detail systems, temporal reconstruction and many other techniques. Our opaque triangle pipeline explains a concrete mechanism without claiming that every game uses only these steps.

Understand a game setting

Resolution, geometry detail, texture filtering and frame targets change different parts of a rendering system. Diagnose the stage instead of treating every graphics option as the same quality dial.

Inspect a digital model

A model may retain its dimensions while its projection changes dramatically. Engineers, artists and game developers use multiple viewpoints and inspectable geometry to understand that difference.

Make a reproducible bug report

Freeze the conditions, identify the image location and save the evidence. Our JSON and CSV carry the actual surface candidates and color calculation, making a visual claim inspectable.

The rover looks smaller after the camera moves away. What changed?

• The stored rover necessarily lost triangles
• Its projection onto the image
• Its texture necessarily became darker

With nearest-surface testing on, will drawing a hidden rover last make it visible through the arch?

• Yes; last always wins
• No; the renderer deletes all rover triangles
• No; the nearer candidate at each sample wins

Only the light moves. The silhouette stays fixed but a face gets darker. Which stage changed?

• Shading
• Projection
• The model’s triangle count

The ramp outline is correct, but its checker distorts under straight screen blending. What failed?

• The image has too few colors
• The surface attributes need perspective-correct interpolation
• Every dark square needs its own light

You double image width and height while keeping the scene fixed. What is guaranteed?

• Four times as many image pixels
• Four times as many triangles
• Exactly four times the runtime on every device

Two of four samples are linear white and two are black. What does this model do?

• Call encoded byte 128 exactly half linear light
• Throw away the extra samples
• Average to linear 0.5, then encode to about byte 188

A target says 60 frames per second, or 16.67 ms between frames. What does that establish?

• The GPU used exactly 16.67 ms
• The desired interval, not an actual GPU duration
• Every device will achieve the target

Two adjoining triangles leave a diagonal seam in a frozen image. What should you inspect first?

• Their shared coordinates and edge-ownership rule
• The screen’s refresh rate
• Whether the rover needs more texture colors

Clipping, perspective attributes, shared-edge ownership and opaque depth

OpenGL 4.6 Core, §§13.7–13.8, 14.6.1 and 17.3.4. Mechanism reference; this bounded software renderer does not implement every operation.

A consistent top-left fill convention

Triangle rasterization and explicit differences between multisampling and per-sample shading. Our chosen coordinate convention is declared separately.

Diffuse reflection and its limits

The physical Lambertian BRDF is distinct from the authored normalized ambient/direct response in this lesson.

Inverse-transpose normal transformation

Normals must retain perpendicularity under nonuniform scaling.

Linear RGB and encoded sRGB conversion

Piecewise transfer function; bounded nonnegative values. Mixing is done in linear light before encoding.

Source texture coordinates and color representation

glTF 2.0 §§3.8.4 and 3.9. Color textures differ from non-color data such as normal maps.

GPU timers need availability and validity checks

Asynchronous GPU query semantics; no such timing is claimed by the lesson’s counters.

Animation callbacks are not GPU execution timers

Browser animation-frame scheduling and timestamps. A target frame interval and an observed callback interval are separate quantities.

Genuine texture orientation test

Ed Mackey / Analytical Graphics. Pinned sample asset commit 90d7ede; CC0 metadata with legacy CC BY 4.0 embedded notice preserved.

Genuine linear interpolation test

lexaknyazev. CC0 original source images; differing camera/background prevents treating them as registered pixel differences.

Selected historical rendering example

Catmull and Parke, 1972, presented by the holding institution with creator credit. Linked only; film reuse rights not established.

Subdivision and image mapping research

University of Utah institutional record and abstract for Catmull’s 1974 dissertation. Full thesis was not exhaustively reviewed.