CSS Custom Filters

A month or two ago, a few of us went to watch a movie at a local theater. Before the movie begins, apart from showing trailers, they play the national anthem as well. While it plays, the screen shows an animated flag. After it was over, a friend and I started chatting, “Man! They must’ve used super computers back in the 80s to do that cloth simulation and rendering… and (polygon) edges are almost noticeable!

Well, just yesterday, I came across a link talking about CSS custom filters while trying to read about and get an evaluation copy of Adobe Edge Animate. That led me to think back to the other day day and continue “…and now, something similar can be done on the web!

So I went about trying to implement something based on the article with a waving flag in mind. Shaders are written in GLSL. The part that makes it flutter continuously is using the filters in a CSS animation. The rest is almost entirely the same as the original article described.

  /* Looping animation */
  @-webkit-keyframes flutter {
      -webkit-filter: custom(url('wobble.vs')                     /* wobble effect */ /* "filter:" if it makes it to spec */
      mix(url('color-swipe.fs') normal source-atop),  /* swipe effect */
      40 40,                                          /* mesh lines/cols */
      amplitude 60,                                   /* wobble strength */
      amount 0.0);                                    /* effect amount */
      -webkit-filter: custom(url('wobble.vs')
      mix(url('color-swipe.fs') normal source-atop),
      40 40,
      amplitude 60,
      amount 1.0);

  .shaded:hover {
    /* name, duration, timing-function, delay, iteration-count, direction, fill-mode */
    -webkit-animation: flutter 2s ease-in-out 0s infinite alternate;

I’ve hosted it here: http://pranav.tekchand.net/flag/flag.html
To see it in action, you need to get yourself a copy of Chrome Canary – the nightly build with experimental features. You also need to Enable CSS shaders in the chrome flags.

CSS Custom filters are currently a draft and not a standard, so things might change. As an example, Microsoft is [Aug 2012] proposing allowing other shading languages, the others seem to be on board with specifying GLSL in the standard.

Note: You seem to need to use/set Unix style line endings in your shader (vs/fs) files for it to work. In other words, use LF (\n) (Linux) as your EOL character, not CR LF (\r\n) (Windows) [nor just CR (\r) (Mac)]. It took me a while to guess this, since the Console in the Developer tools window didn’t show any messages and neither did the shader work while I was using Windows style line endings.

After this little experiment, I went on to research more, and came across the CSS Filter Lab. Check it out. Here’s another post which is more detailed.
PS: I also came across this text editor – Sublime Text 2 – for which there is a GLSL Shader Validator plugin (offers syntax highlighting and it’ll also try and compile the shader to let you know if you’ve got syntax errors!). The editor has many nice features – check out the website or get a free evaluation version.

This entry was posted in Computers and Internet. Bookmark the permalink.

1 Response to CSS Custom Filters

  1. Nice, just tried it out. I hope they stick with GLSL, otherwise it’s just going backwards. Microsoft is going on a path of it’s own with Internet Explorer, no WebGL, and now “don’t want GLSL”. According to caniuse, BlackBerry’s future browser will support WebGL, how awesome is that.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s