Using Shaders

MeeGo 1.2 Harmattan devices support Qt Shaders. Shaders are advanced graphical programs that are used to create more sophisticated graphics and animations.

In Harmattan, shaders are implemented with two QML components, ShaderEffectItem and ShaderEffectSource. They have complementary functions in the graphics processing pipeline and usually both are used when developing shaders.

ShaderEffectSource is used to define the source content for image processing. The source content can be a rectangular area on the screen, or a QML Item. ShaderEffectItem is the actual shader that receives the source content and performs image processing. ShaderEffectItems can be ShaderEffectSources for other ShaderEffectItems, which opens up further options for graphical effects.

Harmattan supports fragment (sometimes called pixel) and vertex shaders, which are accessed with the fragmentShader and vertexShader properties in ShaderEffectItem. The properties hold OpenGL ES code that is used to handle the graphics effects and animations. For more information on using OpenGL, see OpenGL ES 2.0 Reference Pages.

For a complete example on using QML shader elements, see Shader Effects demo.

Enabling shaders in your application

Since the ShaderEffectItem uses the Qt OpenGL module, you need to add the following line into your project file:

QT += opengl

Using OpenGL also requires you to set QGLWidget as the viewport to QDeclarativeView. The following code snipped demonstrates how to create a QGLWidget inside the application main loop with multisampling disabled and vertical synchronisation enabled:

#include <QtGui/QApplication>
#include <QtOpenGL>
#include <QDeclarativeView>
#include <QDeclarativeEngine>

int main(int argc, char *argv[])
{
   QApplication app(argc, argv);
   QDeclarativeView view;
   QGLFormat format = QGLFormat::defaultFormat();
   format.setSampleBuffers(false);
   format.setSwapInterval(1);
   QGLWidget* glWidget = new QGLWidget(format);
   glWidget->setAutoFillBackground(false);
   view.setViewport(glWidget);
}