examples/declarative/shadereffects/shader-demo.qml

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