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…
Possibly related posts:
13 comments
This is really cool.
To use this I need to build QtWebKit master branch right? And then what do I do with the builded stuff? Copy over in a Qt build?
@detro: no need, this is all integrated into Qt 4.7
This is quite great. What makes me puzzled, though, is that while some cool advanced stuff is happening in WebKit and QtWebKit, it becomes more and more slower when handling relatively simple stuff like showing several large paragraphs of text. It can become so slow (probably because the paragraphs are reflowed) that even the basic scrolling starts dragging. There are clearly some regressions comparing to the days of, say, qt 4.5.
So now it can do 3D acceleration, but is slow as a basic text browser.
@ikm: very true, improving text performance is higher priority than this for general browsing; My focus here is more for QtWebkit hybrid clients, which make less use of text and more of CSS based UI. Braver people than I am are looking into text handling performance
I don’t understand how Apple can call their browser Safari when they don’t have a single afro-african hacking on the code, or anyone who can legitimately be allowed to use the term Safari with any kind of credibility. It should be called “Bay area commute” or “Muni shuttle shuffle”, or maybe “plod” although I suspect Microsoft are sitting on that copyright.
Nice bling my good man.
@ikm
The performance of text rendering is better in 4.7 compared to 4.6, and probably better than 4.5.
As No’am said, text layout and rendering has a higher priority. We made some improvement for 4.7 (and we are still working on new improvements). Some performance issues of the text management of Qt could not be addressed for 4.7, we will try to fix them for 4.8.
@Rupert
@No’am
Maybe you can give me a hint in the right direction…
I want to use the mentioned QGraphicsView + 2.5D approach to account for the missing 3D support on Symbian. I just want to display a point cloud and some textures. Is there any code going that direction that could be helpful or should I just use a software renderer implementation?
@Andre: the way we achieve that in QtWebkit is by finding out the 3D-transform position of each element relative to the root, and then flattening it to 2D (you simply omit the 3rd column and 3rd row of the matrix). I don’t know how feasible it is to do point-cloud visualization with that approach…
@No’am: Thanks for the info. I decided that I should try to use the OpenGL ES 1.1 support of my XpressMusic 5800. Hopefully it will be easier that way. Another reason for doing this is that I compiled wolfenqt for Symbian, which is running fine on the Simulator and also natively compiled on Linux without OpenGL _but_ not right on the phone. I added all graphics to a .qrc file but only two textures are being rendered…
I just wish that Qt would already support OpenGL on Symbian but that’s life I guess.
WebKit is all very nice, but for us it is useless until we can compile it under Solaris. We have tried compiling under Solaris 10 with both the native v5.5 C++ compiler and stlport4, and with various versions of the Gnu C++ compiler through 4.4, and the WebKit build crashes into a big, smoking hole in the ground every time, even after extensive fiddling to repair various code errors. As things now stand, WebKit seems to only build under Linux systems with Gnu, and under Windows. This limitation makes it useless to us
Here’s hoping the new release will fix this shortcoming.
@SixDegrees
You should help on webkit.org.
QtWebKit runs on Linux, Windows, Mac OS X, Windows CE, FreeBSD, Symbian, etc. Some of those platforms are mostly maintained by contributors (Windows CE, Windows 64 bits, FreeBSD, etc). If there are developers interested in WebKit on Solaris, they should spend a few hours to make the operating system officially supported on webkit.org.
Benjamin – myself and two other extremely experienced C++/Qt/Unix developers have tried – and failed – to get WebKit to build on Solaris. Each “fix” we apply leads to additional problems, the documentation is somewhere between thin to non-existent, and a single end-to-end build takes several hours to complete. If it were simply a matter of spending “a few hours” on the problem, it would have been solved by now, and we would have happily contributed the results to the community. As it is, we simply don’t have the time required – likely on the order of man-weeks, possibly more – to devote to such an undertaking.
I suspect that those who are intimately familiar with WebKit, the ones who wrote much of the original code, would be able to find a solution much faster. We, however, have jobs that have to get done, and the most expedient solution for us is simply to move on and find a tool that works.
Were you really able to get the Poster Circle to display correctly? What I saw was a “2.5D” poster circle as you describe above. The posters in each ring in the structure were rendered with 3D perspective, but each of the rings were rendered flat. The result was flat images of 3d rings rotating around.
I used the latest Qt code from the git repository, and then modified the “fancybrowser” example to use a QGraphicsView, and have a QGraphicsWebView as follows:
QWebSettings::globalSettings()->setAttribute(QWebSettings::AcceleratedCompositingEnabled, true);
gview = new QGraphicsView(this);
gview->setViewportUpdateMode(QGraphicsView::BoundingRectViewportUpdate);
gview->setViewport(new QGLWidget());
QGraphicsScene * scene = new QGraphicsScene();
view = new QGraphicsWebView();
scene->addItem(view);
gview->setScene(scene);
view->load(url);
Comments on this entry are closed.