Hi 👋🏻 Just FYI, this is now archived content.

GPU Easing

See the experiment


Easing equations have been around for a long time. In fact pretty much any site with any animation on it is probably using them. They were made by Robert Penner for use in Flash, but since they’re open source you’ll find them everywhere. Anyway I decided it’d be interesting to get them running in a WebGL vertex shader and to see what I could get away with.

Ease-ily Does It

If you’ve never come across easing equations, here’s a short breakdown of what they do. Each equation takes a start value, and end value, a duration and a time. As you increase the time value the equation will return a number between the start to the end values, and the way it gets from one to the other gives you different feels. The simplest one just runs linearly from start to end, more complex ones provide elasticity and bouncing.

It occurred to me that all the operations could be done in a vertex shader and that all the JavaScript would need to do would be to send through an updated time value. Actually it needs to do a bit more than that otherwise it wouldn’t be all that flexible, but the principle’s there. The maths could be moved away from the JavaScript, which is the important thing.

Getting in a Mesh

Three.js supports the loading of 3D models in JSON format, and there’s an exporter for Blender which will do just that. I started with the helix, which is a cylinder that I subdivided down its length so that I actually had vertices to mess around with.

Then for a bit of a laugh I tried exporting and using the monkey mesh from Blender. It ended up being mildly creepy but oddly entertaining to watch it ease back and forth from a mesh to a mess.

From Bug To Feature

If you tick the ‘extra crazy’ option in the experiment you see an additional effect, which is something I stumbled upon. I was busy integrating the monkey mesh so you could switch between the two and totally screwed something up and ended up with that effect. Once I resolved the bug that was causing it I decided to bring it back as an option. One of the many reasons I love to experiment is that you end up with cool stuff happening when you least expect it.

You can find the source code for this and my other experiments on GitHub. Oooh, how exciting!