THREE.JS / FOUNDATIONS 285

Let smoke respect the world.

The official soft-particles example fades smoke sprites where they intersect solid geometry. This study keeps viewport depth, view-space conversion, contrast shaping, sprite lifecycle, and the WebGL2 capability boundary visible without relying on external assets.

Initializing-

Building a local occluder, ground, and procedural smoke texture.

backend: -
opacity: -
particles: -
depth: -

Shape the intersection fadetexture -> fade -> depth -> sprite

renderer target particle count intersection mode soft distance 1.00 fade contrast 2.00 smoke speed 0.20 smoke opacity 0.75 sprite scale 1.00

pause smoke show occluder

Depth graphwaiting

source: -
particle: -
scene: -
conversion: -
distance: -
contrast: -

The soft path compares particle and opaque scene depth in view space before applying the contrast curve.

Particle graphwaiting

texture: -
lifecycle: -
position: -
scale: -
count: -
blend: -

A deterministic texture and range-based lifetime keep the particle source local while the sprite material owns the fade.

Backend boundarywaiting

WebGPU: -
WebGL2: -
fallback: -
material: -
draw calls: -
resources: -

WebGPU reads the viewport depth graph; WebGL2 keeps the generated smoke and solid scene but uses a direct hard-sprite reference.

Sourcetexture()

Generated smoke alpha is sampled and rotated through the sprite UV domain.

Lifecyclerange() + time

Per-instance lifetime drives position, scale, and fade without JavaScript particle objects.

DepthviewportDepthTexture()

The opaque scene depth is read at the particle fragment.

CurvecontrastCurve()

Normalized depth separation becomes a controllable symmetric fade.

Comparehard fallback

The direct path preserves the sprite scene while labeling the missing viewport-depth node.

Soft particle timingwaiting

rebuild ms: -
CPU avg: -
CPU p95: -
frames: -
updates: -
draw calls: -

Tune the intersection fade, then measure thirty frames of the active path.

texturelifetimedepthcontrastsprite

This is a deterministic adaptation of the official soft-particles example: local smoke and occluder assets replace external files while viewport depth, view-space conversion, contrast shaping, sprite lifecycle, and the hard fallback boundary remain executable.

Sources: official soft particles example · TSL · ViewportDepthTextureNode · SpriteNodeMaterial