Three.js AdditiveBlending vs NormalBlending

In Three.js, blending modes control how the pixels of a newly rendered material combine with the pixels already present in the background. This article explains the fundamental differences between NormalBlending and AdditiveBlending, their mathematical behaviors, and the specific use cases where you should apply each in your 3D projects.

What is NormalBlending?

NormalBlending is the default blending mode (THREE.NormalBlending) in Three.js. It simulates standard physical transparency, where foreground objects partially cover background objects based on their opacity.

• How it works: When you render a semi-transparent material using normal blending, Three.js mixes the color of the source object with the color of the destination (the background) based on the source’s alpha (opacity) value.
• The Math: \(Color = (Source \times Alpha) + (Destination \times (1 - Alpha))\). If the source opacity is 1.0, the background is completely blocked out. If it is 0.5, you see an even 50/50 mix of the two colors.
• Best used for: Standard transparent surfaces like glass, water, plastic, or semi-transparent UI elements.

What is AdditiveBlending?

AdditiveBlending (THREE.AdditiveBlending) mimics the behavior of light. Instead of layering one color on top of another, it adds the color values of the overlapping pixels together.

• How it works: When pixels overlap in additive mode, their color channels (Red, Green, and Blue) are added directly to the pixels behind them. Because color in digital displays is additive (adding red, green, and blue makes white), overlapping multiple additive materials will cause the overlapping areas to become brighter, eventually turning pure white.
• The Math: \(Color = Source + Destination\). In this mode, opacity acts as a multiplier for the source color before it is added to the background.
• Best used for: Special effects that emit light, such as fire, sparks, lasers, explosions, holograms, stars, and particle systems.

Key Differences at a Glance

• Brightness: NormalBlending keeps the scene brightness stable, whereas AdditiveBlending increases the brightness of the scene wherever objects overlap.
• Background Interaction: NormalBlending works well on any background. AdditiveBlending requires a dark or black background to be visible; if placed against a pure white background, additive objects become completely invisible because the color values are already at their maximum.
• Depth Writing: With NormalBlending, transparent objects often require careful depth-sorting (depthWrite: false) to avoid rendering artifacts. With AdditiveBlending, you almost always set depthWrite: false because light sources do not occlude each other, allowing them to stack and blend seamlessly regardless of render order.