- 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
by talkingtab
0 subcomment
- 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).
by petermcneeley
3 subcomments
- 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.
- Small mistake in the article: "Occlusion" is misspelled as "Occulsion" multiple times.
- As someone who knows nothing about shaders, this was very cool. Pretty refreshing to see such an interesting site design, too.
by reactordev
1 subcomments
- 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.
by DamnInteresting
0 subcomment
- 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...
- Immediately plays the Broadcasters logo laughter in my head.
IYKYK (but only if you lived in Finland in the 1990s)
- 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.
by birdman3131
1 subcomments
- 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.
by ProllyInfamous
0 subcomment
- 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.
by throw-12-16
1 subcomments
- i am so glad threejs is still seeing use, my personal favorite js lib
by simonsarris
0 subcomment
- Beautiful, my favorite kind of post for HN. Thank you Brad.
by lucasoshiro
0 subcomment
- 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.
Hacker News