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

Overwhelmingly positive. The community appreciates the craftsmanship of both the smoke effect and the interactive tutorial format. Technical discussion is constructive, exploring alternative approaches without dismissing the article's method. The article is seen as exactly the kind of creative, educational content Hacker News values.

In Agreement

• A professional VFX artist validates the shader approach and shares related production work including vortex-method smoke used in Harry Potter films
• Shaders are a valuable skill worth understanding, and the interactive site design makes learning them especially accessible
• Three.js remains highly popular and relevant with millions of weekly npm downloads
• The tutorial represents the 'favorite kind of post' for Hacker News — beautiful, technical, and well-presented

Opposed

• In production games, smoke is typically done with prerendered animated texture atlases rather than runtime shaders, making this approach less practical for game development
• Modern GPU particle systems can achieve similar results through a GUI without hand-written shader code, offering more flexibility
• The effect could be more convincing with actual fluid dynamics simulation rather than noise-based animation
• The smoke behavior looks more like pipe smoke than cigarette smoke, since cigarette smoke tends to travel horizontally before rising