Badass JavaScript

A showcase of awesome JavaScript that pushes the boundaries of what's possible on the web, by @devongovett.

glfx.js: Core Image Style Filters in the Browser with WebGL

October 25th 2011

If you’re at all familiar with Apple’s Core Image framework on the Mac and iOS, you’ll know that it is both very powerful, and extremely fast since it runs on the GPU.  It is possible to chain multiple filters together and update their parameters in real time without any lag at all.

Obviously, if we can do it on native, we want to be able to do it on the web as well!  We’ve seen many canvas based image manipulation frameworks in the browser but they haven’t been able to match the performance of GPU based frameworks like Core Image.  Luckily for us, we now have WebGL in all modern browsers except Internet Explorer (as usual) and even Google is taking note with the new version of Google Maps, which is really the first WebGL-based application in the mainstream.

glfx.js by Evan Wallace takes extremely fast Core Image style filters to the web thanks to WebGL and modern GPUs, which are heavily optimized for tasks like this.  As you can see if you move your mouse around the demo image on the homepage, the filter is extremely fast and provides a great user experience.  The library includes 20 built in filters, and you can try out all of these on their demo page and get the code on Github.

Evan has also taken glfx to the next level with his other project, webgl-filter which is a very nice user interface for manipulating photos, based on the library.  Upload your own image or try out one of the demo photos, play with the image filters, and even save the image to your hard drive, all from your web browser.

Cool stuff!  As soon as we get camera access in the browser, Photobooth will be here in no time.  WebGL is seriously awesome, and will enable web interfaces to be much more responses and compete with native experiences much more effectively.  I can’t wait to see what is next!