The depth test, with a pixel read back
A near red triangle and a far blue one overlap. The middle pixel is red however you order them, until the depth test is turned off. The blue triangle is hidden behind the red one.
The rendering pipeline is the fixed chain of steps that turns corner positions into coloured pixels: vertex shader, clip space, rasterisation, fragment shader, depth test and the picture. You program two of the steps; the rest are built into the GPU.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Using the pixel-read code in the depth-test example, write a check that reads the middle pixel of a scene and logs whether it is black.
A transparent window and a car behind it are drawn in the wrong order and the car shows through wrongly. Which stage of the pipeline is responsible, and what would you check first?
Explain it without notes
Walk one vertex through the pipeline in your own words, from a position in your code to a pixel on the screen.
A hand-built triangle doesn't show up, and renderer.info.render.triangles says 1. Give three possible causes.
Console
Nothing logged yet.Expected console output
far drawn first, depth test on : red (near)
near drawn first, depth test on : red (near)
near drawn first, depth test off: blue (far)