From ef3164012498f1db2f484ddfb2d45fe7dc6e86ee Mon Sep 17 00:00:00 2001 From: Gunnar Sletta Date: Wed, 27 Oct 2010 15:47:17 +0200 Subject: Examples of ShaderEffectItem --- examples/shadereffectitem/Content.qml | 26 ++++++ .../shadereffectitem/Effectoids/Box4PointBlur.qml | 44 ++++++++++ examples/shadereffectitem/Effectoids/Colorize.qml | 31 +++++++ .../Effectoids/Directional4PointBlur.qml | 46 ++++++++++ .../Effectoids/Directional8PointBlur.qml | 63 ++++++++++++++ .../shadereffectitem/Effectoids/DropShadow.qml | 53 ++++++++++++ examples/shadereffectitem/MovingBox.qml | 67 +++++++++++++++ examples/shadereffectitem/bg.png | Bin 0 -> 335944 bytes examples/shadereffectitem/test-boxblur-4point.qml | 20 +++++ examples/shadereffectitem/test-colorize.qml | 75 +++++++++++++++++ .../shadereffectitem/test-directional-4point.qml | 93 +++++++++++++++++++++ examples/shadereffectitem/test-dropshadow.qml | 50 +++++++++++ 12 files changed, 568 insertions(+) create mode 100644 examples/shadereffectitem/Content.qml create mode 100644 examples/shadereffectitem/Effectoids/Box4PointBlur.qml create mode 100644 examples/shadereffectitem/Effectoids/Colorize.qml create mode 100644 examples/shadereffectitem/Effectoids/Directional4PointBlur.qml create mode 100644 examples/shadereffectitem/Effectoids/Directional8PointBlur.qml create mode 100644 examples/shadereffectitem/Effectoids/DropShadow.qml create mode 100644 examples/shadereffectitem/MovingBox.qml create mode 100644 examples/shadereffectitem/bg.png create mode 100644 examples/shadereffectitem/test-boxblur-4point.qml create mode 100644 examples/shadereffectitem/test-colorize.qml create mode 100644 examples/shadereffectitem/test-directional-4point.qml create mode 100644 examples/shadereffectitem/test-dropshadow.qml (limited to 'examples') diff --git a/examples/shadereffectitem/Content.qml b/examples/shadereffectitem/Content.qml new file mode 100644 index 0000000..949f5da --- /dev/null +++ b/examples/shadereffectitem/Content.qml @@ -0,0 +1,26 @@ +import QtQuick 2.0 + +Item { + anchors.fill: parent + + MovingBox {} + + Image { + source: "bg.png" + x: 20; y: 20; width: 100; height: 100; + } + + Rectangle { + anchors.bottom: parent.bottom; anchors.bottomMargin: 20 + anchors.right: parent.right; anchors.rightMargin: 20 + color: "#ff7f7f" + border.color: "black" + width: height; height: 100 + NumberAnimation on height { from: 100; to: 200; duration: 6116; loops: Animation.Infinite } + } + + Text { + anchors.centerIn: parent + text: "And here comes a bit of text, you see..." + } +} diff --git a/examples/shadereffectitem/Effectoids/Box4PointBlur.qml b/examples/shadereffectitem/Effectoids/Box4PointBlur.qml new file mode 100644 index 0000000..88a3723 --- /dev/null +++ b/examples/shadereffectitem/Effectoids/Box4PointBlur.qml @@ -0,0 +1,44 @@ +import QtQuick 2.0 + +ShaderEffectItem +{ + fragmentShader: + "varying highp vec2 qt_TexCoord; \n" + + "varying highp vec2 my_TexCoord2; \n" + + "varying highp vec2 my_TexCoord3; \n" + + "varying highp vec2 my_TexCoord4; \n" + + "uniform sampler2D qt_Texture; \n" + + "void main() { \n" + + " gl_FragColor = (texture2D(qt_Texture, qt_TexCoord) \n" + + " + texture2D(qt_Texture, my_TexCoord2) \n" + + " + texture2D(qt_Texture, my_TexCoord3) \n" + + " + texture2D(qt_Texture, my_TexCoord4)) * 0.25; \n" + + "}" + + vertexShader: + "attribute highp vec4 qt_VertexPosition; \n" + + "attribute highp vec2 qt_VertexTexCoord; \n" + + "uniform highp mat4 qt_Matrix; \n" + + "uniform highp float xOffset; \n" + + "uniform highp float yOffset; \n" + + "varying highp vec2 qt_TexCoord; \n" + + "varying highp vec2 my_TexCoord2; \n" + + "varying highp vec2 my_TexCoord3; \n" + + "varying highp vec2 my_TexCoord4; \n" + + "void main() { \n" + + " highp vec2 s1 = vec2(xOffset, yOffset); \n" + + " highp vec2 s2 = vec2(-xOffset, yOffset); \n" + + " qt_TexCoord = qt_VertexTexCoord + s1; \n" + + " my_TexCoord2 = qt_VertexTexCoord - s1; \n" + + " my_TexCoord3 = qt_VertexTexCoord + s2; \n" + + " my_TexCoord4 = qt_VertexTexCoord - s2; \n" + + " gl_Position = qt_Matrix * qt_VertexPosition; \n" + + "}" + + property real xOffset: 0.5 / width + property real yOffset: 0.5 / height + active: true + blending: true + smooth: true + +} diff --git a/examples/shadereffectitem/Effectoids/Colorize.qml b/examples/shadereffectitem/Effectoids/Colorize.qml new file mode 100644 index 0000000..74fc4cd --- /dev/null +++ b/examples/shadereffectitem/Effectoids/Colorize.qml @@ -0,0 +1,31 @@ +import QtQuick 2.0 + +ShaderEffectItem +{ + fragmentShader: + "varying highp vec2 qt_TexCoord; \n" + + "uniform sampler2D qt_Texture; \n" + + "uniform lowp vec4 color; \n" + + "uniform lowp float intensity; \n" + + "void main() { \n" + + " lowp vec4 pix = texture2D(qt_Texture, qt_TexCoord); \n" + + " lowp float gray = dot(pix.rgb, vec3(0.5, 0.5, 0.5)); \n" + + " gl_FragColor = mix(pix, color * (gray * pix.w), intensity); \n" + + "}" + + vertexShader: + "attribute highp vec4 qt_VertexPosition; \n" + + "attribute highp vec2 qt_VertexTexCoord; \n" + + "uniform highp mat4 qt_Matrix; \n" + + "varying highp vec2 qt_TexCoord; \n" + + "void main() { \n" + + " qt_TexCoord = qt_VertexTexCoord; \n" + + " gl_Position = qt_Matrix * qt_VertexPosition; \n" + + "}" + + property color color; + property real intensity; + active: intensity > 0 + anchors.fill: source + +} diff --git a/examples/shadereffectitem/Effectoids/Directional4PointBlur.qml b/examples/shadereffectitem/Effectoids/Directional4PointBlur.qml new file mode 100644 index 0000000..2c8c732 --- /dev/null +++ b/examples/shadereffectitem/Effectoids/Directional4PointBlur.qml @@ -0,0 +1,46 @@ +import QtQuick 2.0 + +ShaderEffectItem +{ + fragmentShader: + "varying highp vec2 qt_TexCoord; \n" + + "varying highp vec2 qt_TexCoord2; \n" + + "varying highp vec2 qt_TexCoord3; \n" + + "varying highp vec2 qt_TexCoord4; \n" + + "uniform sampler2D qt_Texture; \n" + + "void main() { \n" + + " gl_FragColor = ( 2. / 6. * texture2D(qt_Texture, qt_TexCoord) \n" + + " + 1. / 6. * texture2D(qt_Texture, qt_TexCoord2) \n" + + " + 2. / 6. * texture2D(qt_Texture, qt_TexCoord3) \n" + + " + 1. / 6. * texture2D(qt_Texture, qt_TexCoord4)); \n" + + "}" + + vertexShader: + "attribute highp vec4 qt_VertexPosition; \n" + + "attribute highp vec2 qt_VertexTexCoord; \n" + + "uniform highp mat4 qt_Matrix; \n" + + "uniform highp float xStep; \n" + + "uniform highp float yStep; \n" + + "uniform highp float spread; \n" + + "varying highp vec2 qt_TexCoord; \n" + + "varying highp vec2 qt_TexCoord2; \n" + + "varying highp vec2 qt_TexCoord3; \n" + + "varying highp vec2 qt_TexCoord4; \n" + + "void main() { \n" + + " highp vec2 shift = vec2(xStep, yStep); \n" + + " qt_TexCoord = 0.7 * spread * shift + qt_VertexTexCoord; \n" + + " qt_TexCoord2 = 2.7 * spread * shift + qt_VertexTexCoord; \n" + + " qt_TexCoord3 = -0.7 * spread * shift + qt_VertexTexCoord; \n" + + " qt_TexCoord4 = -2.7 * spread * shift + qt_VertexTexCoord; \n" + + " gl_Position = qt_Matrix * qt_VertexPosition; \n" + + "}" + + + property real spread: 1; + property real xStep: 0 / width; + property real yStep: 1 / height; + active: spread > 0 + anchors.fill: source + smooth: true + +} diff --git a/examples/shadereffectitem/Effectoids/Directional8PointBlur.qml b/examples/shadereffectitem/Effectoids/Directional8PointBlur.qml new file mode 100644 index 0000000..d3f3998 --- /dev/null +++ b/examples/shadereffectitem/Effectoids/Directional8PointBlur.qml @@ -0,0 +1,63 @@ +import QtQuick 2.0 + +ShaderEffectItem +{ + fragmentShader: + "varying highp vec2 qt_TexCoord; \n" + + "varying highp vec2 qt_TexCoord2; \n" + + "varying highp vec2 qt_TexCoord3; \n" + + "varying highp vec2 qt_TexCoord4; \n" + + "varying highp vec2 qt_TexCoord5; \n" + + "varying highp vec2 qt_TexCoord6; \n" + + "varying highp vec2 qt_TexCoord7; \n" + + "varying highp vec2 qt_TexCoord8; \n" + + "uniform sampler2D qt_Texture; \n" + + "void main() { \n" + + " gl_FragColor = \n" + + " (4. / 20. * texture2D(qt_Texture, qt_TexCoord) \n" + + " + 3. / 20. * texture2D(qt_Texture, qt_TexCoord2) \n" + + " + 2. / 20. * texture2D(qt_Texture, qt_TexCoord3) \n" + + " + 1. / 20. * texture2D(qt_Texture, qt_TexCoord4) \n" + + " + 4. / 20. * texture2D(qt_Texture, qt_TexCoord5) \n" + + " + 3. / 20. * texture2D(qt_Texture, qt_TexCoord6) \n" + + " + 2. / 20. * texture2D(qt_Texture, qt_TexCoord7) \n" + + " + 1. / 20. * texture2D(qt_Texture, qt_TexCoord8)); \n" + + "}" + + vertexShader: + "attribute highp vec4 qt_VertexPosition; \n" + + "attribute highp vec2 qt_VertexTexCoord; \n" + + "uniform highp mat4 qt_Matrix; \n" + + "uniform highp float xStep; \n" + + "uniform highp float yStep; \n" + + "uniform highp float spread; \n" + + "varying highp vec2 qt_TexCoord; \n" + + "varying highp vec2 qt_TexCoord2; \n" + + "varying highp vec2 qt_TexCoord3; \n" + + "varying highp vec2 qt_TexCoord4; \n" + + "varying highp vec2 qt_TexCoord5; \n" + + "varying highp vec2 qt_TexCoord6; \n" + + "varying highp vec2 qt_TexCoord7; \n" + + "varying highp vec2 qt_TexCoord8; \n" + + "void main() { \n" + + " highp vec2 shift = vec2(xStep, yStep); \n" + + " qt_TexCoord = 0.66 * spread * shift + qt_VertexTexCoord; \n" + + " qt_TexCoord2 = 2.5 * spread * shift + qt_VertexTexCoord; \n" + + " qt_TexCoord3 = 4.5 * spread * shift + qt_VertexTexCoord; \n" + + " qt_TexCoord4 = 6.5 * spread * shift + qt_VertexTexCoord; \n" + + " qt_TexCoord5 = -0.66 * spread * shift + qt_VertexTexCoord; \n" + + " qt_TexCoord6 = -2.5 * spread * shift + qt_VertexTexCoord; \n" + + " qt_TexCoord7 = -4.5 * spread * shift + qt_VertexTexCoord; \n" + + " qt_TexCoord8 = -6.5 * spread * shift + qt_VertexTexCoord; \n" + + " gl_Position = qt_Matrix * qt_VertexPosition; \n" + + "}" + + + property real spread: 1; + property real xStep: 0 / width; + property real yStep: 1 / height; + active: spread > 0 + anchors.fill: source + smooth: true + +} diff --git a/examples/shadereffectitem/Effectoids/DropShadow.qml b/examples/shadereffectitem/Effectoids/DropShadow.qml new file mode 100644 index 0000000..8d91eb8 --- /dev/null +++ b/examples/shadereffectitem/Effectoids/DropShadow.qml @@ -0,0 +1,53 @@ +import QtQuick 2.0 + +ShaderEffectItem +{ + fragmentShader: + "varying highp vec2 qt_TexCoord; \n" + + "varying highp vec2 my_TexCoord1; \n" + + "varying highp vec2 my_TexCoord2; \n" + + "varying highp vec2 my_TexCoord3; \n" + + "varying highp vec2 my_TexCoord4; \n" + + "uniform sampler2D qt_Texture; \n" + + "void main() { \n" + + " lowp vec4 pix = texture2D(qt_Texture, qt_TexCoord); \n" + + " lowp float shadow = (texture2D(qt_Texture, my_TexCoord1).w \n" + + " + texture2D(qt_Texture, my_TexCoord2).w \n" + + " + texture2D(qt_Texture, my_TexCoord3).w \n" + + " + texture2D(qt_Texture, my_TexCoord4).w) * 0.1; \n" + + " gl_FragColor = mix(vec4(0, 0, 0, shadow), pix, pix.w); \n" + + "}" + + vertexShader: + "attribute highp vec4 qt_VertexPosition; \n" + + "attribute highp vec2 qt_VertexTexCoord; \n" + + "uniform highp mat4 qt_Matrix; \n" + + "uniform highp float xOffset; \n" + + "uniform highp float xDisplacement; \n" + + "uniform highp float yOffset; \n" + + "uniform highp float yDisplacement; \n" + + "varying highp vec2 qt_TexCoord; \n" + + "varying highp vec2 my_TexCoord1; \n" + + "varying highp vec2 my_TexCoord2; \n" + + "varying highp vec2 my_TexCoord3; \n" + + "varying highp vec2 my_TexCoord4; \n" + + "void main() { \n" + + " highp vec2 s1 = vec2(xOffset, yOffset); \n" + + " highp vec2 s2 = vec2(-xOffset, yOffset); \n" + + " qt_TexCoord = qt_VertexTexCoord; \n" + + " vec2 shadowPos = qt_VertexTexCoord + vec2(-xDisplacement, yDisplacement); \n" + + " my_TexCoord1 = shadowPos + s1; \n" + + " my_TexCoord2 = shadowPos - s1; \n" + + " my_TexCoord3 = shadowPos + s2; \n" + + " my_TexCoord4 = shadowPos - s2; \n" + + " gl_Position = qt_Matrix * qt_VertexPosition; \n" + + "}" + + property real xOffset: 0.66 / width; + property real yOffset: 0.66 / height; + property real xDisplacement: 10 / width; + property real yDisplacement: 12 / height; + anchors.fill: source + smooth: true + +} diff --git a/examples/shadereffectitem/MovingBox.qml b/examples/shadereffectitem/MovingBox.qml new file mode 100644 index 0000000..90c094f --- /dev/null +++ b/examples/shadereffectitem/MovingBox.qml @@ -0,0 +1,67 @@ +import QtQuick 2.0 + +Item { + id: root + anchors.fill: parent + + Rectangle { + width: 100 + height: 100 + color: "steelblue" + radius: 15 + + x: 100 + y: 50 + + Rectangle { + anchors.verticalCenter: parent.verticalCenter; + height: 3 + anchors.left: parent.left + anchors.right: parent.right; + anchors.margins: 10 + color: "black" + } + Rectangle { + anchors.horizontalCenter: parent.horizontalCenter; + width: 3 + anchors.top: parent.top + anchors.bottom: parent.bottom; + anchors.margins: 10 + color: "black" + } + Rectangle { + anchors.verticalCenter: parent.verticalCenter; + height: 1 + anchors.left: parent.left + anchors.right: parent.right; + anchors.margins: 11 + color: "white" + } + + Rectangle { + anchors.horizontalCenter: parent.horizontalCenter + anchors.top: parent.top + anchors.bottom: parent.bottom + anchors.margins: 11 + width: 1 + color: "white"; + } + + SequentialAnimation on x { + NumberAnimation { to: root.width - 100; duration: 15000 } + NumberAnimation { to: 0; duration: 15000 } + loops: Animation.Infinite + } + SequentialAnimation on y { + NumberAnimation { to: root.height - 100; duration: 20070 } + NumberAnimation { to: 0; duration: 20070 } + loops: Animation.Infinite + } + NumberAnimation on rotation { + loops: Animation.Infinite + duration: 60000 + from: 0 + to: -360 + } + } +} diff --git a/examples/shadereffectitem/bg.png b/examples/shadereffectitem/bg.png new file mode 100644 index 0000000..48fe22b Binary files /dev/null and b/examples/shadereffectitem/bg.png differ diff --git a/examples/shadereffectitem/test-boxblur-4point.qml b/examples/shadereffectitem/test-boxblur-4point.qml new file mode 100644 index 0000000..fcaef17 --- /dev/null +++ b/examples/shadereffectitem/test-boxblur-4point.qml @@ -0,0 +1,20 @@ +import QtQuick 2.0 +import "Effectoids" + + +Item { + width: 360 + height: 540 + + Box4PointBlur { + source: box + anchors.fill: box + xOffset: 0.5 / width; + yOffset: 0.5 / height; + } + + MovingBox { + id: box + } + +} diff --git a/examples/shadereffectitem/test-colorize.qml b/examples/shadereffectitem/test-colorize.qml new file mode 100644 index 0000000..3cf1577 --- /dev/null +++ b/examples/shadereffectitem/test-colorize.qml @@ -0,0 +1,75 @@ +import QtQuick 2.0 +import "Effectoids" + + +Item { + width: 360 + height: 540 + + Colorize { + source: effectRoot + id: colorizeEffect + color: "#c0c0ff" + intensity: 0 + blending: false + } + + Item { + width: 360 + height: 540 + id: effectRoot + + Image { + anchors.fill: parent + source: "bg.png" + smooth: true + } + + MovingBox {} + } + + Rectangle { + id: popup + anchors.centerIn: colorizeEffect + gradient: Gradient { + GradientStop { position: 0; color: "white" } + GradientStop { position: 1; color: "#ffa080" } + } + width: 250 + height: 100 + radius: 40 + border.color: "black" + border.width: 2 + smooth: true + scale: 0 + opacity: 0 + rotation: 90 + Text { + anchors.centerIn: parent + text: "SMS!!!!" + font.pixelSize: 60 + } + } + + property real transitionTime: 800; + + SequentialAnimation { + loops: Animation.Infinite + ParallelAnimation { // fade in + NumberAnimation { target: popup; property: "opacity"; to: 0.7; duration: transitionTime } + NumberAnimation { target: popup; property: "scale"; to: 1; duration: transitionTime * 3; easing.type: Easing.OutElastic} + NumberAnimation { target: colorizeEffect; property: "intensity"; to: 1; duration: transitionTime } + } + PauseAnimation { duration: 2000 } + ParallelAnimation { // fade out + NumberAnimation { target: popup; property: "opacity"; to: 0; duration: transitionTime / 5 } + NumberAnimation { target: popup; property: "scale"; to: 0; duration: transitionTime / 5; easing.type: Easing.InOutCubic } + NumberAnimation { target: colorizeEffect; property: "intensity"; to: 0; duration: transitionTime / 5 } + } + running: true + } + + Rectangle { x: 360; width: 1000; height: 1000; color: "black" } + Rectangle { y: 540; width: 1000; height: 1000; color: "black" } + +} diff --git a/examples/shadereffectitem/test-directional-4point.qml b/examples/shadereffectitem/test-directional-4point.qml new file mode 100644 index 0000000..1593475 --- /dev/null +++ b/examples/shadereffectitem/test-directional-4point.qml @@ -0,0 +1,93 @@ +import QtQuick 2.0 +import "Effectoids" + + +Item { + width: 360 + height: 540 + + Directional4PointBlur { + id: blurEffect + + yStep: 0 + xStep: 1 / width + blending: false + spread: 0 + + source: effectRoot + + } + + Item { + id: effectRoot + width: 360 + height: 540 + + Directional4PointBlur { + source: innerEffectRoot + spread: blurEffect.spread + blending: false + yStep: 1 / height + xStep: 0 + } + + Item { + id: innerEffectRoot + anchors.fill: parent + + Image { + anchors.fill: parent + source: "bg.png" + smooth: true + } + + MovingBox {} + } + } + + + Rectangle { + id: popup + anchors.centerIn: blurEffect + gradient: Gradient { + GradientStop { position: 0; color: "white" } + GradientStop { position: 1; color: "gray" } + } + width: 250 + height: 100 + radius: 40 + border.color: "black" + border.width: 2 + smooth: true + scale: 0 + opacity: 0 + rotation: 90 + Text { + anchors.centerIn: parent + text: "SMS!!!!" + font.pixelSize: 60 + } + } + + property real transitionTime: 300; + + SequentialAnimation { + loops: Animation.Infinite + ParallelAnimation { // fade in + NumberAnimation { target: popup; property: "opacity"; to: 0.7; duration: transitionTime } + NumberAnimation { target: popup; property: "scale"; to: 1; duration: transitionTime * 3; easing.type: Easing.OutElastic} + NumberAnimation { target: blurEffect; property: "spread"; to: 1; duration: transitionTime } + } + PauseAnimation { duration: 2000 } + ParallelAnimation { // fade out + NumberAnimation { target: popup; property: "opacity"; to: 0; duration: transitionTime } + NumberAnimation { target: popup; property: "scale"; to: 0; duration: transitionTime; easing.type: Easing.InOutCubic } + NumberAnimation { target: blurEffect; property: "spread"; to: 0; duration: transitionTime } + } + running: true + } + + Rectangle { x: 360; width: 1000; height: 1000; color: "black" } + Rectangle { y: 540; width: 1000; height: 1000; color: "black" } + +} diff --git a/examples/shadereffectitem/test-dropshadow.qml b/examples/shadereffectitem/test-dropshadow.qml new file mode 100644 index 0000000..c3359f1 --- /dev/null +++ b/examples/shadereffectitem/test-dropshadow.qml @@ -0,0 +1,50 @@ +import QtQuick 2.0 +import "Effectoids" + +Image { + width: 360 + height: 540 + + source: "bg.png" + smooth: true + + + Item { + width: 360 + height: 540 + id: effectRoot + + MovingBox {} + + Image { + source: "bg.png" + x: parent.width - 120; y: 20; width: 100; height: 100; + smooth: true + } + + Rectangle { + anchors.bottom: parent.bottom; anchors.bottomMargin: 20 + anchors.right: parent.right; anchors.rightMargin: 20 + color: "#ff7f7f" + border.color: "black" + width: height; height: 100 + NumberAnimation on height { from: 100; to: 200; duration: 6116; loops: Animation.Infinite } + } + + + Text { + anchors.centerIn: parent + text: "And here comes a bit of text, you see..." + } + } + + DropShadow + { + source: effectRoot + blending: true + } + + Rectangle { x: 360; width: 1000; height: 1000; color: "black" } + Rectangle { y: 540; width: 1000; height: 1000; color: "black" } +} + -- cgit v1.2.3