Apple has created a series of specifications for performing two-dimensional transforms via CSS, as well as animating those transforms over time. The Safari 4 beta highlights some of these CSS-based transforms, along with Safari's support for HTML 5's video and audio tags, in the "welcome page" that's loaded on Safari 4 beta's first launch. But flying much lower under the radar is an addition to Apple's CSS Transforms that gives web app developers some powerful 3D graphics capabilities—so long as that web app is made for an iPhone.
The WebKit team added CSS Transforms to nightly builds of WebKit back in October 2007, transforms that included scaling, rotation, skewing, and translation in 2D space. As the specification matured, 3D and animation capabilities were added. Eventually, the 3D transforms were broken out into a specification of their own. Though WebKit has had these 3D transform capabilities for some time, only Mobile Safari on the iPhone and iPod touch has them enabled. Currently, neither Safari 3.2, Safari 4 beta, nor WebKit nightly builds can take advantage of these advanced 3D transforms.
The 3D transforms, it should be noted, only apply to 2D elements. However, the transforms allow a web developer to translate, scale, rotate, skew, and change the perspective of almost any DOM element in 3D space, resulting in some rather spectacular effects. Below are two examples—provided by Apple on the Mobile section of its Safari Dev Center site—loaded in iPhone Simulator.
Though many of the 2D transforms and animations are possible to replicate with JavaScript, and Mozilla is experimenting with some JavaScript-based 3D effects, WebKit's CSS transforms offer a serious performance advantage.
"It's hardware accelerated, and all the timing and intervals needed for the animations are handled more efficiently by Safari itself instead of Safari's JavaScript engine," Peter Zich, a Chicago-area developer, told Ars. "The framerate for JS animations on the iPhone usually doesn't get past 5fps, for instance, while with CSS it is far more."
Apple promotes these capabilities as a way for iPhone web app developers to achieve near native speed 3D effects. So why isn't Apple bringing the technology to the desktop? "I talked to Vicki Murley, a Safari Tech Evangelist at Apple, about why they left 3D off of non-Mobile Safari," Zich said. "She said they didn't really have a reason for it... they just hadn't done it."
A ticket in the WebKit team's bug tracker, opened in July of 2008, requests that the transforms be enabled in desktop builds of WebKit.
Zich would like Apple to take browser 3D even further. "I'm hoping they make a 3D canvas," he said. He's been experimenting with the capabilities, making a simple model of a van using PNG files for the faces, which are then placed in 3D-positioned divs.
"What I'd like to do is make something where you throw in a set of points, and it makes a 3D model," he says. His 3D van demo model, though, certainly opens up the imagination to the possibilities.
If you needed further evidence that Apple will never allow Flash to sully its portable Internet devices, then 3D CSS transforms are it. Along with WebKit's support for HTML 5's advanced media handling capabilities, advanced Nitro JavaScript engine, and CSS-based transforms and animations, Apple is readying WebKit to be the best tool for providing web-based applications on a wide variety of platforms. Enabling the 3D capabilities on the desktop would go a long way towards generating interest in making Apple's currently-proprietary CSS extensions into a de facto, or even official, web standard.
No comments:
Post a Comment