Fixing Opacity Cutoff for Smooth Particles in Three.js with Depth Testing

When creating particle effects in Three.js, handling opacity smoothly can be tricky. You’ve probably noticed how particles sometimes show harsh edges or sudden cutoff, especially when using depth testing. If you deal with particle systems frequently, you’ve likely struggled with transparent particles incorrectly appearing opaque, or foreground particles disappearing behind those in the background due to incorrect z sorting.

The problem usually occurs because Three.js (and WebGL, in general) relies heavily on depth testing to determine the visibility of objects. Typically, z sorting decides the rendering order based on object positions, but with particles—with their transparent or semi-transparent textures like smoke, fire, or clouds—this can become complicated.

You’ve probably tried several methods to fix this: adjusting blending factors, disabling the depth testing completely, or using alpha tests. Yet, each comes with its drawbacks and doesn’t fully address the issue. To better illustrate the issue, check out this Codepen example demonstrating opacity cutoff problems in particle rendering.

Understanding Particle Systems and Soft Edges in Three.js

A particle system consists of multiple small textures or sprites emitting in groups. Used commonly for effects like smoke, clouds, fire, or sparks, particles are small visual elements that collectively form realistic-looking visuals. Soft edge particles, unlike hard edges, gradually fade into transparency at their edges, creating subtle, smooth visual effects.

Soft edges become problematic in traditional rendering pipelines. Three.js determines rendering orders by sorting objects based on their depth values (z ordering). Transparent objects require a specific order of rendering—from furthest to closest—to achieve the correct visual blend. If particle rendering misaligns with depth sorting, you get abrupt opacity cutoffs or incorrectly hidden particles.

Imagine painting a landscape where you must first paint the distant mountains, then the rivers, and finally the nearby trees. Mixing up that order can cause unnatural visuals—this is similar to the depth sorting issue faced in Three.js.

What is Depth Testing in Rendering?

Depth testing (also known as z-buffering) in WebGL rendering lets the renderer determine whether a pixel should appear in front or behind another pixel based on depth value comparisons. Each rendered pixel is checked against previously rendered pixels’ depth information in a depth buffer.

It’s a valuable part of rendering opaque objects, where each pixel fully covers the one behind it. However, depth testing complicates rendering transparent objects because blending multiple transparent objects needs a specific, precise rendering order. Incorrect rendering inevitably leads to unexpected visual glitches—such as opacity cutoffs or wrongly hidden pixels.

Looking at the Provided Particle Shader Code

The provided Codepen example contains vertex and fragment shaders that handle the particle rendering visuals. The vertex shader positions vertices and forwards their information to the fragment shader. Meanwhile, the fragment shader determines each particle pixel’s transparency (alpha) and color.

Here’s a simplified explanation of the fragment shader logic used in particle systems:


varying vec2 vUv;
uniform sampler2D texture;

void main() {
    vec4 textureColor = texture2D(texture, vUv);
    if(textureColor.a < 0.1) discard;
    gl_FragColor = textureColor;
}

The shader above discards transparent pixels below an alpha threshold (0.1 here). This technique helps performance, but it introduces abrupt opacity cutoffs in particle systems.

Identifying the Cause of Opacity Cutoffs

The opacity cutoff and depth sorting issues emerge because fragments discarded by alpha tests leave no depth data behind. Without this depth information, the renderer mistakenly thinks pixels behind discarded pixels are free to display, causing visual confusion.

Furthermore, particles rendered out-of-order—such as rendering distant particles after closer ones—make depth testing problematic. Opaque fragments block rendering inappropriately, creating further discrepancies between intended and actual visuals.

Effective Strategies to Fix Opacity Cutoff Issues

Two primary strategies effectively solve opacity cutoff issues in Three.js particle systems:

1. Double Pass Rendering Technique: This involves rendering particles twice. The first pass renders particles to the depth buffer only, establishing depth information without affecting color. The second pass renders particle colors considering proper transparency and depth data.

2. Adjusting Material Settings: Modifying Three.js material properties like "depthWrite" and "depthTest", tuning blend modes appropriately, or adjusting alpha cutoff values can also solve these rendering issues.

Implementing a Double Pass Rendering Solution

Let's walk through a practical double-pass solution, step-by-step:

Step 1: Use two materials for particles. The first renders depth information only:


particleMaterialDepth = new THREE.ShaderMaterial({
    uniforms: { texture: { value: particleTexture } },
    vertexShader: depthVertexShader,
    fragmentShader: depthFragmentShader,
    depthWrite: true,
    colorWrite: false,
    transparent: true
});

Your fragment shader in depth pass would write depth but no color:


varying vec2 vUv;
uniform sampler2D texture;

void main() {
    vec4 tex = texture2D(texture, vUv);
    if (tex.a < 0.1) discard;
    // Depth write only, no color output
}

Step 2: Render the second pass normally with your existing particle material settings, this time allowing blending and color-writing but disabled depth writing to avoid overwriting the previously obtained depth information:


particleMaterialRender = new THREE.ShaderMaterial({
    uniforms: { texture: { value: particleTexture } },
    vertexShader: standardVertexShader,
    fragmentShader: standardFragmentShader,
    depthWrite: false,
    transparent: true,
    blending: THREE.NormalBlending
});

After implementing both passes, particles render correctly with smooth transparency.

Examples of Successful Implementations

Many successful implementations showcase correct particle transparency handling through depth testing and double-pass rendering, like realistic smoke or cloud renders. You can see extensive examples within the advanced particle tutorials on sites like Three.js Examples.

Compare your visuals before and after double-pass implementation—you'll notice significant improvements in smoothness and realism in particle rendering.

Best Practices for Great Particle Visuals

Achieve optimized, high-quality particle visuals with these best practices:

Slowly adjust "depthWrite" and "blending" settings to match your graphics requirements.
Avoid overly complex shaders and particle densities to preserve performance.
Properly sort transparent and opaque objects in your scene rendering order.
If performance is a significant concern, simplify particles' shaders and reduce alpha-testing discard limits.
Consider pre-rendered textures instead of computationally intensive procedural textures to optimize performance.

Google Chrome's excellent dev tools or the Firefox WebGL inspector help analyze rendering performance bottlenecks, further improving your particle visuals' efficiency.

Opacity rendering issues significantly affect visual quality, reducing realism and usability in particle-based visualizations. Smooth, realistic particle rendering transforms basic effects into visually appealing scenes—making games, visual experiences, and creative projects significantly more engaging.

If you'd like more insights, check out these helpful resources to further sharpen your Three.js skills:

Have you faced similar issues with opacity cutoff in particle effects? Did this solution work well for you? Feel free to share your experience or tips in the comments below. Happy particle rendering!