January 5, 2026
Smoke and mirrors? More like smoke and shaders
Cigarette smoke effect using shaders
Cool web ‘cigarette smoke’ demo wows newbies while pros yell “just use a texture”
TLDR: A tutorial uses a moving noise pattern and transparency to fake rising smoke in the browser. Newbies are dazzled, while pros say real games use pre‑animated textures or particle systems, and others want full fluid simulations—making this a fun, accessible demo that sparked an expert flex-off.
A hypnotic tutorial shows how to fake cigarette smoke in the browser using a simple shader and the Three.js graphics library—think a flat sheet with a moving gray pattern that’s turned into see‑through “smoke.” The community instantly split into camps, and the comments got spicy. Beginners like lelandfe are starry‑eyed, calling it “very cool” and loving the interactive site that flips between views like “UV,” “texture,” and “mask” so you can see how the trick works.
Then the game‑dev crowd barged in. petermcneeley threw a reality check: in real games, smoke is usually just a pre‑animated texture (an “atlas”), or if you’re fancy, a GPU particle system throwing around tens of thousands of tiny puffs. Translation: this demo is neat, but don’t pretend it’s how AAA studios do it.
The science‑nerds wanted chaos—literally. reactordev pined for fluid dynamics and Lorenz fractals, describing how they push “smoke” around with velocity fields to get swirling mini tornadoes. Meanwhile, lucasoshiro admitted the title sounded like a health PSA, not code, so yes, some accidental clickbait was involved. And talkingtab went full teacher mode, preaching that shaders are a gateway out of “HTML land” into the 3D universe.
The vibe: it’s accessible magic for newcomers, an educational win with nifty edge fades and contrast tweaks to make the smoke look airy—while pros flex receipts and ask for “real” simulations. Drama level: cozy campfire, with a side of “could be more realistic.”
Key Points
- •A plane with Three.js ShaderMaterial hosts custom vertex and fragment shaders for smoke rendering.
- •A Perlin noise texture is loaded and sampled via UV coordinates to create randomized smoke patterns.
- •The texture is used as an alpha mask (white color + texture-driven alpha) with transparent: true for translucency.
- •Vertical motion is achieved by RepeatWrapping and a time uniform (uTime) from THREE.Clock, with uSpeed controlling rate.
- •Grayscale values are remapped (uRemapLow/uRemapHigh) and edge fades are applied using smoothstep (e.g., uEdgeX).