boblemarin

Exactly, there's not much optimisation in there. In fact, it was my first try with WebGL.

:)

The particles are attracted by the position of the mouse, each having a slightly different (randomized) attraction factor.

If a particle ever reaches the exact mouse coordinates, its position is randomly generated anywhere on the screen.

When rendering the particles, it simply draws a line between the previous and the new position. So when a particle is transported to a random place, it create the rays that appear around the cursor.

There's no real complexity in the maths involved, but I remember spending quite some time tweaking the random ranges to get something nice.

Much 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.

you can see screenshots and videos on that page : http://checkthis.com/7ezv

(the WebGL animation is part of an interactive installation)

The 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 ] 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.

Please, check my post below for the truth about the numbers http://news.ycombinator.com/item?id=4009469

When 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

A browser who supports CSS 3D transforms : Firefox 10+, Chrome, Safari (better), Android 4 browser, iOS' browser (even better).

Please consider this library as an invitation for web devs to dive into html-based multimedia. Its main goal is to highlight the ability to do such things. It is quite clear that Sprite3D will never reach the level of libraries like Three.js or PaperJS.