Small mistake in the article: "Occlusion" is misspelled as "Occulsion" multiple times.
Cigarette smoke effect using shaders
11–20 of 27 posts
Re: Cigarette smoke effect using shaders
#12A 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.
Re: Cigarette smoke effect using shaders
#13Very 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:
Re: Cigarette smoke effect using shaders
#14I 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...
Re: Cigarette smoke effect using shaders
#15Beautiful, my favorite kind of post for HN. Thank you Brad.
Re: Cigarette smoke effect using shaders
#16awww, 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.
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!
Re: Cigarette smoke effect using shaders
#17A 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.
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.
Re: Cigarette smoke effect using shaders
#18In 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.
Or, a shader :) Smaller size than a atlas, more efficient that full on particle simulation.
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.
Re: Cigarette smoke effect using shaders
#19i am so glad threejs is still seeing use, my personal favorite js lib
Re: Cigarette smoke effect using shaders
#20i am so glad threejs is still seeing use, my personal favorite js lib
ThreeJS has never been more popular with +3M downloads / week just prior to the holiday break: https://www.npmjs.com/package/three