Hardware accelerated CSS animations in QtWebkit?
January 13, 2010 by admin | Comments
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
Blog Topics:
Comments
Subscribe to our newsletter
Subscribe Newsletter
Try Qt 6.8 Now!
Download the latest release here: www.qt.io/download.
Qt 6.8 release focuses on technology trends like spatial computing & XR, complex data visualization in 2D & 3D, and ARM-based development for desktop.
We're Hiring
Check out all our open positions here and follow us on Instagram to see what it's like to be #QtPeople.
it is very nice that Qt is considering accelerating for web.
What lacks now is an acceleration for a full multimedia components.
I mean that QGraphicsScene should accept videos as elements (QGraphicsItem).
This way, Qt will advance WPF from Microsoft in these aspects.
But anyway, dealing with videos means dealing with codecs and their respective related patents and copyrights.
This is great.
Do you have any numbers of the improvement?
How does that affect the memory consumption? Does a transformation on big layer (let's say the <body> tag) involve caching a pixmap of the complete layer in memory?</body>
Benjamin:
The numbers for improvement would change per animation. Like I said, for the leaves demo I see the FPS improving by x4 on raster engine.
Re. memory consumption - this is all QGraphicsView cache, which relies on QPixmapCache, which can be tweaked by QPixmapCache::setCacheLimit(...). btw this is true not just for Webkit, but also for graphics-view based UIs that involve complex elements that have to be animated: The QPixmapCache::setCacheLimit(...) function would tweak the balance between RAM usage and paint performance. But yes, without caching that big layer as a pixmap - paint performance degrades because webkit has to re-render it for each frame.
Note that the leaves demo is rather unusual: the animation is running continuously. The normal use-case for CSS animations is animated transitions between states, which would clean up the layer and thus the image cache after it's done.
Some more numbers using n900 with raster engine: (FPS without accel -> FPS with accel, higher is better)
Translate animation on an HTML table: 10 -> 60
Rotate animation on an element with border-shadow: 7 -> 14
Opacity animation on inline text: 2 -> 18
Scale animation on a medium-size transparent image: 17 -> 24
Scale animation on a large image: 11 -> 18
So acceleration has the potential to give us x2 acceleration for rotation of painted elements, x1.5 for images, x6 for simple HTML elements and x10 for inline text.
Looking good, though I had trouble building the head revision..?
../../../WebCore/platform/graphics/qt/GraphicsLayerQt.cpp:690: error: explicit template specialization cannot have a storage class
../../../WebCore/platform/graphics/qt/GraphicsLayerQt.cpp:700: error: explicit template specialization cannot have a storage class
Sounds interesting project. Can you share a video of that demo running on N900?
@zchydem: to your request, I uploaded a short video:
http://labs.qt.nokia.com/bl...
This runs at about 9 FPS, compared to 2 FPS without compositing. (still not enough, of course).
@Nick: please try again, I think my new commit should fix it. If it doesn't, please let me know which platform/environment you use so I can try to reproduce the problem...
No'am: That commit did the trick =)
The 9FPS on the N900 is not surprising. The CPU usage for that leaves demo is quite high - on this modern Quad Core desktop computer.
The best result I saw was with -graphics-system opengl, and even that seemed too high to expect smooth playback on a small device.
Still, a very good step up. Excellent work =)
@Nick: the leaves fall rather smoothly on the iphone that I'm posting from =)
@No'am
You should try the demo without compositing with the Qt-maemo branch, usually that doubles the FPS.
@aidan
Don't forget the iPhones have a low-resolution screen (153600 pixels against 384000 for a N900).
Great work. Could these changes work in WinCE devices?