Client Fitness SF

Project Web Standards Based Feature Animation

Status Research

HTML5 Canvas Based Animation Demo

by October 3rd, 2012

The purpose of this demo was to determine a complex background animation on a live website. The only part that survived was the star field projection, albeit in a simplified manner. For the simple reason that it’s not critical to the site if the particles are drawn a bit faster or slower. Which brings us to the main issue.

Disparate browser performance

This demo will work best on Google’s Chrome browser, which is a version of WebKit that’s a bit more optimized than Safari (the actual WebKit). View it in Chrome, Safari and Firefox and it becomes apparent how much work still lies ahead of us as an industry. Firefox will always lag behind WebKit based on how its development is still managed and the years lost in stagnation. It’s almost a 300% performance deficit to Chrome in this demo alone. That’s a problem.

The Idea

HTML5 Canvas elements can be invoked as a CSS background and composited in with static background elements that way. This is where the thought experiment started.

I then came across Antoine Santo’s CODEF project. A series of functions that make it almost easy to create the kinds of effects I grew up on collecting demos. Antoine’s work got me excited again on doing that type of animation, just on the web and with proper web standards based tools.

To make this feel like a real demo I used the freely available track “Starshine” on the Future Crew’s album Metropolis. Check it out, it has remastered versions of all the classic tracks.

What killed it

The reason why this demo wasn’t used on the Fitness SF website lies in its performance. Or rather CANVAS support in general. IE 10 and Chrome have reasonably good CANVAS performance, unless you draw full-screen graphics at full resolution. Then you see right away the bad state of affairs. If CANVAS would run entirely on the GPU, we could do a whole lot more. CANVAS real-time computing is very shallow so the GPU is the perfect fit for it. The moment we need to do high quality rendering, we’re talking back-end computing with output being piped back into the CANVAS element anyway.

As it is, it works across all major platforms, try it out on your iPhone, iPad, even some Android devices. What you’ll see is the performance issue I’m talking about here. The ball’s in the court of the platform vendors here.

Why not Flash?

If it doesn’t work well on mobiles anyway, why not do it in Flash? Check it out on your mobile. The animation stutters but your device doesn’t crash. With Flash it wouldn’t appear at all on next generation devices and legacy Android devices would just crash. Canvas has the huge benefit of staying out of the other processes’ kit. No matter how crazy you get on your canvas, all that’ll slow down is the canvas itself. Notice the smooth CSS transitions on this page? They’re just as smooth on a 3rd gen iPod touch. And really, try to find a newly installed desktop that still comes with Flash installed. Windows doesn’t ship with Flash and neither do Macs.

On the Horizon

However, there is hope. We’re now seeing projects that instead of using a full browser, write a custom CANVAS renderer that just does CANVAS, but really well. The first one that I’ve seen is Ejecta. Check out the video on their site and watch for the game development bit. Very exciting!

I find it really interesting to take parts of the W3C spec and make dedicated tools that excel at one scope of action. Browser vendors could even license these projects and we all benefit.

comments powered by Disqus