Rising Smoke in three.js with Noise-Driven Alpha and Vertex Twisting

A three.js plane is shaded with a Perlin noise texture used as an alpha mask, then animated upward by scrolling UVs. The effect is refined with smoothstep remapping, edge fades, and a vertex-level twist driven by a vertical noise slice. Transparency is handled by enabling transparency and disabling depth writes for proper layering.

Key Points

Use a Perlin noise texture as an alpha mask (white color with noise-driven alpha) to create translucent smoke; set transparent: true.
Animate rising smoke by vertically repeating the texture (RepeatWrapping) and offsetting the sample UVs over time via uniforms (uTime, uSpeed).
Improve realism by remapping noise values with smoothstep for stronger contrast and fading geometry edges with smoothstep on UV borders.
Add depth and variation by twisting the plane in the vertex shader: sample a vertical noise slice, animate it, and rotate xz per-vertex by a noise-derived angle.
Disable depthWrite to properly layer semi-transparent smoke without unwanted occlusion.

Sentiment

The overall sentiment of the discussion is largely positive, with one commenter expressing clear appreciation for the article's content and presentation. The other comment, while suggesting alternative methods, doesn't criticize the article's approach but rather offers contextual information on how such effects are typically handled in game development, making it more of an alternative perspective than strong opposition.

In Agreement

The shader explanation provided in the article is 'very cool' and interesting.
The site design itself is 'pretty refreshing'.

Opposed

In game development, a smoke effect like this is typically implemented as a prerendered animated texture atlas for simplicity and performance.
For modern AAA games, a GPU particle system with 10,000+ particles would likely be used to achieve a sophisticated smoke effect, implying the article's method might not be the standard for high-fidelity game contexts.