Chromium moving towards the GPU: CSS 3D Transforms

Published on in Browser Vendors, Google Chrome, Rendering Engines, tech, WebKit.

Google’s Vangelis Kokkevis, former lead developer of the O3D project, enabled support for the “--enable-accelerated-compositing” flag in Chromium nightlies. By supplying it to the browser, the so called “fast path” for rendering gets enabled in WebKit. This path is responsible for accelerating a number of performant features in the engine, such as CSS 3D Transformations, video decoding and various components of the WebGL Canvas. While the software implementation landed back in March, this change allows you to use it as well. Milestone 6, builds of which frequently get pushed to the dev-channel, already mentioned plans for supporting CSS 3D Transforms. These transformations were introduced by Apple about a year ago and can now be found in their own W3C Working Draft. About a month ago the Qt WebKit Port announced support for the draft, and the nightly Chromium builds introduced it yesterday. Mozilla’s stance on the specification has yet to be defined, and no word from Internet Explorer and Opera either.

Why would I want to use 3D in my webpages?

You don’t. No really, I truthfully hope we’re not going to see entire websites created in 3D for a while to come. A large part of the websites today are horrible in terms of usability; Perspectives and animations really aren’t going to improve that. The real use-cases can be found in examples such as Charles Ying’s Snow Stack: eye-candy and graphics are becoming more important in applications, and going 3D is a logical next step in that.

peter.;sh

WebKit’s Poster Circle example and the “Transform this article” used in Chromium.

Is the implementation complete?

No, far from it. Currently the only supported platform is Windows, using OpenGL drivers. In the following weeks more support for Windows will be added by including Google’s Angle Project, which was announced in March. Simply put, ANGLE is a bridge between OpenGL and DirectX, enabling a much larger part of the Windows users to use the GPU acceleration. Support for Linux and Mac OS X is on its way, but isn’t stable enough yet in order to be included. Finally, when you enable accelerated compositing, video and WebGL will be disabled.

As for the current implementation, it’s quite rough. When putting a perspective on the <body> tag the renderer crashes, on any other element my scrollbar turns blue and artifacts aren’t rare either. Still, the results look great, smooth and barely takes any CPU time. Compositing gets triggered by various animation effects, such as transparency and transforms, usage of 3D Transforms and IFrames under certain conditions. Some of the most important things which are still to come include Safe Browsing, which will make sure that effects such as 3D Transforms and WebGL will not lock up your browser, fast paths for accelerated canvas and video elements, and support for Linux and Mac OS X.

Why doesn’t Chrome render a full page using the GPU?

Google’s position on full-page GPU rendering, such as Internet Explorer 9 and Mozilla Firefox are capable of doing, isn’t entirely clear yet. Keep in mind that GPU rendering isn’t everything: Opera comes incredibly close to Microsoft’s performance in the Flying Images demonstration without any GPU acceleration at all, and a large part of Chrome’s performance on that page can be accounted to the high-quality image scaling algorithms.

As Pete LePage, an Internet Explorer Program Manager, already noted: browser speeds aren’t all about JavaScript. The same can be said about hardware acceleration: while it can provide significant performance improvements, other components such as the DOM, styling and images need to be available before they can be rendered in the first place.

9 Responses to “Chromium moving towards the GPU: CSS 3D Transforms”

Both comments and pings are currently closed.

xfinx

June 17, 2010 at 1:38 pm

I am afraid that the 3D-css will be a bit like you don’t want it, you don’t need it (most if the time) and as sure as hell do not want to use it everywhere.

Nice article thought!


This is pretty cool! I had quite some fun playing around with the transform-switches :)


Mike

June 20, 2010 at 2:46 pm

I agree with xfinx! Even though basic transformations can be made to work on Internet Explorer as well, it would be horrible to have designers catching up to that as it would be abused without a doubt. The transform this page menu is cool :)


Jolanda Kovats

June 27, 2010 at 6:07 am

I had errors viewing the post in Firefox on the Mac, it showed dropdown menus, but apart from that loved the post.


Peter

June 29, 2010 at 2:34 pm

Firefox does not support the range input-type yet, instead it showed textboxes. Since that’s even worse (and you wouldn’t know what to enter), I decided to display drop-down boxes. This makes the post usable on that browser as well.


Abi N

June 29, 2010 at 7:42 pm

That transform this article area is awesome:D


Delly

July 8, 2011 at 3:03 pm

This ariltce went ahead and made my day.