satine.org

What is Snow Stack?

A new 3D CSS Visual Effects demo using pure HTML, WebKit’s 3D CSS Effects extensions and JavaScript.

You can now see Snow Stack’s live demo if you have Snow Leopard and Safari. On Leopard, you can use WebKit nightly build 45754 or later for a slightly slower experience.

Instructions

Click here to open the Snow Stack live demo. Arrow keys to move, “Space” to toggle magnify mode. Mouse click on an image to view on Flickr. You need to “right arrow” on the right wall to get more photos loaded in.

Many thanks to Simon Fraser for his help with performance profiling Snow Stack.

And yes, OS X Leopard with WebKit nightly will also do accelerated 3D transforms now, just like iPhone Safari.

Implementation Notes

• Larger images load in after 2 seconds for high quality zoomed images.
• State changes are handled via CSS.
• Reflections use CSS masks instead of a Canvas draw (standard box reflections don’t quite work yet).
• Reflections sit on a scaleY(-1.0) coordinate system and are tracked independently, which is surprisingly easy.
• This demo pushed a few performance limits and currently avoids drawing and animating a drop shadow and border.
• Animating transforms with a transform list must have only 1 function to animate in hardware.
• Snow Stack’s 3D transforms, transform and opacity animations all run on the GPU. Layout and networked image loading happens on the CPU.
• Key states are tracked manually (timers handle keyboard delay and repeats) so a smooth motion can be achieved when the keys are held down.
• Cell sizes are chosen at initial window load time and don’t change on window resize, although the origin does. It’s rather slow, however, so I may end up changing that.
• The computedStyle transform matrix is used to calculate how far away the dolly is from the target image, which is then used to assign a scaled rotation to the “camera”. Ideally, this might be done a different way, but the results are pretty good, and fast.
• To give you a sense of the effort involved, this demo was written over 3 days, a few hours each evening.
• Snow Stack’s source code is now available from the CSS-VFX project.

Other CSS Visual Effects Demos

• CoverFlow for Safari on iPhone
• HTML5 Video Reflections

Updates and iPhone Apps

• Snow Stack’s source code (with examples on how to use your own images) is now available from the CSS-VFX project.
• I also work on iPhone apps in my spare time, if you have a moment, please check out my iPhone app, iRhyme, a song writer’s rhyming dictionary.
• The song in the video (a surprisingly frequent question) is Ratatat – “Beat 1” from their demo album “9 Beats”

Technorati Tags: WebKit, Snow Leopard, Leopard, Mac OS X, graphics, 3D, CSS Effects, HTML, JavaScript

Did you know that 3D graphics and animation is possible with Safari on iPhone?

If you have an iPhone, try out the CoverFlow (zflow) demo live with a live Flickr feed.

This CoverFlow demo is part of a new open source project I’ve started, CSS-VFX. The idea with CSS-VFX is to demonstrate all the cool things that are possible with Apple’s CSS Visual Effects extensions.

How does it work?

The zflow demo in CSS-VFX uses the Apple CSS Visual Effects extensions for hardware accelerated (on iPhone!) 3D perspective correct transforms and easily animated transitions. HTML 5 Canvas is used for simulating reflections.

• zflow starts by loading each image from the images array. When each image is loaded, we scale the image to fit in a square region, and apply 3D CSS transforms to scale it in place.
• Reflections – zflow then takes the scaled image and creates a Canvas element that contains a gradient alpha mask of the image’s reflection (using a “reflect” function to do this) and positions the canvas element in place.
• Touch Controller – zflow creates a TouchController object, who’s job is to field touch events from Mobile Safari and calculate an appropriate offset.
• Clicking – zflow detects when no move events have been made, and zooms + rotates the focused image forward by setting a “CSS Transition”ed 3D transform on the focused image. Clicking again transitions the image back.
• Inertia – zflow achieves inertia by setting the “transition timing function” of the “tray” to an “ease-out” function, which slows things down. On the touch end event, we calculate the projected velocity and set the tray’s target position to that location. CSS Transitions handles the decay in velocity as the transition timing function executes — slowing the tray down gradually.

What’s next?

I hope that CSS-VFX can become a series of graphics gems that clearly illustrate how to use CSS Visual Effects, as well as talk about some of the corner cases and best practices to get the best performance. If you come up with something you’d like to include, please let me know. I’ll be tinkering with a few more gems myself, just watch the project for more as time goes on.

And tell a friend, I can’t wait to see what everyone else does with these great new features in Safari on iPhone.

Where to learn more

The CSS-VFX open source project is a good place to start. You can just use the zflow code in your own iPhone web pages (there’s docs on how to do that); and deep dive into the innerworkings of zflow to understand what exactly is going on.

Also, check out Apple’s proposed extensions: CSS 3D Transforms, CSS Transitions, and CSS Animation. They provide full specifications on what’s possible. Of course, there are a few gotchas when using these in practice, and I hope to document these as things progress.

Technorati Tags: iPhone, Safari, CSS Visual Effects, graphics, 3D