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! 