QML ShaderEffectItem on QGraphicsView

Published Tuesday May 3rd, 2011
10 Comments on QML ShaderEffectItem on QGraphicsView
Posted in Graphics View, Labs, OpenGL, Qt Quick

For those who don’t yet know what ShaderEffectItem is, please see: http://labs.qt.nokia.com/2011/03/22/the-convenient-power-of-qml-scene-graph/

QML2 on top of the QML Scene Graph provides an awesome API for combining GL/GLES shader code with QML. The API consists of two new QML elements: ShaderEffectItem and ShaderEffectSource. With this API, it’s easy to create effects and animations that could not be done by using the standard elements of QML 1. This also naturally allows the effects to do their heavy lifting on the GPU and thus improves the performance and enables tricks that would not perform well without hardware acceleration.

The ShaderEffectItem implementation does not fundamentally depend on the QML Scene Graph and we have implemented a QML extension plugin that provides a similar API already for QGraphicsView based Qt Quick 1.x. The video below shows a Qt Quick 1.0 application running on N8, demonstrating some effects using the shaders plugin. It also demonstrates the same application running on five different platforms: Symbian^3, Maemo 5, Mac OS X, Windows 7, and Ubuntu.



The source codes of the plugin and the demo application are available at https://qt.gitorious.org/qt-labs/qml1-shadersplugin. More detailed information about the API of the ShaderEffectItem and ShaderEffectSource elements can be found from the documentation under the doc directory. An up-to-date list of the differences between the plugin and QML2 can be found from the README file.

Using the shaders plugin is simple:

  1. Compile the plugin, see the README file from the source code directory for more detailed instructions.
  2. In your application cpp code, set the QDeclarativeView’s viewport to be a QGLWidget. Remember to also set the viewport update mode to FullViewportUpdate.
  3. Import the Qt.labs.shaders 1.0 module in your QML code.

The plugin is fully functional and can already be used but it is still “work in progress” so the API may change. The goal is to track the API of QML2 as it evolves to keep the plugin as forward compatible as possible.

This feature requires OpenGL or OpenGL ES 2.0 and it depends on the QtOpenGL module. Therefore it is limited to work only on platforms that have at least Qt 4.7.x and support for QtOpenGL, such as Windows, Linux, Mac and mobile devices running Symbian^3 (experimental until 4.7.4) or Maemo5, assuming that Qt has been updated to 4.7.x. On Maemo 5 it’s enough to have the PR1.3 firmware.

Currently Qt’s OpenGL ES 2.0 backend resource handling on Symbian is not complete, but we are aiming to improve this situation in Qt 4.7.4. Until that, it is not recommended to use this feature in application development for Symbian. However, experimenting and providing feedback is encouraged 😉

Please try it out and give us your comments and feedback!

Do you like this? Share it
Share on LinkedInGoogle+Share on FacebookTweet about this on Twitter

Posted in Graphics View, Labs, OpenGL, Qt Quick


smoggy says:

Fantastic work. Fantastic presentation of work.

David says:

MeeGo Demo? Netbook/Tablet/Handset?

Kenji Sugita says:

When is this available for Qt for Embedded Linux?

Jim says:

Nice and impressive. You should write a post about the current status of qt quick 2 , what has been done, what needs to be done.

Ahmad says:

This is all very impressive, believe me I truly am impressed, but please deliver this already, seems like Nokia culture is getting to you guys as well. Slow to release ….

I have some QML apps dying to get delivered to ovi store..

Aamer says:

Loved the demo !!
Also will there be official support of Qt on Windows phone 7 ? Or is it just windows 7 in the video ?

btw,,,, where is MeeGo 🙁

Jonni says:

Aamer: no wp7, just Windows OS.

I’ve already tested qml1-shadersplugin in Meego Netbook-image with Lenovo S10-3t, runs pretty nicely. 🙂

gunnar says:

Kenji: The QML 1 shader effects build on top of stock Qt 4.7.3, so if you have a Qt embedded version with support for GL enabled QML, you should be good to go. Alternatively, use the 4.8 repository where lighthouse is included. I know the shader effects work there.

Jim: We’ll come with an update on Qt Quick 2 and scene graph in a couple of weeks. If you are eager to follow the progress, you can track the changes directly in the git repository http://qt.gitorious.org/+qt-developers/qt/staging/ in the qml-team/qtquick2 branch.

Kim Gronholm says:

The plugin should work fine wherever QtOpenGL is supported. We have been testing it on Windows, Mac OS X, Ubuntu, S^3 devices and N900. Jonni has also tested it on Lenovo S10-3t running Meego.

Ahmad: Today we released the Qt SDK 1.1 and now Qt Quick applications are also allowed to be published to the Ovi Store. However, the OpenGL ES 2.0 backend on Symbian is still experimental and should not be used for application development until Qt 4.7.4.

hanrai says:

Great plugin.
One problem, it can’t be clipped by parent.

Commenting closed.

Get started today with Qt Download now