WebGL: 80,000 particles

The most impressive bit of this is that it it keeps under 20% CPU on my Mid-2010 MBP [Chrome 19].<p>It's hard not to imagine another cyclical shift towards browser centric development, away from rich client apps, when you have Chrome pulling off tricks like this. Things that would've seemed impossible in 2008, the last time everything was moving to the browser.<p>Give Apple/ARM/Intel/Samsung a few more cycles in mobile [more RAM, if nothing else!] and you might need to reconsider the disadvantages of native apps in favor of all the advantages that centrally hosted applications offer [no Apple fee, no pirating, continuous deployment, cross-platform, etc, etc.].<p>I long for a vibrant open-source project that builds quality widgets and elements for people to use inside this framework. Let's not pretend jQuery mobile et. al. are anywhere close.

It's actually 30,000 particles, not 80,000. See the source: "numLines = 30000".<p>If you set a breakpoint at that line (28), then you can edit the variable in the console to whatever you want. You can make it smaller without setting the breakpoint, but any higher results in a "attempt to access out of range vertices" error.<p>I can get it to ~40,000 on my iMac's 6970m 2GB without noticeable slowdown (this is w/ Chrome 20 dev.)

I used particles pretty heavily in my (inneficient) WebGL game Up and Above: <a href="http://littlesquareblock.com/upandabove" rel="nofollow">http://littlesquareblock.com/upandabove</a><p>It's not nearly as efficient as this demo, but it's at least a game. There are at least a dozen areas I could fix up to prevent the GC from going nuts if I was so inclined, but it works fine for most people.

Is 80000 particles the limit?<p>With Flash you could render +300000 particles years ago: <a href="http://www.unitzeroone.com/labs/alchemyPushingPixels/" rel="nofollow">http://www.unitzeroone.com/labs/alchemyPushingPixels/</a>

Wow, that's awesome.<p>if you don't let the particles catch up w/ your mouse (and trace circles around them) the gather up in one place and turn white, resulting in some spectacular 'explosions'

I get a dialog box : "There's no WebGL context available.". :\<p>Using Google Chrome 19.something on Ubuntu, with open source radeon driver.

For anyone who's curious like I was, just go to <a href="http://minimal.be/lab/" rel="nofollow">http://minimal.be/lab/</a> for a full listing of other cool stuff he's worked on.

Very cool, love it, wasted much time.<p>Very small bug I thought I'd mention: If you resize the browser window the center of the particles no longer tracks the mouse pointer location but rather appears to be offset by an amount depending on the resize that happened. W7/C19

It looks very impressive. I'd love to see some kind of game using particles like that, something like Osmos:<p><a href="http://www.youtube.com/watch?v=pso6UBicLWU" rel="nofollow">http://www.youtube.com/watch?v=pso6UBicLWU</a>

You can get 100 times as many particles by doing a pure shader based solution. Still, very impressed by the speed of JS.

If you're interested, here's a nice piece of related work:<p><a href="http://www.html5rocks.com/en/tutorials/webgl/million_letters/" rel="nofollow">http://www.html5rocks.com/en/tutorials/webgl/million_letters...</a><p>Also, a paper about pure-GPU implementation:<p><a href="http://www.2ld.de/gdc2004/MegaParticlesPaper.pdf" rel="nofollow">http://www.2ld.de/gdc2004/MegaParticlesPaper.pdf</a>

Amazing! (and works great in Firefox on Win7 as well)

This is wonderful. Turn on some good music and play around with this, makes me think it would be a fine music video for some remixed songs.

Reminds me of Gravilux<p><a href="http://www.snibbe.com/store/gravilux/" rel="nofollow">http://www.snibbe.com/store/gravilux/</a>

Don't know how many of these 3.7 million static data points are rendered live, just found this way more impressive: <a href="http://www.chromeexperiments.com/detail/swiss-addresses-in-3d" rel="nofollow">http://www.chromeexperiments.com/detail/swiss-addresses-in-3...</a>

Works absolutely flawlessly in Chrome, impressive stuff. Can't wait to see a company like Blizzard release a HTML5 MMO in a few years time (it'll definitely happen). Imagine a game like Diablo 3 in HTML5? Wow.

From this tweet, it seems it is actually 30000 particles: <a href="https://twitter.com/boblemarin/status/204943143798448129" rel="nofollow">https://twitter.com/boblemarin/status/204943143798448129</a>

Just in case people have missed the link at the bottom of the page:<p><a href="http://minimal.be/lab/fluGL/index80000.html" rel="nofollow">http://minimal.be/lab/fluGL/index80000.html</a>

This is awesome. Also like his Lego survey stats app <a href="http://minimal.be/lab/legoStats/" rel="nofollow">http://minimal.be/lab/legoStats/</a>

any idea why i get the JS error "requestAnimationFrame is not defined" when I run the HTML page on my local system. Same browser (firefox 12)) renders the online-like just fine. As i understand this method is part of the browser's JS api. So, why is it not defined if I run it "locally"?

Thanks for taking literally 10 minutes of my time ... pretty badass, am always mesmerized by particles :)

The code for this is quite readable and well-commented, and seems to be actually really short as well.

This is.. this is really quite neat.<p>Is there a way to start experimenting with webgl using python?

Doesn't work in Opera 12. Meh.

Can someone give us a screenshot or video for those of us without webgl enabled?

1993

This is pretty awesome, I hacked it so it's color-morphs now! Awesome stuff.

Would love to see this hacked to work with Kinect or the leap.

On my core i7 it does not go above 7% core usage. Very nice.

circling the particles to try and trap them is fun, makes me feel a bit like one of those machines they try and trap plasma in :)

Yup spent a solid 45 minutes not doing work.

Awesome &#38; beautiful, love it!

Wow, that is pretty impressive.

pretty cool i would like to see this put into use for a webgl sands game

Me loves it, awesome.