7 ms·

Volumetric Particle Flow

236 points by rinesh 12y ago

mhax 12y ago
Looks reminiscent of a fairlight demo from 2009 http://www.youtube.com/watch?v=ezltebzdgjI http://www.youtube.com/watch?v=ezltebzdgjI
- dharma1 12y ago
  yeah, Smash used curl noise too. He got some crazy particle counts back then. Awesome dev. https://directtovideo.wordpress.com/2009/10/06/blunderbuss/ https://directtovideo.wordpress.com/2009/10/06/blunderbuss/
- Jare 12y ago
  Worth a link to his extensive blog posts http://directtovideo.wordpress.com/category/fluid-dynamics/ http://directtovideo.wordpress.com/category/fluid-dynamics/
- implr 12y ago
  They did two much more impressive demos[1][2] with this technology, including drawing complex geometry using only point sprites, on DX9(no compute shaders). It's remarkable that those five year old demos could easily do flows, shading and blending on milions of particles in real time, while this JS version starts dropping frames at 262K. [1] Agenda Circling Forth http://www.youtube.com/watch?v=L5w7Gh7WBjw http://www.youtube.com/watch?v=L5w7Gh7WBjw [2] Ceasefire http://www.youtube.com/watch?v=Grqb1aIa_4s http://www.youtube.com/watch?v=Grqb1aIa_4s
  - pdkl95 12y ago
    As cool as those are, I've always found Numb Res to be the most impressive: http://directtovideo.wordpress.com/2011/05/03/numb-res/ http://directtovideo.wordpress.com/2011/05/03/numb-res/ ( http://www.pouet.net/prod.php?which=56900 http://www.pouet.net/prod.php?which=56900 ) ( https://www.youtube.com/watch?v=LTOC_ajkRkU https://www.youtube.com/watch?v=LTOC_ajkRkU ) Subtle presentation a great effect, but this bit from the demo's nfo is kind of insane: 3d smoothed particle hydrodynamics with a fully-featured solver, supporting surface tension, viscosity and collisions with arbitrary meshes. rendering as metaballs converted to triangle meshes with marching cubes. simulating around 250,000 - 1 million particles per frame and generating & rendering several million vertices per frame during triangulation. except we wanted to do it in realtime. on a consumer gpu. on vanilla directx 9. no cuda/compute, no geometry shaders. (they'd probably be too slow anyway.) with everything else youd expect from a modern demo going on around it and on top. the best possible lighting, depth of field, post-process antialiasing. twice. (for stereoscopic 3d.) with style.
    - tdicola 12y ago
      I wish there was a HN thread to geek out about the demo scene. Was just watching some of the Mind Candy DVDs recently and going down memory lane.
    - gioele 12y ago
      The page also shows that sometimes what you think is hard is easy and what you overlook is the really difficult bit: > The problem with SPH in realtime is it’s really really hard. The simple explanation of the algorithm is: “take all the particles near my particle and perform some force exchange between them”. At this point I was expecting a long discussion on all the clever tricks they have found to calculate the force exchange between thousands of particles in a snap. And instead... > The force exchange is easy; the “all the particles near my particle” is a bitch. On GPU it’s even more of a bitch; and in 3D it becomes an order of magnitude more of a bitch. > [...] > The problem is simply the neighbourhood search. You end up with a variable amount of fast-moving particles affecting each particle, where it’s hard to pick an upper bound – so the spatial database is hard to construct. If you solve the neighbourhood search, you can solve SPH.
wormik 12y ago
great stuff. nice job!
vosper 12y ago
This is really cool. Is there a reason it looks a bit out of focus, even with millions of particles? Some kind of blurring effect, maybe?
te 12y ago
Really wish there was convention to annotate link titles that immediately bog the CPU.
- joncalhoun 12y ago
  I made the mistake of hitting the 1m button.. Bad decision.
- benihana 12y ago
  Good suggestion. But honestly the words volumetric, particle, and flow didn't give you a hint?
noobermin 12y ago
I think it's about time I jump on the js bandwagon then.
- orbifold 12y ago
  This has really nothing to do with js. I could mechanically translate the demo to Haskell or Python and it would perform equally well, as all the heavy computations are done on the graphics card and those are given in a C like but implicitely parallel shader language. All this really demonstrates that the webgl bindings to opengl have minimal overhead. One thing that is impressive, how you can trivially and more or less declaratively define a user interface using the browser rendering engine, whereas a similar user interface in a simple opengl demo would have to be very primitive or use a third party library. This makes such webgl demos much nicer to interact with compared to a similar demo written in c, but the actual code is nearly the same, since it is mainly library calls to opengl.
matt-attack 12y ago
How is it that there's (what appears to be) c source code in there: https://github.com/dli/flow/blob/master/flow.js https://github.com/dli/flow/blob/master/flow.js
- implr 12y ago
  That is GLSL, the language pixel, vertex (and other) shaders are written in.
cypher543 12y ago
Very cool! Smooth as silk at 524K on my GeForce GTX 650 Ti and Chrome 37. 1M makes it a bit choppy, but still pleasant.
bd 12y ago
There is also a follow-up demo by the same author called Disintegration, with skinned animated mesh driving particles: http://david.li/disintegration/ http://david.li/disintegration/
theophrastus 12y ago
I've no idea what all you folks are using, but in my hands (linux amd64 i5 8Gb debian/jessie) this is a very impressive website in that it straight-out crashes firefox/iceweasel (31.1), stymies firefox nightly (35.0a1), and leaves google-chrome (37.0.2062) declaring that it couldn't be loaded. (just a theory: i'm running nouveau on my nvidia, as the last blob wouldn't compile)
- xanderstrike 12y ago
  i3 with Mint 17. Looks good[1] up to 131K on Chrome (37.0.2062.120). I don't know if your configuration is wonky or your machine is just old, but it actually is a very impressive website. [1] http://i.imgur.com/x8f40v5.jpg http://i.imgur.com/x8f40v5.jpg
- the_af 12y ago
  Works well on Ubuntu 12.04 with Chrome (core i7, 8 Gb).
- ineedtosleep 12y ago
  Surprisingly, Firefox performs better than Chrome for me. i7, 20GB RAM, Quadro K2000M, Fedora 19, latest stable of both Firefox and Chrome.
- dubya 12y ago
  Works okay on an old Core2duo Macbook with Nvidia 9400M GPU in Chrome 37.something, so it's likely the driver.
- orbifold 12y ago
  On fedora 20 with binary nvidia drivers it works flawlessly both with firefox and chrome up to 2M particles on a gtx 680.
- disputin 12y ago
  My laptop's fan has has hit overdrive and beyond.
thesz 12y ago
I see only some sphere with a spot. What is going on there?
fredsted 12y ago
Very smooth - running on Safari 7 on an i5 and a 660ti
jbarrow 12y ago
Using Safari, which isn't supported, but I wanted to say kudos to the author for adding a video for unsupported browsers. That was definitely a neat feature that many WebGL demos overlook!
- bionsuba 12y ago
  Safari is supported, you just have to enable WebGL. I am using it just fine with Safari 7.
deleted 12y ago
[deleted]
spingsprong 12y ago
It crashes my browser
physPop 12y ago
No source code commenting? No problem.
sleepychu 12y ago
Looks like blood in a vein on the default xD
blueflow 12y ago
I have no idea in what is going on or what this is about, but adding the Video for unsupported browsers is a great idea.
manish_gill 12y ago
Works, but my MBA 2013 i5 shooted up to 98C. :o
chaitanyav 12y ago
Awesome demo :-).

236 points by rinesh 12y ago

mhax 12y ago

Looks reminiscent of a fairlight demo from 2009 http://www.youtube.com/watch?v=ezltebzdgjI http://www.youtube.com/watch?v=ezltebzdgjI

dharma1 12y ago
yeah, Smash used curl noise too. He got some crazy particle counts back then. Awesome dev. https://directtovideo.wordpress.com/2009/10/06/blunderbuss/ https://directtovideo.wordpress.com/2009/10/06/blunderbuss/
Jare 12y ago
Worth a link to his extensive blog posts http://directtovideo.wordpress.com/category/fluid-dynamics/ http://directtovideo.wordpress.com/category/fluid-dynamics/
implr 12y ago
They did two much more impressive demos[1][2] with this technology, including drawing complex geometry using only point sprites, on DX9(no compute shaders). It's remarkable that those five year old demos could easily do flows, shading and blending on milions of particles in real time, while this JS version starts dropping frames at 262K. [1] Agenda Circling Forth http://www.youtube.com/watch?v=L5w7Gh7WBjw http://www.youtube.com/watch?v=L5w7Gh7WBjw [2] Ceasefire http://www.youtube.com/watch?v=Grqb1aIa_4s http://www.youtube.com/watch?v=Grqb1aIa_4s
- pdkl95 12y ago
  As cool as those are, I've always found Numb Res to be the most impressive: http://directtovideo.wordpress.com/2011/05/03/numb-res/ http://directtovideo.wordpress.com/2011/05/03/numb-res/ ( http://www.pouet.net/prod.php?which=56900 http://www.pouet.net/prod.php?which=56900 ) ( https://www.youtube.com/watch?v=LTOC_ajkRkU https://www.youtube.com/watch?v=LTOC_ajkRkU ) Subtle presentation a great effect, but this bit from the demo's nfo is kind of insane: 3d smoothed particle hydrodynamics with a fully-featured solver, supporting surface tension, viscosity and collisions with arbitrary meshes. rendering as metaballs converted to triangle meshes with marching cubes. simulating around 250,000 - 1 million particles per frame and generating & rendering several million vertices per frame during triangulation. except we wanted to do it in realtime. on a consumer gpu. on vanilla directx 9. no cuda/compute, no geometry shaders. (they'd probably be too slow anyway.) with everything else youd expect from a modern demo going on around it and on top. the best possible lighting, depth of field, post-process antialiasing. twice. (for stereoscopic 3d.) with style.
  - tdicola 12y ago
    I wish there was a HN thread to geek out about the demo scene. Was just watching some of the Mind Candy DVDs recently and going down memory lane.
  - gioele 12y ago
    The page also shows that sometimes what you think is hard is easy and what you overlook is the really difficult bit: > The problem with SPH in realtime is it’s really really hard. The simple explanation of the algorithm is: “take all the particles near my particle and perform some force exchange between them”. At this point I was expecting a long discussion on all the clever tricks they have found to calculate the force exchange between thousands of particles in a snap. And instead... > The force exchange is easy; the “all the particles near my particle” is a bitch. On GPU it’s even more of a bitch; and in 3D it becomes an order of magnitude more of a bitch. > [...] > The problem is simply the neighbourhood search. You end up with a variable amount of fast-moving particles affecting each particle, where it’s hard to pick an upper bound – so the spatial database is hard to construct. If you solve the neighbourhood search, you can solve SPH.

wormik 12y ago

great stuff. nice job!

vosper 12y ago

This is really cool. Is there a reason it looks a bit out of focus, even with millions of particles? Some kind of blurring effect, maybe?

te 12y ago

Really wish there was convention to annotate link titles that immediately bog the CPU.

joncalhoun 12y ago
I made the mistake of hitting the 1m button.. Bad decision.
benihana 12y ago
Good suggestion. But honestly the words volumetric, particle, and flow didn't give you a hint?

noobermin 12y ago

I think it's about time I jump on the js bandwagon then.

orbifold 12y ago
This has really nothing to do with js. I could mechanically translate the demo to Haskell or Python and it would perform equally well, as all the heavy computations are done on the graphics card and those are given in a C like but implicitely parallel shader language. All this really demonstrates that the webgl bindings to opengl have minimal overhead. One thing that is impressive, how you can trivially and more or less declaratively define a user interface using the browser rendering engine, whereas a similar user interface in a simple opengl demo would have to be very primitive or use a third party library. This makes such webgl demos much nicer to interact with compared to a similar demo written in c, but the actual code is nearly the same, since it is mainly library calls to opengl.

matt-attack 12y ago

How is it that there's (what appears to be) c source code in there: https://github.com/dli/flow/blob/master/flow.js https://github.com/dli/flow/blob/master/flow.js

implr 12y ago
That is GLSL, the language pixel, vertex (and other) shaders are written in.

cypher543 12y ago

Very cool! Smooth as silk at 524K on my GeForce GTX 650 Ti and Chrome 37. 1M makes it a bit choppy, but still pleasant.

bd 12y ago

There is also a follow-up demo by the same author called Disintegration, with skinned animated mesh driving particles: http://david.li/disintegration/ http://david.li/disintegration/

theophrastus 12y ago

I've no idea what all you folks are using, but in my hands (linux amd64 i5 8Gb debian/jessie) this is a very impressive website in that it straight-out crashes firefox/iceweasel (31.1), stymies firefox nightly (35.0a1), and leaves google-chrome (37.0.2062) declaring that it couldn't be loaded. (just a theory: i'm running nouveau on my nvidia, as the last blob wouldn't compile)

xanderstrike 12y ago
i3 with Mint 17. Looks good[1] up to 131K on Chrome (37.0.2062.120). I don't know if your configuration is wonky or your machine is just old, but it actually is a very impressive website. [1] http://i.imgur.com/x8f40v5.jpg http://i.imgur.com/x8f40v5.jpg
the_af 12y ago
Works well on Ubuntu 12.04 with Chrome (core i7, 8 Gb).
ineedtosleep 12y ago
Surprisingly, Firefox performs better than Chrome for me. i7, 20GB RAM, Quadro K2000M, Fedora 19, latest stable of both Firefox and Chrome.
dubya 12y ago
Works okay on an old Core2duo Macbook with Nvidia 9400M GPU in Chrome 37.something, so it's likely the driver.
orbifold 12y ago
On fedora 20 with binary nvidia drivers it works flawlessly both with firefox and chrome up to 2M particles on a gtx 680.
disputin 12y ago
My laptop's fan has has hit overdrive and beyond.

thesz 12y ago

I see only some sphere with a spot. What is going on there?

fredsted 12y ago

Very smooth - running on Safari 7 on an i5 and a 660ti

jbarrow 12y ago

Using Safari, which isn't supported, but I wanted to say kudos to the author for adding a video for unsupported browsers. That was definitely a neat feature that many WebGL demos overlook!

bionsuba 12y ago
Safari is supported, you just have to enable WebGL. I am using it just fine with Safari 7.

deleted 12y ago

[deleted]

spingsprong 12y ago

It crashes my browser

physPop 12y ago

No source code commenting? No problem.

sleepychu 12y ago

Looks like blood in a vein on the default xD

blueflow 12y ago

I have no idea in what is going on or what this is about, but adding the Video for unsupported browsers is a great idea.

manish_gill 12y ago

Works, but my MBA 2013 i5 shooted up to 98C. :o

chaitanyav 12y ago

Awesome demo :-).