Cigarette Smoke Effect Using Shaders

Posted3d agoActive1d ago

bradwoodsio

119 points

22 comments

garden.bradwoods.iostory

informativeneutral

Game Prototyping3dDevelopment_tools

Key topics

Game Prototyping

Development_tools

Cigarette Smoke Effect: Cigarette smoke effect using shaders

Snapshot generated from the HN discussion

Discussion Activity

Active discussion

First comment

Peak period

3-6h

Avg / period

3.7

Comment distribution26 data points

Loading chart...

Based on 26 loaded comments

Key moments

01Story posted
Jan 5, 2026 at 6:32 AM EST
3d ago
Step 01
02First comment
Jan 5, 2026 at 8:46 AM EST
2h after posting
Step 02
03Peak activity
14 comments in 3-6h
Hottest window of the conversation
Step 03
04Latest activity
Jan 7, 2026 at 6:41 AM EST
1d ago
Step 04

Generating AI Summary...

Analyzing up to 500 comments to identify key contributors and discussion patterns

Discussion (22 comments)

Showing 26 comments

lelandfe

3d ago

1 reply

As someone who knows nothing about shaders, this was very cool. Pretty refreshing to see such an interesting site design, too.

orphea

3d ago

1 reply

  > an interesting site design

Agree - making the scrollbar only 8 pixels wide is an interesting choice...

wvbdmp

3d ago

about:config

    layout.css.scrollbar-color.enabled – false
    layout.css.scrollbar-width-thin.disabled – true 
    layout.css.scrollbar-width.enabled – false

fuckem

petermcneeley

3d ago

3 replies

In a game this is likely done as simply a prerendered animated texture (atlas). Perhaps in a modern AAA game you might try a GPU particle system with 10k+ particles.

embedding-shape

3d ago

1 reply

Or, a shader :) Smaller size than a atlas, more efficient that full on particle simulation.

jayd16

3d ago

Particle systems can be very efficient. Modern ones are designed to be able to build this kind of shader from a GUI. If you don't use any kind of physical simulation (and this doesn't), you wouldn't pay for it.

You could build this same set up in a particle system and then have convenient knobs (like physics) to turn on for higher quality instances.

Lerc

3d ago

I suspect it depends more on what the developer knows. You certainly don't need to be AAA to do particle smoke, I've done webgames with particle smoke in JavaScript.

With the right tech artist, this sort of shader is essentially what their job is. ShaderToy shows how much you can do with a quad and enthusiasm.

corysama

3d ago

Back in the days of the PS2, you’d just take a couple of long triangle strips, give them a twist or two, then UV-animate a static texture up through them.

reactordev

3d ago

1 reply

awww, cool effect but I was half hoping for fluid dynamics simulation of the smoke with a lorenz fractal. What I've done is render the "smoke" to a framebuffer then apply some velocity to create some small vorticities.

fleahunter

3d ago

1 reply

Interesting point about the fluid dynamics! I’ve always been fascinated by how we can use math and physics to create visuals that feel so alive. A couple years back, I tried to replicate smoke effects in a game and ended up getting lost in fluid simulations—it’s wild how a few equations can lead to such organic results.

But I wonder if there's a way to combine both approaches? Like using smooth gradients for the base texture while applying some small-scale turbulent dynamics on top. It could add a nice touch of realism without going full-on simulation, which can get heavy on performance.

Also, have you found any tools or libraries that make working with these simulations more accessible? Sometimes it feels like there’s a barrier to entry with the math, but once you get it, the creative possibilities are endless!

reactordev

2d ago

Vector textures is how you fake it like you’re talking about. Just render the fft/liquid to a 3D texture where the RGBf is the normalized vector. Use this texture when you render the smoke billboard to add those vortices in 3D space by multiplying the uv by the vector in the vertex shader and shading like you do with the noise in the pixel shader.

Ooooo… we have smoke like it’s a 1930s billiards bar.

Here’s a few examples that use some fluid dynamics to make “smoke”

https://play.huwroberts.dev/advection/

https://www.shadertoy.com/view/DsKyWm

https://ghostinthecode.net/2016/08/17/fire.html

For fire, the import part is the flame, not the spark. It’s the same methods as above. Everything eventually lands on a 2D texture where you blur or blend it with the scene.

For smoke ribbons this works really well in screen space. For big plumes like mushroom clouds or physical clouds not so much. For those, volumetric SDF is the way to go with rayleigh marching and some gradient of grey.

Anyway, happy coding and enjoy playing with the rules of reality!

birdman3131

3d ago

1 reply

A bit pedantic but that is a pipe smoke effect not a cigarette effect. Cigarette smoke tends to go horizontal for a ways before kinda going vertical.

It works well in the image they use to demo it but the image shows a pipe where it actually looks right.

embedding-shape

3d ago

1 reply

I'm not sure you can say one behaves one way and the other not, surely depends on lots of variables.

As an anecdote, I'm literally sitting with a lit cigarette in my hand right now, and the little smoke that comes from the cigarette itself, goes straight up.

llmslave2

3d ago

> I'm literally sitting with a lit cigarette in my hand right now

How does it feel to be living my dream rn...

throw-12-16

3d ago

1 reply

i am so glad threejs is still seeing use, my personal favorite js lib

bhouston

3d ago

1 reply

ThreeJS has never been more popular with +3M downloads / week just prior to the holiday break: https://www.npmjs.com/package/three

throw-12-16

3d ago

in a week of pretty bad news, this is my highlight

lucasoshiro

3d ago

Cool! But the title made me think that "cigarette smoke effect" made me think that it was about health issues, and I clicked because I was curious about how shaders could be related to that.

talkingtab

3d ago

There is the smoke part - worth seeing, the shader part - well worth exploring (shaders make you see the world in a different way , then there is the learning part. The site is very interactive so it allows you to see one, do one and maybe teach one.

Many people are stuck in html land. I was. Webgl, threejs, @react-three/{fiber/drei} provide another dimension and shaders are the gateway.

Very highly recommended as a skill worth understanding (at least).

echoangle

3d ago

Small mistake in the article: "Occlusion" is misspelled as "Occulsion" multiple times.

pavlov

1d ago

Immediately plays the Broadcasters logo laughter in my head.

IYKYK (but only if you lived in Finland in the 1990s)

bhouston

3d ago

Very cool!

I did similar cigarette/ink-like smoke a few times in the VFX industry.

The first attempt was similar to yours using a grid: https://benhouston3d.com/siggraph/2005-2.html, but like yours it isn't that scalable (lots of memory and slow, but maps to GPUs well.)

The second approach, used in the Exocortex Slipstream VX plugin series, was much more efficient using "vortex method" thus not tied to a grid:

Demo video: https://vimeo.com/groups/slipstreamvx/videos/11901355

Harry Potter usage: https://benhouston3d.com/exocortex-intel-article-va10mag.pdf

Theory video: https://vimeo.com/69586020

The second method, vortices, can be mapped to GPUs via complex memory structures though:

https://vimeo.com/11928506

simonsarris

3d ago

Beautiful, my favorite kind of post for HN. Thank you Brad.

DamnInteresting

3d ago

I made a similar effect a few years back using layered transparent PNGs[1]. It's not quite as dynamic, but it's probably a lot more efficient.

[1] https://www.damninteresting.com/ghoulish-acts-dastardly-deed...

ProllyInfamous

2d ago

Attention aspiring landlords: please consider how expensive it is to remediate a property after years of indoor nicotine use (let alone the health effects to adjoining units, if any). Do whatever you want inside your own house, I don't care.

—Property manager, currently renovating a decades-smoked unit — just absolutely disgusting (and the de-tar chemicals are harsh, while still requiring mechanical dislodging) — I've already suggested that a non-refundible $3,000 deposit become required, if nicotine indoors isn't outright-banned (I don't care about weed indoors — it doesn't leave behind yellow tar everywhere).

So glad that even after decades of minimal drug abuse, cigarettes were never one of my vices.

dylan604

3d ago

As a very young person using an acquired copy of Photoshop with very little knowledge of graphic design, the Filter > Render > Clouds was something that I would never have guessed at just how useful and how often I would actually end up using it after many many hours in the chair.

View full discussion on Hacker News

ID: 46497589Type: storyLast synced: 1/5/2026, 7:30:51 PM

Want the full context?

Jump to the original sources

Read the primary article or dive into the live Hacker News thread when you're ready.

Open link View on HN