examples/declarative/shadereffects/shader-demo.qml

   1 /****************************************************************************
   2 **
   3 ** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
   4 ** All rights reserved.
   5 ** Contact: Nokia Corporation (qt-info@nokia.com)
   6 **
   7 ** This file is part of the Declarative module of the Qt Toolkit.
   8 **
   9 ** $QT_BEGIN_LICENSE:LGPL$
  10 ** No Commercial Usage
  11 ** This file contains pre-release code and may not be distributed.
  12 ** You may use this file in accordance with the terms and conditions
  13 ** contained in the Technology Preview License Agreement accompanying
  14 ** this package.
  15 **
  16 ** GNU Lesser General Public License Usage
  17 ** Alternatively, this file may be used under the terms of the GNU Lesser
  18 ** General Public License version 2.1 as published by the Free Software
  19 ** Foundation and appearing in the file LICENSE.LGPL included in the
  20 ** packaging of this file.  Please review the following information to
  21 ** ensure the GNU Lesser General Public License version 2.1 requirements
  22 ** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
  23 **
  24 ** In addition, as a special exception, Nokia gives you certain additional
  25 ** rights.  These rights are described in the Nokia Qt LGPL Exception
  26 ** version 1.1, included in the file LGPL_EXCEPTION.txt in this package.
  27 **
  28 ** If you have questions regarding the use of this file, please contact
  29 ** Nokia at qt-info@nokia.com.
  30 **
  31 **
  32 **
  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         ShaderEffectItem {
 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 highp float amplitude;" +
 115                 "uniform highp float frequency;" +
 116                 "uniform highp float time;" +
 117                 "uniform sampler2D source;" +
 118                 "varying highp vec2 qt_TexCoord0;" +
 119                 "void main() {" +
 120                 "    highp vec2 p = sin(time + frequency * qt_TexCoord0);" +
 121                 "    gl_FragColor = texture2D(source, qt_TexCoord0 + amplitude * vec2(p.y, -p.x));" +
 122                 "}"
 123             Slider {
 124                 id: wobbleSlider
 125                 anchors.left: parent.left
 126                 anchors.right: parent.right
 127                 anchors.bottom: parent.bottom
 128                 height: 40
 129             }
 130         }
 131         ShaderEffectItem {
 132             width: 180
 133             height: 180
 134             property variant source: theSource
 135             property variant shadow: ShaderEffectSource {
 136                 smooth: true
 137                 sourceItem: ShaderEffectItem {
 138                     width: theItem.width
 139                     height: theItem.height
 140                     property variant delta: Qt.size(0.0, 1.0 / height)
 141                     property variant source: ShaderEffectSource {
 142                         smooth: true
 143                         sourceItem: ShaderEffectItem {
 144                             width: theItem.width
 145                             height: theItem.height
 146                             property variant delta: Qt.size(1.0 / width, 0.0)
 147                             property variant source: theSource
 148                             fragmentShader: "
 149                                 uniform sampler2D source;
 150                                 uniform highp vec2 delta;
 151                                 varying highp vec2 qt_TexCoord0;
 152                                 void main() {
 153                                     gl_FragColor = 0.0538 * texture2D(source, qt_TexCoord0 - 3.182 * delta)
 154                                                  + 0.3229 * texture2D(source, qt_TexCoord0 - 1.364 * delta)
 155                                                  + 0.2466 * texture2D(source, qt_TexCoord0)
 156                                                  + 0.3229 * texture2D(source, qt_TexCoord0 + 1.364 * delta)
 157                                                  + 0.0538 * texture2D(source, qt_TexCoord0 + 3.182 * delta);
 158                                 }"
 159                         }
 160                     }
 161                     fragmentShader: "
 162                         uniform sampler2D source;
 163                         uniform highp vec2 delta;
 164                         varying highp vec2 qt_TexCoord0;
 165                         void main() {
 166                             gl_FragColor = 0.0538 * texture2D(source, qt_TexCoord0 - 3.182 * delta)
 167                                          + 0.3229 * texture2D(source, qt_TexCoord0 - 1.364 * delta)
 168                                          + 0.2466 * texture2D(source, qt_TexCoord0)
 169                                          + 0.3229 * texture2D(source, qt_TexCoord0 + 1.364 * delta)
 170                                          + 0.0538 * texture2D(source, qt_TexCoord0 + 3.182 * delta);
 171                         }"
 172                 }
 173             }
 174             property real angle: 0
 175             property variant offset: Qt.point(15.0 * Math.cos(angle), 15.0 * Math.sin(angle))
 176             NumberAnimation on angle { loops: Animation.Infinite; from: 0; to: Math.PI * 2; duration: 6000 }
 177             property variant delta: Qt.size(offset.x / width, offset.y / height)
 178             property real darkness: shadowSlider.value
 179             fragmentShader: "
 180                 uniform highp vec2 offset;
 181                 uniform sampler2D source;
 182                 uniform sampler2D shadow;
 183                 uniform highp float darkness;
 184                 uniform highp vec2 delta;
 185                 varying highp vec2 qt_TexCoord0;
 186                 void main() {
 187                     lowp vec4 fg = texture2D(source, qt_TexCoord0);
 188                     lowp vec4 bg = texture2D(shadow, qt_TexCoord0 + delta);
 189                     gl_FragColor = fg + vec4(0., 0., 0., darkness * bg.a) * (1. - fg.a);
 190                 }"
 191             Slider {
 192                 id: shadowSlider
 193                 anchors.left: parent.left
 194                 anchors.right: parent.right
 195                 anchors.bottom: parent.bottom
 196                 height: 40
 197             }
 198         }
 199         ShaderEffectItem {
 200             width: 180
 201             height: 180
 202             property variant source: theSource
 203             property variant delta: Qt.size(0.5 / width, 0.5 / height)
 204             fragmentShader: "
 205                 uniform sampler2D source;
 206                 uniform highp vec2 delta;
 207                 uniform highp float qt_Opacity;
 208                 varying highp vec2 qt_TexCoord0;
 209                 void main() {
 210                     lowp vec4 tl = texture2D(source, qt_TexCoord0 - delta);
 211                     lowp vec4 tr = texture2D(source, qt_TexCoord0 + vec2(delta.x, -delta.y));
 212                     lowp vec4 bl = texture2D(source, qt_TexCoord0 - vec2(delta.x, -delta.y));
 213                     lowp vec4 br = texture2D(source, qt_TexCoord0 + delta);
 214                     lowp vec4 gx = (tl + bl) - (tr + br);
 215                     lowp vec4 gy = (tl + tr) - (bl + br);
 216                     gl_FragColor.xyz = vec3(0.);
 217                     gl_FragColor.w = clamp(dot(sqrt(gx * gx + gy * gy), vec4(1.)), 0., 1.) * qt_Opacity;
 218                 }"
 219         }
 220         ShaderEffectItem {
 221             width: 180
 222             height: 180
 223             property variant source: theSource
 224             property color tint: sliderToColor(colorizeSlider.value)
 225             fragmentShader: "
 226                 uniform sampler2D source;
 227                 uniform lowp vec4 tint;
 228                 uniform lowp float qt_Opacity;
 229                 varying highp vec2 qt_TexCoord0;
 230                 void main() {
 231                     lowp vec4 c = texture2D(source, qt_TexCoord0);
 232                     lowp float lo = min(min(c.x, c.y), c.z);
 233                     lowp float hi = max(max(c.x, c.y), c.z);
 234                     gl_FragColor = qt_Opacity * vec4(mix(vec3(lo), vec3(hi), tint.xyz), c.w);
 235                 }"
 236             Slider {
 237                 id: colorizeSlider
 238                 anchors.left: parent.left
 239                 anchors.right: parent.right
 240                 anchors.bottom: parent.bottom
 241                 height: 40
 242             }
 243         }
 244         ShaderEffectItem {
 245             width: 180
 246             height: 180
 247             mesh: GridMesh { resolution: Qt.size(10, 10) }
 248             property variant source: theSource
 249             property real bend: 0
 250             property real minimize: 0
 251             property real side: genieSlider.value
 252             SequentialAnimation on bend {
 253                 loops: Animation.Infinite
 254                 NumberAnimation { to: 1; duration: 700; easing.type: Easing.InOutSine }
 255                 PauseAnimation { duration: 1600 }
 256                 NumberAnimation { to: 0; duration: 700; easing.type: Easing.InOutSine }
 257                 PauseAnimation { duration: 1000 }
 258             }
 259             SequentialAnimation on minimize {
 260                 loops: Animation.Infinite
 261                 PauseAnimation { duration: 300 }
 262                 NumberAnimation { to: 1; duration: 700; easing.type: Easing.InOutSine }
 263                 PauseAnimation { duration: 1000 }
 264                 NumberAnimation { to: 0; duration: 700; easing.type: Easing.InOutSine }
 265                 PauseAnimation { duration: 1300 }
 266             }
 267             vertexShader: "
 268                 uniform highp mat4 qt_ModelViewProjectionMatrix;
 269                 uniform highp float bend;
 270                 uniform highp float minimize;
 271                 uniform highp float side;
 272                 uniform highp float width;
 273                 uniform highp float height;
 274                 attribute highp vec4 qt_Vertex;
 275                 attribute highp vec2 qt_MultiTexCoord0;
 276                 varying highp vec2 qt_TexCoord0;
 277                 void main() {
 278                     qt_TexCoord0 = qt_MultiTexCoord0;
 279                     highp vec4 pos = qt_Vertex;
 280                     pos.y = mix(qt_Vertex.y, height, minimize);
 281                     highp float t = pos.y / height;
 282                     t = (3. - 2. * t) * t * t;
 283                     pos.x = mix(qt_Vertex.x, side * width, t * bend);
 284                     gl_Position = qt_ModelViewProjectionMatrix * pos;
 285                 }"
 286             Slider {
 287                 id: genieSlider
 288                 anchors.left: parent.left
 289                 anchors.right: parent.right
 290                 anchors.bottom: parent.bottom
 291                 height: 40
 292             }
 293         }
 294     }
 295 }