Inspect the relationship#
Inspect covered pixel centers, barycentric colors, overlapping triangles, and the effect of draw order.
A triangle becomes pixels This illustration uses canvas. The explanation below describes the same process.
Try these experiments#
- Keep depth enabled and move the second triangle from a depth greater than three to one less than three. Its overlapping pixels become visible in front.
- Disable depth. The second draw now overwrites covered pixels regardless of distance.
- Toggle the pixel grid to inspect color continuity rather than sample boundaries.
What the illustration calculates#
The coarse grid contains 32 × 20 sample centers. Each triangle computes barycentric weights for every center. Nonnegative weights indicate coverage. The first triangle uses those weights to interpolate its three corner colors. The second is drawn afterward and wins only where its depth passes, unless depth is disabled. The lab intentionally keeps every vertex of each triangle at one depth. That isolates depth selection from perspective interpolation. The homepage scene renderer additionally interpolates reciprocal depth and attributes. Real GPU rasterization also has clipping, coverage conventions, multisampling, and shader execution rules beyond this coarse model.
Connect it to a draw#
The mesh provides vertices and indices. The vertex shader produces clip-space positions. The pipeline’s depth attachment and comparison control visibility. A fragment can be covered but rejected before it contributes color. Turning off depth is a pipeline change, not a change to the mesh.
Barycentric interpolation
w0 + w1 + w2 = 1
color = w0 * c0 + w1 * c1 + w2 * c2For perspective-varying attributes, interpolate attribute/w and 1/w and divide afterward. Native shaders normally receive the interpolated values without implementing the entire rasterizer themselves.
What to inspect when it is wrong#
An object visible through a wall may have depth disabled, no valid depth attachment, or inconsistent projection. A later draw overwriting an earlier one is expected when depth is disabled. At equal depth, this lab’s LESS rule preserves the earlier sample. It does not implement the complete GPU top-left edge convention. Read how 3D works and first triangle.