QML ShaderEffectItem on QGraphicsView

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!

Blog Topics: