ShaderEffect

Detailed Description

The ShaderEffect element applies a custom OpenGL vertex and fragment shader to a rectangle. It allows you to write effects such as drop shadow, blur, colorize and page curl directly in QML.

There are two types of input to the vertexShader: uniform variables and attributes. Some are predefined:

• uniform mat4 qt_Matrix - combined transformation matrix, the product of the matrices from the root item to this ShaderEffect, and an orthogonal projection.
• uniform float qt_Opacity - combined opacity, the product of the opacities from the root item to this ShaderEffect.
• attribute vec4 qt_Vertex - vertex position, the top-left vertex has position (0, 0), the bottom-right (width, height).
• attribute vec2 qt_MultiTexCoord0 - texture coordinate, the top-left coordinate is (0, 0), the bottom-right (1, 1).

In addition, any property that can be mapped to an OpenGL Shading Language (GLSL) type is available as a uniform variable. The following list shows how properties are mapped to GLSL uniform variables:

• bool, int, qreal -> bool, int, float - If the type in the shader is not the same as in QML, the value is converted automatically.
• QColor -> vec4 - When colors are passed to the shader, they are first premultiplied. Thus Qt.rgba(0.2, 0.6, 1.0, 0.5) becomes vec4(0.1, 0.3, 0.5, 0.5) in the shader, for example.
• QRect, QRectF -> vec4 - Qt.rect(x, y, w, h) becomes vec4(x, y, w, h) in the shader.
• QPoint, QPointF, QSize, QSizeF -> vec2
• QVector3D -> vec3
• QTransform -> mat4
• Image, ShaderEffectSource -> sampler2D - Origin is in the top-left corner, and the color values are premultiplied.

The output from the fragmentShader should be premultiplied. If blending is enabled, source-over blending is used. However, additive blending can be achieved by outputting zero in the alpha channel.

[Missing image declarative-shadereffectitem.png]

 import QtQuick 2.0

 Rectangle {
     width: 200; height: 100
     Row {
         Image { id: img; sourceSize { width: 100; height: 100 } source: "qt-logo.png" }
         ShaderEffect {
             width: 100; height: 100
             property variant src: img
             vertexShader: "
                 uniform highp mat4 qt_Matrix;
                 attribute highp vec4 qt_Vertex;
                 attribute highp vec2 qt_MultiTexCoord0;
                 varying highp vec2 coord;
                 void main() {
                     coord = qt_MultiTexCoord0;
                     gl_Position = qt_Matrix * qt_Vertex;
                 }"
             fragmentShader: "
                 varying highp vec2 coord;
                 uniform sampler2D src;
                 uniform lowp float qt_Opacity;
                 void main() {
                     lowp vec4 tex = texture2D(src, coord);
                     gl_FragColor = vec4(vec3(dot(tex.rgb, vec3(0.344, 0.5, 0.156))), tex.a) * qt_Opacity;
                 }"
         }
     }
 }

\endrow

By default, the ShaderEffect consists of four vertices, one for each corner. For non-linear vertex transformations, like page curl, you can specify a fine grid of vertices by specifying a mesh resolution.

Note: Scene Graph textures have origin in the top-left corner rather than bottom-left which is common in OpenGL.

Property Documentation