ch08: The Depth Buffer

[majorgilles]

Goal, in plain English

Make closer objects correctly appear in front of farther objects.

Without a depth buffer, the GPU can draw things in the wrong order. A far object might appear on top of a near object. The depth buffer fixes that.

Tutorial: https://sotrh.github.io/learn-wgpu/beginner/tutorial8-depth/

Important project rule

Build this in the main app using shared src/ code. Do not make a totally separate implementation.

What you are learning

• Depth = how far a pixel is from the camera.
• Depth buffer = a hidden image that stores depth values.
• Depth texture = the GPU texture used for the depth buffer.
• Depth-stencil state = pipeline settings that turn depth testing on.
• Occlude = hide behind something closer.
• Grayscale = black/white image. Here it helps you see the depth buffer.

What to build

1. Follow Learn Wgpu chapter 8.
2. Create a depth texture.
3. Add depth-stencil state to the render pipeline.
4. Use the depth texture while rendering.
5. Recreate the depth texture whenever the window is resized.

Extra beginner-friendly variation

Add a key toggle, for example D.

While the key is held, show the depth buffer on the screen as grayscale instead of the normal colors.

Pick one rule and stay consistent:

• closer = brighter, farther = darker
• or closer = darker, farther = brighter

Done when

• cargo run shows overlapping 3D geometry in the correct front/back order
• Holding the toggle key shows the depth buffer as grayscale
• The depth view clearly shows depth changes, not a flat white/black screen
• The depth texture is recreated on window resize

Depends on

Finish #7 first.

Time estimate

Local estimate: 4–7 hours of focused work.

Assumes basic Rust knowledge, no prior graphics experience, and the type-along + small-variation working pattern. This is a local estimate for this issue only; see README.md for the global cursus estimate.

[majorgilles]

Estimated effort: 4-7 hours