examples/qml/shadereffects/shadereffects.qml

   1 /****************************************************************************
   2 **
   3 ** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
   4 ** Contact: http://www.qt-project.org/
   5 **
   6 ** This file is part of the Declarative module of the Qt Toolkit.
   7 **
   8 ** $QT_BEGIN_LICENSE:LGPL$
   9 ** GNU Lesser General Public License Usage
  10 ** This file may be used under the terms of the GNU Lesser General Public
  11 ** License version 2.1 as published by the Free Software Foundation and
  12 ** appearing in the file LICENSE.LGPL included in the packaging of this
  13 ** file. Please review the following information to ensure the GNU Lesser
  14 ** General Public License version 2.1 requirements will be met:
  15 ** http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
  16 **
  17 ** In addition, as a special exception, Nokia gives you certain additional
  18 ** rights. These rights are described in the Nokia Qt LGPL Exception
  19 ** version 1.1, included in the file LGPL_EXCEPTION.txt in this package.
  20 **
  21 ** GNU General Public License Usage
  22 ** Alternatively, this file may be used under the terms of the GNU General
  23 ** Public License version 3.0 as published by the Free Software Foundation
  24 ** and appearing in the file LICENSE.GPL included in the packaging of this
  25 ** file. Please review the following information to ensure the GNU General
  26 ** Public License version 3.0 requirements will be met:
  27 ** http://www.gnu.org/copyleft/gpl.html.
  28 **
  29 ** Other Usage
  30 ** Alternatively, this file may be used in accordance with the terms and
  31 ** conditions contained in a signed written agreement between you and Nokia.
  32 **
  33 **
  34 **
  35 **
  36 **
  37 **
  38 ** $QT_END_LICENSE$
  39 **
  40 ****************************************************************************/
  41
  42 import QtQuick 2.0
  43 import "content"
  44
  45 Image {
  46     width: 640
  47     height: 360
  48     source: "../snake/content/pics/background.png"
  49
  50     ShaderEffectSource {
  51         id: theSource
  52         sourceItem: theItem
  53         smooth: true
  54     }
  55
  56     function saturate(x) {
  57         return Math.min(Math.max(x, 0), 1)
  58     }
  59
  60     function sliderToColor(x) {
  61         return Qt.rgba(saturate(Math.max(2 - 6 * x, 6 * x - 4)),
  62                         saturate(Math.min(6 * x, 4 - 6 * x)),
  63                         saturate(Math.min(6 * x - 2, 6 - 6 * x)))
  64     }
  65
  66     Grid {
  67         anchors.centerIn: parent
  68         columns: 3
  69
  70         Item {
  71             id: theItem
  72             width: 180
  73             height: 180
  74             ListView {
  75                 anchors.centerIn: parent
  76                 width: 160
  77                 height: 140
  78                 clip: true
  79                 snapMode: ListView.SnapOneItem
  80                 model: VisualItemModel {
  81                     Text {
  82                         width: 160
  83                         height: 140
  84                         horizontalAlignment: Text.AlignHCenter
  85                         verticalAlignment: Text.AlignVCenter
  86                         font.pixelSize: 120
  87                         font.family: "Times"
  88                         color: "blue"
  89                         text: "Qt"
  90                     }
  91                     Image {
  92                         width: 160
  93                         height: 140
  94                         source: "content/qt-logo.png"
  95                         smooth: true
  96                     }
  97                     Image {
  98                         width: 160
  99                         height: 140
 100                         source: "content/face-smile.png"
 101                         smooth: true
 102                     }
 103                 }
 104             }
 105         }
 106         ShaderEffect {
 107             width: 180
 108             height: 180
 109             property variant source: theSource
 110             property real amplitude: 0.04 * wobbleSlider.value
 111             property real frequency: 20
 112             property real time: 0
 113             NumberAnimation on time { loops: Animation.Infinite; from: 0; to: Math.PI * 2; duration: 600 }
 114             fragmentShader:
 115                 "uniform lowp float qt_Opacity;" +
 116                 "uniform highp float amplitude;" +
 117                 "uniform highp float frequency;" +
 118                 "uniform highp float time;" +
 119                 "uniform sampler2D source;" +
 120                 "varying highp vec2 qt_TexCoord0;" +
 121                 "void main() {" +
 122                 "    highp vec2 p = sin(time + frequency * qt_TexCoord0);" +
 123                 "    gl_FragColor = texture2D(source, qt_TexCoord0 + amplitude * vec2(p.y, -p.x)) * qt_Opacity;" +
 124                 "}"
 125             Slider {
 126                 id: wobbleSlider
 127                 anchors.left: parent.left
 128                 anchors.right: parent.right
 129                 anchors.bottom: parent.bottom
 130                 height: 40
 131             }
 132         }
 133         ShaderEffect {
 134             width: 180
 135             height: 180
 136             property variant source: theSource
 137             property variant shadow: ShaderEffectSource {
 138                 smooth: true
 139                 sourceItem: ShaderEffect {
 140                     width: theItem.width
 141                     height: theItem.height
 142                     property variant delta: Qt.size(0.0, 1.0 / height)
 143                     property variant source: ShaderEffectSource {
 144                         smooth: true
 145                         sourceItem: ShaderEffect {
 146                             width: theItem.width
 147                             height: theItem.height
 148                             property variant delta: Qt.size(1.0 / width, 0.0)
 149                             property variant source: theSource
 150                             fragmentShader: "
 151                                 uniform lowp float qt_Opacity;
 152                                 uniform sampler2D source;
 153                                 uniform highp vec2 delta;
 154                                 varying highp vec2 qt_TexCoord0;
 155                                 void main() {
 156                                     gl_FragColor =(0.0538 * texture2D(source, qt_TexCoord0 - 3.182 * delta)
 157                                                  + 0.3229 * texture2D(source, qt_TexCoord0 - 1.364 * delta)
 158                                                  + 0.2466 * texture2D(source, qt_TexCoord0)
 159                                                  + 0.3229 * texture2D(source, qt_TexCoord0 + 1.364 * delta)
 160                                                  + 0.0538 * texture2D(source, qt_TexCoord0 + 3.182 * delta)) * qt_Opacity;
 161                                 }"
 162                         }
 163                     }
 164                     fragmentShader: "
 165                         uniform lowp float qt_Opacity;
 166                         uniform sampler2D source;
 167                         uniform highp vec2 delta;
 168                         varying highp vec2 qt_TexCoord0;
 169                         void main() {
 170                             gl_FragColor =(0.0538 * texture2D(source, qt_TexCoord0 - 3.182 * delta)
 171                                          + 0.3229 * texture2D(source, qt_TexCoord0 - 1.364 * delta)
 172                                          + 0.2466 * texture2D(source, qt_TexCoord0)
 173                                          + 0.3229 * texture2D(source, qt_TexCoord0 + 1.364 * delta)
 174                                          + 0.0538 * texture2D(source, qt_TexCoord0 + 3.182 * delta)) * qt_Opacity;
 175                         }"
 176                 }
 177             }
 178             property real angle: 0
 179             property variant offset: Qt.point(15.0 * Math.cos(angle), 15.0 * Math.sin(angle))
 180             NumberAnimation on angle { loops: Animation.Infinite; from: 0; to: Math.PI * 2; duration: 6000 }
 181             property variant delta: Qt.size(offset.x / width, offset.y / height)
 182             property real darkness: shadowSlider.value
 183             fragmentShader: "
 184                 uniform lowp float qt_Opacity;
 185                 uniform highp vec2 offset;
 186                 uniform sampler2D source;
 187                 uniform sampler2D shadow;
 188                 uniform highp float darkness;
 189                 uniform highp vec2 delta;
 190                 varying highp vec2 qt_TexCoord0;
 191                 void main() {
 192                     lowp vec4 fg = texture2D(source, qt_TexCoord0);
 193                     lowp vec4 bg = texture2D(shadow, qt_TexCoord0 + delta);
 194                     gl_FragColor = (fg + vec4(0., 0., 0., darkness * bg.a) * (1. - fg.a)) * qt_Opacity;
 195                 }"
 196             Slider {
 197                 id: shadowSlider
 198                 anchors.left: parent.left
 199                 anchors.right: parent.right
 200                 anchors.bottom: parent.bottom
 201                 height: 40
 202             }
 203         }
 204         ShaderEffect {
 205             width: 180
 206             height: 180
 207             property variant source: theSource
 208             property variant delta: Qt.size(0.5 / width, 0.5 / height)
 209             fragmentShader: "
 210                 uniform sampler2D source;
 211                 uniform highp vec2 delta;
 212                 uniform highp float qt_Opacity;
 213                 varying highp vec2 qt_TexCoord0;
 214                 void main() {
 215                     lowp vec4 tl = texture2D(source, qt_TexCoord0 - delta);
 216                     lowp vec4 tr = texture2D(source, qt_TexCoord0 + vec2(delta.x, -delta.y));
 217                     lowp vec4 bl = texture2D(source, qt_TexCoord0 - vec2(delta.x, -delta.y));
 218                     lowp vec4 br = texture2D(source, qt_TexCoord0 + delta);
 219                     lowp vec4 gx = (tl + bl) - (tr + br);
 220                     lowp vec4 gy = (tl + tr) - (bl + br);
 221                     gl_FragColor.xyz = vec3(0.);
 222                     gl_FragColor.w = clamp(dot(sqrt(gx * gx + gy * gy), vec4(1.)), 0., 1.) * qt_Opacity;
 223                 }"
 224         }
 225         ShaderEffect {
 226             width: 180
 227             height: 180
 228             property variant source: theSource
 229             property color tint: sliderToColor(colorizeSlider.value)
 230             fragmentShader: "
 231                 uniform sampler2D source;
 232                 uniform lowp vec4 tint;
 233                 uniform lowp float qt_Opacity;
 234                 varying highp vec2 qt_TexCoord0;
 235                 void main() {
 236                     lowp vec4 c = texture2D(source, qt_TexCoord0);
 237                     lowp float lo = min(min(c.x, c.y), c.z);
 238                     lowp float hi = max(max(c.x, c.y), c.z);
 239                     gl_FragColor = qt_Opacity * vec4(mix(vec3(lo), vec3(hi), tint.xyz), c.w);
 240                 }"
 241             Slider {
 242                 id: colorizeSlider
 243                 anchors.left: parent.left
 244                 anchors.right: parent.right
 245                 anchors.bottom: parent.bottom
 246                 height: 40
 247             }
 248         }
 249         ShaderEffect {
 250             width: 180
 251             height: 180
 252             mesh: Qt.size(10, 10)
 253             property variant source: theSource
 254             property real bend: 0
 255             property real minimize: 0
 256             property real side: genieSlider.value
 257             SequentialAnimation on bend {
 258                 loops: Animation.Infinite
 259                 NumberAnimation { to: 1; duration: 700; easing.type: Easing.InOutSine }
 260                 PauseAnimation { duration: 1600 }
 261                 NumberAnimation { to: 0; duration: 700; easing.type: Easing.InOutSine }
 262                 PauseAnimation { duration: 1000 }
 263             }
 264             SequentialAnimation on minimize {
 265                 loops: Animation.Infinite
 266                 PauseAnimation { duration: 300 }
 267                 NumberAnimation { to: 1; duration: 700; easing.type: Easing.InOutSine }
 268                 PauseAnimation { duration: 1000 }
 269                 NumberAnimation { to: 0; duration: 700; easing.type: Easing.InOutSine }
 270                 PauseAnimation { duration: 1300 }
 271             }
 272             vertexShader: "
 273                 uniform highp mat4 qt_Matrix;
 274                 uniform highp float bend;
 275                 uniform highp float minimize;
 276                 uniform highp float side;
 277                 uniform highp float width;
 278                 uniform highp float height;
 279                 attribute highp vec4 qt_Vertex;
 280                 attribute highp vec2 qt_MultiTexCoord0;
 281                 varying highp vec2 qt_TexCoord0;
 282                 void main() {
 283                     qt_TexCoord0 = qt_MultiTexCoord0;
 284                     highp vec4 pos = qt_Vertex;
 285                     pos.y = mix(qt_Vertex.y, height, minimize);
 286                     highp float t = pos.y / height;
 287                     t = (3. - 2. * t) * t * t;
 288                     pos.x = mix(qt_Vertex.x, side * width, t * bend);
 289                     gl_Position = qt_Matrix * pos;
 290                 }"
 291             Slider {
 292                 id: genieSlider
 293                 anchors.left: parent.left
 294                 anchors.right: parent.right
 295                 anchors.bottom: parent.bottom
 296                 height: 40
 297             }
 298         }
 299     }
 300 }