.webp)
In my previous blog from 4 months ago, I discussed here a research project to allow hardware-acceleration of CSS animations and 3D.
Well, now that the bug reports are consolidating, the benchmarks show consistent improvement, and the entire set of patches is in Qt 4.7, it's time to blog!
3D transformations were introduced into webkit about a year ago, in this blog. It took us a while to catch up, but now QtWebKit is the only Webkit implementations besides Safari, and the only cross-platform one, to support accelerated CSS 3D and animations.
We've actually been able to do this thanks to the years of work spent on QGraphicsView, which has made the work on CSS acceleration much less painful than it would be otherwise. The 3D demos that now work include the infamous poster circle (click on the image when using QtWebKit):
Since the acceleration is QGraphicsView-based, and doesn't currently include any OpenGL-specific dependencies, it makes some use-cases faster with the raster or DirectFB engines as well. For example, the leaves demo now runs at ~15 FPS on the N97 with a new QtWebkit build and the raster engine, and with a much higher FPS when OpenGL is involved.
The "magic" configuration I've used so far, includes:
- A QGraphicsWebView (~accelerated compositing is not supported for QWebView).
- Setting the QGraphicsView's viewportUpdateMode to BoundingRectViewportUpdate
- Using a QGLWidget as the viewport for the QGraphicsView:
graphicsView->setViewportUpdateMode(QGraphicsView::BoundingRectViewportUpdate);
graphicsView->setViewport(new QGLWidget);
Note that since we're using the 2D-based QGraphicsView, this is not "real" 3D, but rather a 2.5D effect emulating 3D. This is visible, for example, here: the elements are transformed correctly, but are "flattened" and don't intersect each other in 3D space, which would require a depth-buffer based scene graph. But for now, 2.5D-emulating-3D is better than nothing and for most use-cases would probably work fine :) Also note that CSS reflections might now work when using this feature (still working on it).
This feature is since Qt 4.7 enabled by default in QGraphicsWebView. To disable it, the QWebSettings::AcceleratedCompositingEnabled settings attribute can be used. If you see CSS animations misbehaving, please post a bug to WebKit bugzilla and let us know. Note that tweaking the configuration above can sometimes make a significant impact on performance.
A few good demos can be found here: which is the nice thing about webkit / CSS animations - the "community" does half the work...
