Morphing particles

Legendary Swede OutsideOfSociety is back again, and this time he’s armed with just over 20,000 morphing particles. The idea is simple: morph from one particle-based shape to another. The end effect, however, is mesmerising, which just confirms that particles are always a winner. You simply can’t go wrong. Well you probably can, but you have to really try.

What’s interesting about this approach is that it uses JavaScript for the shape morphing; each particle is passed an updated position by JavaScript on every frame. But there is an interesting alternative approach to this: the tweening equations could be implemented on the GPU as part of the shader. From there the JavaScript’s involvement would be to pass a tween value between 0 and 1 to the vertex shader which would then be responsible for updating the position of the vertices accordingly. While the latter approach is more complex it could significantly improve performance since the GPU is now handling virtually everything to do with the particle motion.

That said, it’s a testament to Three.js (which is used for the rendering), JavaScript and of course OutsideOfSociety that 20,000 particles can be moved around the screen at 60 frames per second. Welcome to the future, I love it.

OutsideOfSociety actually sent this update:

There are 85k particles, 65k are the model and 20k are the extra ones spread out within a sphere.

So actually there are a ton more particles than I’d noticed in the source code, which only goes to show how impressive the work here is! Also the easing is done in JavaScript, but the actual particle positions are updated in the vertex shader rather than in the JS. Couple of corrections there, folks! :)

Morphing Particles by OutsideOfSociety [via @oosmoxiecode]

This entry was posted in WebGL by Paul Lewis on Posted on by .

About Paul Lewis

Paul (@aerotwist) has been making stuff on the web for over a decade. He is currently working as a Solutions Architect for Huge in London. He's also really interested in physics, maths and other nerdy pursuits. An incredibly creative person, he loves to mix code and visuals to make beautiful experiences. Ultimately he believes awesome needs no use-case.

4 thoughts on “Morphing particles

  1. Thanks for the mention :)

    Some corrections though, as I guess my ghetto-code is not that easy to read ;)

    There are 85k particles, 65k are the model and 20k are the extra ones spread out within a sphere.
    Then all that tweens in js is the uniform passed to to the shader, that handles the morph, just like you describe.

    • Ah yes, so I see! I’ll update to suit. I think you could go even further and have the actual tweening equation function in the shader if you felt so inclined, but that you’re doing the vertex manipulation in the shader is really cool :)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Current ye@r *