I'd like to share with the community a project I'm working on, while it's still in its development phase (isn't that what labs is for? :))
The goal of the project is to get CSS3 animations to a reasonable FPS performance, mainly on embedded hardware where it's a pain.
See http://gitorious.org/~noamr/webkit/noamrs-webkit/commits/accel
The idea is to implement webkit's GraphicsLayer concept, which allows platform-specific implementations of CSS transform and opacity animations, using the graphics-view and the Qt animation framework as a backend. This would only work for QGraphicsWebView and not for QWebView, as rendering a separate QGraphicsScene inside QWebView would probably not give us much performance benefit.
Preliminary results are very promising - The leaves demo, for example, runs 4 times faster on Maemo Fremantle than it does without the acceleration, and it looks graphically accurate.
The reason this gives us a performance benefit is mainly because of graphics-item caching: when a CSS animation occurs inside webkit, the item that's being animated has to go through a re-layout and re-draw every so often, while with the accelerated approach we draw it once into a QPixmap (QGraphicsView takes care of that) and then it's just a series of fast and furious pixmap blts. The hardware acceleration becomes relevant when the images are big and the blt itself becomes a bottleneck.
This project is not ready to go upstream, as it supports many delicate use-cases that need to be tested. But if you're interested in participating (or to just comment!), this has so far been a fun project to hack on.
Instructions:
- Get the Git repo from git://gitorious.org/~noamr/webkit/noamrs-webkit.git, branch accel
- Build or get a relatively new version of Qt, possibly without building QtWebkit
- Build Webkit from the downloaded Git repo:
export QTDIR=[my-qt-4.6-root]
export PATH=$QTDIR/bin:$PATH
./WebKitTools/Scripts/build-webkit --qt
- Run
./WebKitBuild/Release/bin/QGVLauncher --accel
: This will enable the necessary web-setting for composite-layer acceleration. You can also create a small QGraphicsWebView example yourself, as long as you enable the new settings flag: QWebSettings::AcceleratedCompositingEnabled
- Load a website with CSS transform/opacity animations: like this one or this one.
- Hack. Most of the code is in WebCore/platform/graphics/qt/GraphicsLayerQt.cpp, or you could just search for the term USE(ACCELERATED_COMPOSITING)
- Send merge requests through Gitorious or comments on Bugzilla
No'am