glsl-transition: iPhoto like slideshow transitions using WebGL
January 8th 2014
glsl-transition is a project from Gaëtan Renaudeau which provides a very flexible and extendable way to use WebGL shaders to create iPhoto like slideshow transitions. It has a promise-based API, supports easing functions, and supports any GLSL fragment shader you can write.
The project is from the same author as slider.js, which is a general purpose slideshow framework for JavaScript. slider.js supports WebGL transitions, as well as Canvas 2d and CSS transitions as well, in an extendible way, with a whole bunch of built in transitions that come with the library. I’m not sure if glsl-transition is planned to be used by slider.js (it isn’t at the moment), but it provides only support for WebGL transitions obviously, and is a bit lower level, though it still has a pretty nice API. glsl-transition provides no built-in transition effects, however there are a number of examples in the Github repo.
It’s obviously meant to be an extendible library, making it fairly easy to write your own transition effects. You just have to implement a WebGL fragment shader with a couple special uniforms that will be filled by the library for you, including the starting image, the ending image, the progress in time, and the resolution. The library will automatically render the transition using your shader as needed, controlled by a timing function.
glsl-transition provides support for not just bezier easing functions, but any function that takes a parameter t as a linear time, and it returns an easing value. If you want a bezier curve, there is a library for that which returns compatible easing functions, and supports some built-in commonly used easing functions. If you’re interested in how this works, the author wrote a really good article about implementing bezier curve easing functions. Apparently it was good enough that even Apple is using the code from that article on their Mac Pro website.
I’m glad to see WebGL taking off. We still have a little way to go on mobile, but WebGL support is now fairly widespread on modern desktop browsers with even Microsoft supporting it in IE11. Only Safari is left with it turned off by default.
You can check out glsl-transition on Github, and a nice demo with lots of example transitions.