6 ms·
WebGL: 80,000 particles
- kiloaper 14y agoAmazing! (and works great in Firefox on Win7 as well)
- mike-cardwell 14y agoWorks great using Firefox on my Ubuntu laptop with only integrated graphics too. Although I had to click the NoScript placeholder to allow the WebGL to execute.
- cpfohl 14y agoWow, that's awesome. 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'
- TazeTSchnitzel 14y agoIf you let them catch up, you can make a sort of pink torus around the mouse.
- degenerate 14y agoI feel like a god creating the universe, really nice effects!
- jQueryIsAwesome 14y agoIf you move it steady in a vertical line it creates two lines that looks like they were smashing against each other. I actually think this could become a game; maybe you show the player a pattern and then he tries to recreate it... or something among those lines.
- donut 14y agoThere is already such a game, kind of: http://www.ea.com/auditorium-iphone http://www.ea.com/auditorium-iphone Some of the levels are pretty hard!
- deleted 14y ago[deleted]
- Fizzadar 14y agoAwesome & beautiful, love it!
- tintin 14y agoIs 80000 particles the limit? With Flash you could render +300000 particles years ago: http://www.unitzeroone.com/labs/alchemyPushingPixels/ http://www.unitzeroone.com/labs/alchemyPushingPixels/
- mistercow 14y agoThat demo gets about 19 fps on my machine, whereas the WebGL demo appears to be getting close to 60, so that seems to be scaling pretty similarly. Also keep in mind that the demo you linked to uses Alchemy, which is C/C++ compiled to AVM2, so for WebGL to be getting roughly equivalent performance is pretty damned impressive.
- Father 14y agoActually the 'math' was done using alchemy, the shader was pixelbender http://www.adobe.com/devnet/pixelbender.html http://www.adobe.com/devnet/pixelbender.html However the example was flash then (3 years ago) vs webgl now. This is flash now; a version with 1.4 million particles using the new molehill http://www.simppa.fi/blog/1_point_4_million_particles/ http://www.simppa.fi/blog/1_point_4_million_particles/
- mistercow 14y agoWell, that's looking like about 3 fps; it's a lot more particles, but it's also a lot slower, so I don't know how that balances out.
- lloeki 14y agoFrom the 1.4M page: "On my OsX toy the difference between flash on browser and standalone is insane. 200 000-300 000 particles is pretty much the maximum until it won’t run smooth anymore. I wonder if this is memory related thing? or what? Who knows? Someone from Adobe might… Well anyways. Here’s the same thing exploding 1.4 million particles in 1920×1200 resolution with smooth 60fps." Interesting behavior. On that other JS demo mentioned in a sibling comment my puny 9400m runs at a steady 30fps at 100k with 7~10% CPU on Safari. The same goes for some non-browser pyopencl [0], which uses about 10% CPU. I seem to be hitting a sort of bottleneck here as ramping either up to 200k or using the Flash realtime demo brings FPS down to about the same level. The Flash one though, uses between 20 and 60% CPU and mostly hovers around 30%. Whatever that means. [0] http://enja.org/2011/03/22/adventures-in-pyopencl-part-2-particles-with-pyopengl/index.html http://enja.org/2011/03/22/adventures-in-pyopencl-part-2-par...
- tannerc 14y agoThis 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.
- skiplecariboo 14y ago1993
- keeran 14y agoReminds me of Gravilux http://www.snibbe.com/store/gravilux/ http://www.snibbe.com/store/gravilux/
- nullspace 14y agoI get a dialog box : "There's no WebGL context available.". :\ Using Google Chrome 19.something on Ubuntu, with open source radeon driver.
- sigkill 14y agoChrome 18, nVidia GTX260M, on Windows with official binaries. Same error.
- jonsen 14y agoI got the same box on Safari OS X. Then found 'Enable WebGL' on the 'Develop' menu.
- zurn 14y agoChrome blacklists most opengl drivers on linux (except the proprietary nvidia one) since old mesa based drivers don't work too well with webgl. You can change this in about:flags, "override software rendering list" (and restart)
- nextparadigms 14y agoIt looks very impressive. I'd love to see some kind of game using particles like that, something like Osmos: http://www.youtube.com/watch?v=pso6UBicLWU http://www.youtube.com/watch?v=pso6UBicLWU
- Flow 14y agoSpheres of Chaos... Mmmm. http://www.spheresofchaos.com/ http://www.spheresofchaos.com/
- starwed 14y agoThat would be a great game to port to the web.
- BHSPitMonkey 14y agoFor what it's worth, I wrote a simplistic Osmos clone last year using 2D canvas drawing (not WebGL). It's fairly inefficient, but anyone's welcome to hack on it and make something cool with it. http://stepheneisenhauer.com/demos/browsmos/ http://stepheneisenhauer.com/demos/browsmos/
- p0nce 14y agoWell you can render many spheres with tiled rendering. http://www.gamesfrommars.fr/demojsv2/ http://www.gamesfrommars.fr/demojsv2/
- windsurfer 14y agoI used particles pretty heavily in my (inneficient) WebGL game Up and Above: http://littlesquareblock.com/upandabove http://littlesquareblock.com/upandabove 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.
- timtadh 14y agoPretty neat game. WebGL is still a little clunky on Linux but I was still getting a playable framerate (but just barely).
- windsurfer 14y agoThat's good to know. We get really bad performance on linux because of the AA I think.
- tretiy3 14y agocore i3, 3Mb ram ubuntu 12.04 works nice. great job! thanks
- bananaoomarang 14y agoSeem to work well here (under Arch Linux, Chrome dev channel, nVidia proprietary drivers)
- windsurfer 14y agoNice, I am an Arch user too :)
- tbundy 14y agoThis is awesome. Also like his Lego survey stats app http://minimal.be/lab/legoStats/ http://minimal.be/lab/legoStats/
- CodeCube 14y agoThanks for taking literally 10 minutes of my time ... pretty badass, am always mesmerized by particles :)
- notJim 14y agoThe code for this is quite readable and well-commented, and seems to be actually really short as well.
- boblemarin 14y agoMuch of the code comes from a WebGL tutorial (context and shaders creation, and the shaders code). I added the interactive parts, the particles and tweaked the shaders.
- hemancuso 14y agoThe most impressive bit of this is that it it keeps under 20% CPU on my Mid-2010 MBP [Chrome 19]. 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. 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.]. 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.
- ajross 14y agoCPU utilization is the wrong metric. Your CPU is mostly idle because it's feeding a tiny set of commands to the GPU each frame, and then idling waiting for user input and/or vsync. The GPU is running full-tilt, but unfortunately there's no good OS-level tool to show that. One of the reason CPU utilization is so low is that this is a demo. Most of the "logic" is just a straightforward computation of the mouse position, and the particle coordinates are all figured out from that in the shader engines. Real apps and games have real data that needs to be crunched. (Edit: I just checked the source, the particle positions are actually computed in Javascript, the shaders are just straight rendering. And I don't see anything particularly clever about the implementation, it's just a bunch of array accesses. V8 is doing an amazing job on this.) But broadly, you're right: the need for highly optimized native code to drive a modern GPU has mostly disappeared. A javascript interpreter (well, V8) is more than good enough.
- boblemarin 14y agoThe particle positions are indeed computed in Javascript, and even if the version you tried only had 30000 of them, the "real 80000" version [ http://minimal.be/lab/fluGL/index80000.html http://minimal.be/lab/fluGL/index80000.html ] does not raise my CPU usage that much. A more clever way to code that animation would be to pass the mouse position to the GL shaders that would compute themselves the particle positions, and I think modern GPUs are very optimized for that kind of stuff. Please don't be too rude, cause it was my first WebGL experiment.
- quaz3l 14y agoYup spent a solid 45 minutes not doing work.
- Jyaif 14y agoYou can get 100 times as many particles by doing a pure shader based solution. Still, very impressed by the speed of JS.
- Davertron 14y agoFor anyone who's curious like I was, just go to http://minimal.be/lab/ http://minimal.be/lab/ for a full listing of other cool stuff he's worked on.
- fuzzythinker 14y agoLove the portrait, audioSnake, and jQuery.eraser
- chucknelson 14y agoWow, that is pretty impressive.
- thu 14y agoFrom this tweet, it seems it is actually 30000 particles: https://twitter.com/boblemarin/status/204943143798448129 https://twitter.com/boblemarin/status/204943143798448129
- ashleyw 14y agoYeah it is: http://news.ycombinator.com/item?id=4008846 http://news.ycombinator.com/item?id=4008846
- boblemarin 14y agoWhen I wrote that experiment (nearly one year ago), I started with 80000 but finally went for 30000 because it was smoother on my laptop. I just forgot to change the title when posting (it was a long ago, and I wasn't expecting it to get much attention). If you want to benchmark the same page with 80000 particles, try this link : http://minimal.be/lab/fluGL/index80000.html http://minimal.be/lab/fluGL/index80000.html
- deleted 14y ago[deleted]
- daenz 14y agoCan someone give us a screenshot or video for those of us without webgl enabled?
- boblemarin 14y agoyou can see screenshots and videos on that page : http://checkthis.com/7ezv http://checkthis.com/7ezv (the WebGL animation is part of an interactive installation)
- ashleyw 14y agoIt's actually 30,000 particles, not 80,000. See the source: "numLines = 30000". 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. I can get it to ~40,000 on my iMac's 6970m 2GB without noticeable slowdown (this is w/ Chrome 20 dev.)
- schwa 14y agoVertex indexes are 16 bit. It's probably set to 30000 for a very good reasons.
- boblemarin 14y agoPlease, check my post below for the truth about the numbers http://news.ycombinator.com/item?id=4009469 http://news.ycombinator.com/item?id=4009469
- ashleyw 14y agoUPDATE: It turns out the slowdown at 40,000 was due to the Web Inspector being open (I have no idea why!) It's actually still pretty damn smooth at a MILLION particles! Crazy!
- 38leinad 14y agoany 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"?
- banthar 14y agoHave you downloaded all the files? requestAnimationFrame is defined in http://minimal.be/lab/fluGL/RequestAnimationFrame.js http://minimal.be/lab/fluGL/RequestAnimationFrame.js
- tudorw 14y agocircling 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 :)
- joncooper 14y agoIf you're interested, here's a nice piece of related work: http://www.html5rocks.com/en/tutorials/webgl/million_letters/ http://www.html5rocks.com/en/tutorials/webgl/million_letters... Also, a paper about pure-GPU implementation: http://www.2ld.de/gdc2004/MegaParticlesPaper.pdf http://www.2ld.de/gdc2004/MegaParticlesPaper.pdf
- goostavos 14y agoThis is.. this is really quite neat. Is there a way to start experimenting with webgl using python?
- alan_cx 14y agoJust in case people have missed the link at the bottom of the page: http://minimal.be/lab/fluGL/index80000.html http://minimal.be/lab/fluGL/index80000.html
- mxfh 14y agoDon't know how many of these 3.7 million static data points are rendered live, just found this way more impressive: http://www.chromeexperiments.com/detail/swiss-addresses-in-3d http://www.chromeexperiments.com/detail/swiss-addresses-in-3...
- mbell 14y agoVery cool, love it, wasted much time. 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
- BowlOfChilli 14y agoMe loves it, awesome.
- louhong 14y agoWould love to see this hacked to work with Kinect or the leap.
- DigitalSea 14y agoWorks 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.
- bananaoomarang 14y agoThis is pretty awesome, I hacked it so it's color-morphs now! Awesome stuff.
- nixisfun 14y agoOn my core i7 it does not go above 7% core usage. Very nice.
- mouseroot 14y agopretty cool i would like to see this put into use for a webgl sands game
- Tomis02 14y agoDoesn't work in Opera 12. Meh.