- Qt 5.5
- Qt Quick
- Qt Quick Examples - Shader Effects
- Qt 5.5.1 Reference Documentation

# Qt Quick Examples - Shader Effects

This example demonstrates a couple of visual effects that you can perform with shaders in Qt Quick. It applies five different effects on a text and a couple of images. For more information, visit Important Concepts In Qt Quick - Graphical Effects

## Running the Example

To run the example from Qt Creator, open the Welcome mode and select the example from Examples. For more information, visit Building and Running an Example.

## Using ShaderEffect

The ShaderEffect type typically operates on other types, using a ShaderEffectSource:

    ShaderEffectSource {
        id: theSource
        sourceItem: theItem
    }

In the above snippet, `theItem` is the ID of a complex QML object in the file.

ShaderEffects can use this ShaderEffectSource as a texture in their fragment shader:

    fragmentShader:
        "uniform lowp float qt_Opacity;" +
        "uniform highp float amplitude;" +
        "uniform highp float frequency;" +
        "uniform highp float time;" +
        "uniform sampler2D source;" +
        "varying highp vec2 qt_TexCoord0;" +
        "void main() {" +
        "    highp vec2 p = sin(time + frequency * qt_TexCoord0);" +
        "    gl_FragColor = texture2D(source, qt_TexCoord0 + amplitude * vec2(p.y, -p.x)) * qt_Opacity;" +
        "}"

You can use any custom property on the ShaderEffect in your shader. This makes animated shader code very easy:

    property variant source: theSource
    property real bend: 0
    property real minimize: 0
    property real side: genieSlider.value
    SequentialAnimation on bend {
        loops: Animation.Infinite
        NumberAnimation { to: 1; duration: 700; easing.type: Easing.InOutSine }
        PauseAnimation { duration: 1600 }
        NumberAnimation { to: 0; duration: 700; easing.type: Easing.InOutSine }
        PauseAnimation { duration: 1000 }
    }
    SequentialAnimation on minimize {
        loops: Animation.Infinite
        PauseAnimation { duration: 300 }
        NumberAnimation { to: 1; duration: 700; easing.type: Easing.InOutSine }
        PauseAnimation { duration: 1000 }
        NumberAnimation { to: 0; duration: 700; easing.type: Easing.InOutSine }
        PauseAnimation { duration: 1300 }
    }

ShaderEffects can also have a custom vertext shader. Setting the mesh property on ShaderEffect provides more vertices for you to manipulate, enabling more effects.

    mesh: Qt.size(10, 10)
    vertexShader: "
        uniform highp mat4 qt_Matrix;
        uniform highp float bend;
        uniform highp float minimize;
        uniform highp float side;
        uniform highp float width;
        uniform highp float height;
        attribute highp vec4 qt_Vertex;
        attribute highp vec2 qt_MultiTexCoord0;
        varying highp vec2 qt_TexCoord0;
        void main() {
            qt_TexCoord0 = qt_MultiTexCoord0;
            highp vec4 pos = qt_Vertex;
            pos.y = mix(qt_Vertex.y, height, minimize);
            highp float t = pos.y / height;
            t = (3. - 2. * t) * t * t;
            pos.x = mix(qt_Vertex.x, side * width, t * bend);
            gl_Position = qt_Matrix * pos;
        }"

Files:

- shadereffects/shadereffects.qml
- shadereffects/content/Slider.qml
- shadereffects/main.cpp
- shadereffects/shadereffects.pro
- shadereffects/shadereffects.qmlproject
- shadereffects/shadereffects.qrc