Blending and sort order

Three translucent quads and one opaque box, composited by hand. Break the image with the wrong draw order or a stray depth write, then fix it.

red z=2.0 (nearest) green z=3.0 blue z=4.0 (farthest) opaque box z=3.5

Move the pointer over the image to probe a pixel; the readout shows that pixel's blend arithmetic, step by step.

What to notice. Alpha blending is not commutative: with reversed order the colours come out wrong, and with depth writes on as well the far quads vanish entirely — a near transparent surface wrote depth and occluded them. Additive and multiply survive any order, which is exactly why particle systems prefer them.

← all demos