Qt Quick Examples - Shader Effects
This is a shader effects example
This example demonstrates a couple of visual effects that you can perform with shaders in Qt Quick.
ShaderEffects typically operate 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 many 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: