ShaderEffect QML Type

Applies custom shaders to a rectangle. More...

• List of all members, including inherited members

Properties

• blending : bool
• cullMode : enumeration
• fragmentShader : string
• log : string
• mesh : variant
• status : enumeration
• supportsAtlasTextures : bool
• vertexShader : string

Detailed Description

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

OpenGL and GLSL

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). If supportsAtlasTextures is true, coordinates will be based on position in the atlas instead.

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
• QVector4D -> vec4
• QTransform -> mat3
• QMatrix4x4 -> mat4
• QQuaternion -> vec4, scalar value is w.
• Image -> sampler2D - Origin is in the top-left corner, and the color values are premultiplied. The texture is provided as is, excluding the Image item's fillMode. To include fillMode, use a ShaderEffectSource or Image::layer::enabled.
• ShaderEffectSource -> sampler2D - Origin is in the top-left corner, and the color values are premultiplied.

The QML scene graph back-end may choose to allocate textures in texture atlases. If a texture allocated in an atlas is passed to a ShaderEffect, it is by default copied from the texture atlas into a stand-alone texture so that the texture coordinates span from 0 to 1, and you get the expected wrap modes. However, this will increase the memory usage. To avoid the texture copy, set supportsAtlasTextures for simple shaders using qt_MultiTexCoord0, or for each "uniform sampler2D <name>" declare a "uniform vec4 qt_SubRect_<name>" which will be assigned the texture's normalized source rectangle. For stand-alone textures, the source rectangle is [0, 1]x[0, 1]. For textures in an atlas, the source rectangle corresponds to the part of the texture atlas where the texture is stored. The correct way to calculate the texture coordinate for a texture called "source" within a texture atlas is "qt_SubRect_source.xy + qt_SubRect_source.zw * qt_MultiTexCoord0".

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.

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;
                }"
        }
    }
}

For information about the GLSL version being used, see QtQuick::GraphicsInfo.

Starting from Qt 5.8 ShaderEffect also supports reading the GLSL source code from files. Whenever the fragmentShader or vertexShader property value is a URL with the file or qrc schema, it is treated as a file reference and the source code is read from the specified file.

Direct3D and HLSL

Direct3D backends provide ShaderEffect support with HLSL. The Direct3D 12 backend requires using at least Shader Model 5.0 both for vertex and pixel shaders. When necessary, GraphicsInfo.shaderType can be used to decide at runtime what kind of value to assign to fragmentShader or vertexShader.

All concepts described above for OpenGL and GLSL apply to Direct3D and HLSL as well. There are however a number of notable practical differences, which are the following:

Instead of uniforms, HLSL shaders are expected to use a single constant buffer, assigned to register b0. The special names qt_Matrix, qt_Opacity, and qt_SubRect_<name> function the same way as with GLSL. All other members of the buffer are expected to map to properties in the ShaderEffect item.

Unlike GLSL's attributes, no names are used for vertex input elements. Therefore qt_Vertex and qt_MultiTexCoord0 are not relevant. Instead, the standard Direct3D semantics, POSITION and TEXCOORD (or TEXCOORD0) are used for identifying the correct input layout.

Unlike GLSL's samplers, texture and sampler objects are separate in HLSL. Shaders are expected to expect 2D, non-array, non-multisample textures. Both the texture and sampler binding points are expected to be sequential and start from 0 (meaning registers t0, t1, ..., and s0, s1, ..., respectively). Unlike with OpenGL, samplers are not mapped to Qt Quick item properties and therefore the name of the sampler is not relevant. Instead, it is the textures that map to properties referencing Image or ShaderEffectSource items.

Unlike OpenGL, backends for modern APIs will typically prefer offline compilation and shipping pre-compiled bytecode with applications instead of inlined shader source strings. In this case the string properties for vertex and fragment shaders are treated as URLs referring to local files or files shipped via the Qt resource system.

To check at runtime what is supported, use the GraphicsInfo.shaderSourceType and GraphicsInfo.shaderCompilationType properties. Note that these are bitmasks, because some backends may support multiple approaches.

In case of Direct3D 12, all combinations are supported. If the vertexShader and fragmentShader properties form a valid URL with the file or qrc schema, the bytecode or HLSL source code is read from the specified file. The type of the file contents is detected automatically. Otherwise, the string is treated as HLSL source code and is compiled at runtime, assuming Shader Model 5.0 and an entry point of "main". This allows dynamically constructing shader strings. However, whenever the shader source code is static, it is strongly recommended to pre-compile to bytecode using the fxc tool and refer to these files from QML. This will be a lot more efficient at runtime and allows catching syntax errors in the shaders at compile time.

Unlike OpenGL, the Direct3D backend is able to perform runtime shader compilation on dedicated threads. This is managed transparently to the applications, and means that ShaderEffect items that contain HLSL source strings do not block the rendering or other parts of the application until the bytecode is ready.

Using files with bytecode is more flexible also when it comes to the entry point name (it can be anything, not limited to main) and the shader model (it can be something newer than 5.0, for instance 5.1).

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
            fragmentShader: "qrc:/effect_ps.cso"
        }
    }
}

cbuffer ConstantBuffer : register(b0)
{
    float4x4 qt_Matrix;
    float qt_Opacity;
};
Texture2D src : register(t0);
SamplerState srcSampler : register(s0);
float4 ExamplePixelShader(float4 position : SV_POSITION, float2 coord : TEXCOORD0) : SV_TARGET
{
    float4 tex = src.Sample(srcSampler, coord);
    float3 col = dot(tex.rgb, float3(0.344, 0.5, 0.156));
    return float4(col, tex.a) * qt_Opacity;
}

The above is equivalent to the OpenGL example presented earlier. The vertex shader is provided implicitly by ShaderEffect. Note that the output of the pixel shader is using premultiplied alpha and that qt_Matrix is present in the constant buffer at offset 0, even though the pixel shader does not use the value.

If desired, the HLSL source code can be placed directly into the QML source, similarly to how its done with GLSL. The only difference in this case is the entry point name, which must be main when using inline source strings.

Alternatively, we could also have referred to a file containing the source of the effect instead of the compiled bytecode version.

Some effects will want to provide a vertex shader as well. Below is a similar effect with both the vertex and fragment shader provided by the application. This time the colorization factor is provided by the QML item instead of hardcoding it in the shader. This can allow, among others, animating the value using QML's and Qt Quick's standard facilities.

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
            property variant color: Qt.vector3d(0.344, 0.5, 0.156)
            vertexShader: "qrc:/effect_vs.cso"
            fragmentShader: "qrc:/effect_ps.cso"
        }
    }
}

cbuffer ConstantBuffer : register(b0)
{
    float4x4 qt_Matrix;
    float qt_Opacity;
    float3 color;
};
Texture2D src : register(t0);
SamplerState srcSampler : register(s0);
struct PSInput
{
    float4 position : SV_POSITION;
    float2 coord : TEXCOORD0;
};
PSInput ExampleVertexShader(float4 position : POSITION, float2 coord : TEXCOORD0)
{
    PSInput result;
    result.position = mul(qt_Matrix, position);
    result.coord = coord;
    return result;
}
float4 ExamplePixelShader(PSInput input) : SV_TARGET
{
    float4 tex = src.Sample(srcSampler, coord);
    float3 col = dot(tex.rgb, color);
    return float4(col, tex.a) * qt_Opacity;
}

Cross-platform, Cross-API ShaderEffect Items

Some applications will want to be functional with multiple accelerated graphics backends. This has consequences for ShaderEffect items because the supported shading languages may vary from backend to backend.

There are two approaches to handle this: either write conditional property values based on GraphicsInfo.shaderType, or use file selectors. In practice the latter is strongly recommended as it leads to more concise and cleaner application code. The only case it is not suitable is when the source strings are constructed dynamically.

import QtQuick 2.8 // for GraphicsInfo

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
            property variant color: Qt.vector3d(0.344, 0.5, 0.156)
            fragmentShader: GraphicsInfo.shaderType === GraphicsInfo.GLSL ?
                "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;"
            : GraphicsInfo.shaderType === GraphicsInfo.HLSL ?
                "cbuffer ConstantBuffer : register(b0)
                {
                    float4x4 qt_Matrix;
                    float qt_Opacity;
                };
                Texture2D src : register(t0);
                SamplerState srcSampler : register(s0);
                float4 ExamplePixelShader(float4 position : SV_POSITION, float2 coord : TEXCOORD0) : SV_TARGET
                {
                    float4 tex = src.Sample(srcSampler, coord);
                    float3 col = dot(tex.rgb, float3(0.344, 0.5, 0.156));
                    return float4(col, tex.a) * qt_Opacity;
                }"
            : ""
        }
    }
}

import QtQuick 2.8 // for GraphicsInfo

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
            property variant color: Qt.vector3d(0.344, 0.5, 0.156)
            fragmentShader: "qrc:shaders/effect.frag" // selects the correct variant automatically
        }
    }
}

ShaderEffect and Item Layers

The ShaderEffect type can be combined with layered items.

Layer with effect disabled	Layer with effect enabled
Item { id: layerRoot layer.enabled: true layer.effect: ShaderEffect { fragmentShader: " uniform lowp sampler2D source; // this item uniform lowp float qt_Opacity; // inherited opacity of this item varying highp vec2 qt_TexCoord0; void main() { lowp vec4 p = texture2D(source, qt_TexCoord0); lowp float g = dot(p.xyz, vec3(0.344, 0.5, 0.156)); gl_FragColor = vec4(g, g, g, p.a) * qt_Opacity; }" }

It is also possible to combine multiple layered items:

Rectangle { id: gradientRect; width: 10 height: 10 gradient: Gradient { GradientStop { position: 0; color: "white" } GradientStop { position: 1; color: "steelblue" } } visible: false; // should not be visible on screen. layer.enabled: true; layer.smooth: true } Text { id: textItem font.pixelSize: 48 text: "Gradient Text" anchors.centerIn: parent layer.enabled: true // This item should be used as the 'mask' layer.samplerName: "maskSource" layer.effect: ShaderEffect { property var colorSource: gradientRect; fragmentShader: " uniform lowp sampler2D colorSource; uniform lowp sampler2D maskSource; uniform lowp float qt_Opacity; varying highp vec2 qt_TexCoord0; void main() { gl_FragColor = texture2D(colorSource, qt_TexCoord0) * texture2D(maskSource, qt_TexCoord0).a * qt_Opacity; } " } }

Other Notes

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.

The Qt Graphical Effects module contains several ready-made effects for using with Qt Quick applications.

See also Item Layers.

Property Documentation