09 Drawing in several passes

Blending: transparency is a formula

Move the translucent object and watch the ring behind it; then switch blending modes.

Opacity0.50

0.11

Object front/back0.40

-1.41.4

Depth writeOff

Blending

Explanation

Drag the underlined numbers left and right

material.transparent = true;material.opacity = ;material.depthWrite = ;material.blending = THREE.;mesh.position.z = ;

Blend formulaNormal: src × α + dst × (1 − α). Additive: src × α + dst.

JS side

Transparency is blending: the new colour is combined with what the buffer already holds. Order changes the result, so transparent objects need sorting.

Try it

Turn off depth write and compare the ring behind
Switch to Additive