Explore how depth testing, transparency, render order, and blending modes interact. All three planes are visible below - experiment with the controls!
Tip: Try the preset scenarios to see common configurations and mistakes.
Basic: No lighting calculations, fastest performance. Color appears the same from all angles.
Standard: Physically-based rendering (PBR) with realistic lighting. Responds to lights in the scene.
Shader: Custom GLSL shader with gradient alpha effect. Full control but more complex.
Controls how transparent the object is, from 0.0 (fully transparent/invisible) to 1.0 (fully opaque/solid).
Note: Must have "Transparent" checked for opacity to work.
Controls the drawing sequence. Objects with higher values render after (on top of) objects with lower values.
Normal: Standard alpha blending - colors mix based on opacity.
Additive: Colors add together, creating bright glowing effects. Great for light, fire, particles.
Subtractive: Colors subtract - creates darkening effects.
Multiply: Colors multiply - always darkens, useful for shadows.
Must be checked to enable alpha blending. Without this, opacity has no effect.
Unchecked: Object is fully opaque regardless of opacity setting.
When checked, the GPU tests if a fragment is closer than what's already rendered before drawing it.
Use case for unchecked: UI elements, overlays, special effects that should ignore 3D space.
When checked, rendering updates the depth buffer, blocking objects behind it.
⚠️ Common mistake: Having depthWrite=true on transparent objects causes rendering artifacts where objects behind don't blend properly.
Standard Opaque Object:
Standard Transparent Object: