From 3199ee59ad931b88a26657fc5c66d94c4fff606f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marko=20Niemel=C3=A4?= Date: Mon, 13 Jun 2011 15:57:49 +0300 Subject: Qmlshadersplugin examples added. Example application for OpenGL shading language and QML. Added also a link from qml examples main documents labs section. Reviewed-by: Kim Gronholm --- doc/src/declarative/examples.qdoc | 23 +-- doc/src/examples/qml-examples.qdoc | 10 ++ doc/src/images/qml-shadereffects-example.png | Bin 0 -> 271264 bytes examples/declarative/declarative.pro | 3 + examples/declarative/shadereffects/main.cpp | 76 +++++++++ examples/declarative/shadereffects/qml/Curtain.qml | 106 +++++++++++++ .../shadereffects/qml/CurtainEffect.qml | 97 ++++++++++++ .../declarative/shadereffects/qml/DropShadow.qml | 117 ++++++++++++++ .../shadereffects/qml/DropShadowEffect.qml | 174 +++++++++++++++++++++ .../declarative/shadereffects/qml/Grayscale.qml | 77 +++++++++ .../shadereffects/qml/GrayscaleEffect.qml | 62 ++++++++ .../declarative/shadereffects/qml/ImageMask.qml | 143 +++++++++++++++++ .../shadereffects/qml/ImageMaskEffect.qml | 60 +++++++ .../declarative/shadereffects/qml/RadialWave.qml | 85 ++++++++++ .../shadereffects/qml/RadialWaveEffect.qml | 81 ++++++++++ examples/declarative/shadereffects/qml/Water.qml | 60 +++++++ .../declarative/shadereffects/qml/WaterEffect.qml | 126 +++++++++++++++ .../shadereffects/qml/images/Curtain.jpg | Bin 0 -> 16112 bytes .../shadereffects/qml/images/DropShadow.jpg | Bin 0 -> 12975 bytes .../shadereffects/qml/images/Grayscale.jpg | Bin 0 -> 19048 bytes .../shadereffects/qml/images/ImageMask.jpg | Bin 0 -> 18751 bytes .../shadereffects/qml/images/RadialWave.jpg | Bin 0 -> 41406 bytes .../declarative/shadereffects/qml/images/Water.jpg | Bin 0 -> 17751 bytes .../declarative/shadereffects/qml/images/back.png | Bin 0 -> 370 bytes .../declarative/shadereffects/qml/images/bg.jpg | Bin 0 -> 10189 bytes .../shadereffects/qml/images/desaturate.jpg | Bin 0 -> 203942 bytes .../shadereffects/qml/images/drop_shadow.png | Bin 0 -> 219220 bytes .../shadereffects/qml/images/fabric.jpg | Bin 0 -> 163431 bytes .../shadereffects/qml/images/flower.png | Bin 0 -> 219220 bytes .../shadereffects/qml/images/image1.jpg | Bin 0 -> 115770 bytes .../shadereffects/qml/images/image2.jpg | Bin 0 -> 45837 bytes .../shadereffects/qml/images/qt-logo.png | Bin 0 -> 22746 bytes .../shadereffects/qml/images/shader_effects.jpg | Bin 0 -> 4906 bytes .../declarative/shadereffects/qml/images/sky.jpg | Bin 0 -> 36734 bytes .../shadereffects/qml/images/toolbar.png | Bin 0 -> 342 bytes .../declarative/shadereffects/qml/images/wave.jpg | Bin 0 -> 176681 bytes examples/declarative/shadereffects/qml/main.qml | 160 +++++++++++++++++++ .../declarative/shadereffects/shadereffects.pro | 21 +++ 38 files changed, 1470 insertions(+), 11 deletions(-) create mode 100644 doc/src/images/qml-shadereffects-example.png create mode 100755 examples/declarative/shadereffects/main.cpp create mode 100755 examples/declarative/shadereffects/qml/Curtain.qml create mode 100755 examples/declarative/shadereffects/qml/CurtainEffect.qml create mode 100755 examples/declarative/shadereffects/qml/DropShadow.qml create mode 100755 examples/declarative/shadereffects/qml/DropShadowEffect.qml create mode 100755 examples/declarative/shadereffects/qml/Grayscale.qml create mode 100755 examples/declarative/shadereffects/qml/GrayscaleEffect.qml create mode 100755 examples/declarative/shadereffects/qml/ImageMask.qml create mode 100755 examples/declarative/shadereffects/qml/ImageMaskEffect.qml create mode 100755 examples/declarative/shadereffects/qml/RadialWave.qml create mode 100755 examples/declarative/shadereffects/qml/RadialWaveEffect.qml create mode 100755 examples/declarative/shadereffects/qml/Water.qml create mode 100755 examples/declarative/shadereffects/qml/WaterEffect.qml create mode 100755 examples/declarative/shadereffects/qml/images/Curtain.jpg create mode 100755 examples/declarative/shadereffects/qml/images/DropShadow.jpg create mode 100755 examples/declarative/shadereffects/qml/images/Grayscale.jpg create mode 100755 examples/declarative/shadereffects/qml/images/ImageMask.jpg create mode 100755 examples/declarative/shadereffects/qml/images/RadialWave.jpg create mode 100755 examples/declarative/shadereffects/qml/images/Water.jpg create mode 100755 examples/declarative/shadereffects/qml/images/back.png create mode 100755 examples/declarative/shadereffects/qml/images/bg.jpg create mode 100755 examples/declarative/shadereffects/qml/images/desaturate.jpg create mode 100755 examples/declarative/shadereffects/qml/images/drop_shadow.png create mode 100755 examples/declarative/shadereffects/qml/images/fabric.jpg create mode 100755 examples/declarative/shadereffects/qml/images/flower.png create mode 100755 examples/declarative/shadereffects/qml/images/image1.jpg create mode 100755 examples/declarative/shadereffects/qml/images/image2.jpg create mode 100755 examples/declarative/shadereffects/qml/images/qt-logo.png create mode 100755 examples/declarative/shadereffects/qml/images/shader_effects.jpg create mode 100755 examples/declarative/shadereffects/qml/images/sky.jpg create mode 100755 examples/declarative/shadereffects/qml/images/toolbar.png create mode 100755 examples/declarative/shadereffects/qml/images/wave.jpg create mode 100755 examples/declarative/shadereffects/qml/main.qml create mode 100755 examples/declarative/shadereffects/shadereffects.pro diff --git a/doc/src/declarative/examples.qdoc b/doc/src/declarative/examples.qdoc index 0e325e2..1003b22 100644 --- a/doc/src/declarative/examples.qdoc +++ b/doc/src/declarative/examples.qdoc @@ -33,7 +33,7 @@ Qt includes a set of examples and demos that show how to use various aspects -of QML. The examples are small demonstrations of particular QML components, +of QML. The examples are small demonstrations of particular QML components, while the demos contain more complete and functional applications. To run the examples and demos, open them in Qt Creator or use the included @@ -60,43 +60,43 @@ can be used to produce sophisticated interfaces and applications: \table \row -\o +\o \l{demos/declarative/calculator}{Calculator} \image qml-calculator-example-small.png -\o +\o \l{demos/declarative/flickr}{Flickr Mobile} \image qml-flickr-demo-small.png -\o +\o \l{demos/declarative/minehunt}{Minehunt} \image qml-minehunt-demo-small.png \row -\o +\o \l{demos/declarative/photoviewer}{Photo Viewer} \image qml-photoviewer-demo-small.png -\o +\o \l{demos/declarative/rssnews}{RSS News Reader} \image qml-rssnews-demo-small.png -\o +\o \l{demos/declarative/samegame}{Same Game} \image qml-samegame-demo-small.png \row -\o +\o \l{demos/declarative/snake}{Snake} \image qml-snake-demo-small.png -\o +\o \l{demos/declarative/twitter}{Twitter} \image qml-twitter-demo-small.png -\o +\o \l{demos/declarative/webbrowser}{Web Browser} \image qml-webbrowser-demo-small.png @@ -109,7 +109,7 @@ The demos can be found in Qt's \c demos/declarative directory. The QML examples are small, simple applications that show how to use a particular QML component or feature. If you are new -to QML, you may also find the \l{QML Tutorial}{Hello World} and +to QML, you may also find the \l{QML Tutorial}{Hello World} and \l {QML Advanced Tutorial}{Same Game} tutorials useful. The examples can be found in Qt's \c examples/declarative directory. @@ -234,6 +234,7 @@ The examples can be found in Qt's \c examples/declarative directory. \list \o \l{src/imports/folderlistmodel}{Folder List Model} - a C++ model plugin +\o \l{declarative/shadereffects}{Shader Effects} \endlist */ diff --git a/doc/src/examples/qml-examples.qdoc b/doc/src/examples/qml-examples.qdoc index 00eeb43..a910266 100644 --- a/doc/src/examples/qml-examples.qdoc +++ b/doc/src/examples/qml-examples.qdoc @@ -714,3 +714,13 @@ \image qml-xmlhttprequest-example.png */ + +/*! + \title Labs: Shader Effects + \example declarative/shadereffects + + This example shows how to create visual effects by using OpenGL shading language together with QML using \l ShaderEffectItem and \l ShaderEffectSource APIs. + + \image qml-shadereffects-example.png +*/ + diff --git a/doc/src/images/qml-shadereffects-example.png b/doc/src/images/qml-shadereffects-example.png new file mode 100644 index 0000000..9649fe1 Binary files /dev/null and b/doc/src/images/qml-shadereffects-example.png differ diff --git a/examples/declarative/declarative.pro b/examples/declarative/declarative.pro index e3d922c..f10e7a4 100644 --- a/examples/declarative/declarative.pro +++ b/examples/declarative/declarative.pro @@ -6,6 +6,9 @@ SUBDIRS = \ modelviews \ tutorials +# OpenGL shader examples requires opengl and they contain some C++ and need to be built +contains(QT_CONFIG, opengl): SUBDIRS += shadereffects + # plugins uses a 'Time' class that conflicts with symbian e32std.h also defining a class of the same name symbian:SUBDIRS -= plugins diff --git a/examples/declarative/shadereffects/main.cpp b/examples/declarative/shadereffects/main.cpp new file mode 100755 index 0000000..62bf505 --- /dev/null +++ b/examples/declarative/shadereffects/main.cpp @@ -0,0 +1,76 @@ +/**************************************************************************** +** +** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies). +** All rights reserved. +** Contact: Nokia Corporation (qt-info@nokia.com) +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:LGPL$ +** No Commercial Usage +** This file contains pre-release code and may not be distributed. +** You may use this file in accordance with the terms and conditions +** contained in the Technology Preview License Agreement accompanying +** this package. +** +** GNU Lesser General Public License Usage +** Alternatively, this file may be used under the terms of the GNU Lesser +** General Public License version 2.1 as published by the Free Software +** Foundation and appearing in the file LICENSE.LGPL included in the +** packaging of this file. Please review the following information to +** ensure the GNU Lesser General Public License version 2.1 requirements +** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html. +** +** In addition, as a special exception, Nokia gives you certain additional +** rights. These rights are described in the Nokia Qt LGPL Exception +** version 1.1, included in the file LGPL_EXCEPTION.txt in this package. +** +** If you have questions regarding the use of this file, please contact +** Nokia at qt-info@nokia.com. +** +** +** +** +** +** +** +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +#include +#include +#include +#include + +int main(int argc, char *argv[]) +{ +// Depending on which is the recommended way for the platform, either use +// opengl graphics system or paint into QGLWidget. +#ifdef SHADEREFFECTS_USE_OPENGL_GRAPHICSSYSTEM + QApplication::setGraphicsSystem("opengl"); +#endif + + QApplication app(argc, argv); + QDeclarativeView view; + +#ifndef SHADEREFFECTS_USE_OPENGL_GRAPHICSSYSTEM + QGLFormat format = QGLFormat::defaultFormat(); + format.setSampleBuffers(false); + format.setSwapInterval(1); + QGLWidget* glWidget = new QGLWidget(format); + glWidget->setAutoFillBackground(false); + view.setViewport(glWidget); +#endif + + view.setViewportUpdateMode(QGraphicsView::FullViewportUpdate); + view.setAttribute(Qt::WA_OpaquePaintEvent); + view.setAttribute(Qt::WA_NoSystemBackground); + view.setSource(QUrl::fromLocalFile(QLatin1String("qml/main.qml"))); + QObject::connect(view.engine(), SIGNAL(quit()), &view, SLOT(close())); + + view.show(); + + return app.exec(); +} diff --git a/examples/declarative/shadereffects/qml/Curtain.qml b/examples/declarative/shadereffects/qml/Curtain.qml new file mode 100755 index 0000000..8697951 --- /dev/null +++ b/examples/declarative/shadereffects/qml/Curtain.qml @@ -0,0 +1,106 @@ +/**************************************************************************** +** +** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies). +** All rights reserved. +** Contact: Nokia Corporation (qt-info@nokia.com) +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:LGPL$ +** No Commercial Usage +** This file contains pre-release code and may not be distributed. +** You may use this file in accordance with the terms and conditions +** contained in the Technology Preview License Agreement accompanying +** this package. +** +** GNU Lesser General Public License Usage +** Alternatively, this file may be used under the terms of the GNU Lesser +** General Public License version 2.1 as published by the Free Software +** Foundation and appearing in the file LICENSE.LGPL included in the +** packaging of this file. Please review the following information to +** ensure the GNU Lesser General Public License version 2.1 requirements +** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html. +** +** In addition, as a special exception, Nokia gives you certain additional +** rights. These rights are described in the Nokia Qt LGPL Exception +** version 1.1, included in the file LGPL_EXCEPTION.txt in this package. +** +** If you have questions regarding the use of this file, please contact +** Nokia at qt-info@nokia.com. +** +** +** +** +** +** +** +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 1.0 +import Qt.labs.shaders 1.0 + +Item { + id: main + anchors.fill: parent + + Rectangle{ + id: bg + anchors.fill: parent + color: "black" + } + + Image { + source: "images/qt-logo.png" + anchors.centerIn: parent + } + + Image { + id: fabric + anchors.fill: parent + source: "images/fabric.jpg" + fillMode: Image.Tile + } + + CurtainEffect { + id: curtain + anchors.fill: fabric + bottomWidth: topWidth + source: ShaderEffectSource { sourceItem: fabric; hideSource: true } + + Behavior on bottomWidth { + SpringAnimation { easing.type: Easing.OutElastic; velocity: 250; mass: 1.5; spring: 0.5; damping: 0.05} + } + + SequentialAnimation on topWidth { + id: topWidthAnim + loops: Animation.Infinite + + NumberAnimation { to: 360; duration: 1000 } + PauseAnimation { duration: 2000 } + NumberAnimation { to: 180; duration: 1000 } + PauseAnimation { duration: 2000 } + } + } + + MouseArea { + anchors.fill: parent + + onPressed: { + topWidthAnim.stop() + curtain.topWidth = mouseX; + } + + onReleased: { + topWidthAnim.restart() + } + + onPositionChanged: { + if (pressed) { + curtain.topWidth = mouseX; + } + } + } +} diff --git a/examples/declarative/shadereffects/qml/CurtainEffect.qml b/examples/declarative/shadereffects/qml/CurtainEffect.qml new file mode 100755 index 0000000..7834a1a --- /dev/null +++ b/examples/declarative/shadereffects/qml/CurtainEffect.qml @@ -0,0 +1,97 @@ +/**************************************************************************** +** +** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies). +** All rights reserved. +** Contact: Nokia Corporation (qt-info@nokia.com) +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:LGPL$ +** No Commercial Usage +** This file contains pre-release code and may not be distributed. +** You may use this file in accordance with the terms and conditions +** contained in the Technology Preview License Agreement accompanying +** this package. +** +** GNU Lesser General Public License Usage +** Alternatively, this file may be used under the terms of the GNU Lesser +** General Public License version 2.1 as published by the Free Software +** Foundation and appearing in the file LICENSE.LGPL included in the +** packaging of this file. Please review the following information to +** ensure the GNU Lesser General Public License version 2.1 requirements +** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html. +** +** In addition, as a special exception, Nokia gives you certain additional +** rights. These rights are described in the Nokia Qt LGPL Exception +** version 1.1, included in the file LGPL_EXCEPTION.txt in this package. +** +** If you have questions regarding the use of this file, please contact +** Nokia at qt-info@nokia.com. +** +** +** +** +** +** +** +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 1.0 +import Qt.labs.shaders 1.0 + +ShaderEffectItem { + anchors.fill: parent + property variant source + meshResolution: Qt.size(50, 50) + + property real topWidth: width / 2 + property real bottomWidth: width / 2 + property real originalWidth: width + property real originalHeight: height + property real amplitude: 0.1 + + vertexShader: " + attribute highp vec4 qt_Vertex; + attribute highp vec2 qt_MultiTexCoord0; + uniform highp mat4 qt_ModelViewProjectionMatrix; + varying highp vec2 qt_TexCoord0; + varying lowp float shade; + + uniform highp float topWidth; + uniform highp float bottomWidth; + uniform highp float originalWidth; + uniform highp float originalHeight; + uniform highp float amplitude; + + void main() { + qt_TexCoord0 = qt_MultiTexCoord0; + + highp vec4 shift = vec4(0, 0, 0, 0); + shift.x = qt_Vertex.x * ((originalWidth - topWidth) + (topWidth - bottomWidth) * (qt_Vertex.y / originalHeight)) / originalWidth; + + shade = sin(21.9911486 * qt_Vertex.x / originalWidth); + shift.y = amplitude * (originalWidth - topWidth + (topWidth - bottomWidth) * (qt_Vertex.y / originalHeight)) * shade; + + gl_Position = qt_ModelViewProjectionMatrix * (qt_Vertex - shift); + + shade = 0.2 * (2.0 - shade ) * (1.0 - (bottomWidth + (topWidth - bottomWidth) * (1.0 - qt_Vertex.y / originalHeight)) / originalWidth); + } + " + + fragmentShader: " + uniform sampler2D source; + varying highp vec2 qt_TexCoord0; + varying lowp float shade; + void main() { + highp vec4 color = texture2D(source, qt_TexCoord0); + color.rgb *= 1.0 - shade; + gl_FragColor = color; + } + " +} + + + diff --git a/examples/declarative/shadereffects/qml/DropShadow.qml b/examples/declarative/shadereffects/qml/DropShadow.qml new file mode 100755 index 0000000..054f193 --- /dev/null +++ b/examples/declarative/shadereffects/qml/DropShadow.qml @@ -0,0 +1,117 @@ +/**************************************************************************** +** +** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies). +** All rights reserved. +** Contact: Nokia Corporation (qt-info@nokia.com) +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:LGPL$ +** No Commercial Usage +** This file contains pre-release code and may not be distributed. +** You may use this file in accordance with the terms and conditions +** contained in the Technology Preview License Agreement accompanying +** this package. +** +** GNU Lesser General Public License Usage +** Alternatively, this file may be used under the terms of the GNU Lesser +** General Public License version 2.1 as published by the Free Software +** Foundation and appearing in the file LICENSE.LGPL included in the +** packaging of this file. Please review the following information to +** ensure the GNU Lesser General Public License version 2.1 requirements +** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html. +** +** In addition, as a special exception, Nokia gives you certain additional +** rights. These rights are described in the Nokia Qt LGPL Exception +** version 1.1, included in the file LGPL_EXCEPTION.txt in this package. +** +** If you have questions regarding the use of this file, please contact +** Nokia at qt-info@nokia.com. +** +** +** +** +** +** +** +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 1.0 + +Item { + id: main + anchors.fill: parent + + Image { + id: background + anchors.fill: parent + source: "images/bg.jpg" + } + + DropShadowEffect { + id: layer + + property real distance: 0.0 + + width: photo.width + height: photo.height + sourceItem: photo + color: "black" + blur: distance / 10.0 + opacity: 1 - distance / 50.0 + + Binding { + target: layer + property: "x" + value: -0.4 * layer.distance + when: !dragArea.pressed + } + Binding { + target: layer + property: "y" + value: 0.9 * layer.distance + when: !dragArea.pressed + } + + SequentialAnimation on distance { + id: animation + running: true + loops: Animation.Infinite + + NumberAnimation { to: 30; duration: 2000 } + PauseAnimation { duration: 500 } + NumberAnimation { to: 0; duration: 2000 } + PauseAnimation { duration: 500 } + } + } + + Image { + id: photo + anchors.fill: parent + source: "images/drop_shadow.png" + smooth: true + } + + MouseArea { + id: dragArea + anchors.fill: parent + + property int startX + property int startY + + onPressed: { + startX = mouseX + startY = mouseY + } + + onPositionChanged: { + layer.x += mouseX - startX + layer.y += mouseY - startY + startX = mouseX + startY = mouseY + } + } +} diff --git a/examples/declarative/shadereffects/qml/DropShadowEffect.qml b/examples/declarative/shadereffects/qml/DropShadowEffect.qml new file mode 100755 index 0000000..b9903a3 --- /dev/null +++ b/examples/declarative/shadereffects/qml/DropShadowEffect.qml @@ -0,0 +1,174 @@ +/**************************************************************************** +** +** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies). +** All rights reserved. +** Contact: Nokia Corporation (qt-info@nokia.com) +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:LGPL$ +** No Commercial Usage +** This file contains pre-release code and may not be distributed. +** You may use this file in accordance with the terms and conditions +** contained in the Technology Preview License Agreement accompanying +** this package. +** +** GNU Lesser General Public License Usage +** Alternatively, this file may be used under the terms of the GNU Lesser +** General Public License version 2.1 as published by the Free Software +** Foundation and appearing in the file LICENSE.LGPL included in the +** packaging of this file. Please review the following information to +** ensure the GNU Lesser General Public License version 2.1 requirements +** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html. +** +** In addition, as a special exception, Nokia gives you certain additional +** rights. These rights are described in the Nokia Qt LGPL Exception +** version 1.1, included in the file LGPL_EXCEPTION.txt in this package. +** +** If you have questions regarding the use of this file, please contact +** Nokia at qt-info@nokia.com. +** +** +** +** +** +** +** +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 1.0 +import Qt.labs.shaders 1.0 + +Item { + id: main + property real blur: 0.0 + property alias color: shadowEffectWithHBlur.color + property alias sourceItem: source.sourceItem + + ShaderEffectSource { + id: source + smooth: true + hideSource: false + } + + ShaderEffectItem { + id: shadowEffectWithHBlur + anchors.fill: parent + + property color color: "grey" + property variant sourceTexture: source; + property real xStep: main.blur / main.width + + vertexShader:" + uniform highp mat4 qt_ModelViewProjectionMatrix; + attribute highp vec4 qt_Vertex; + attribute highp vec2 qt_MultiTexCoord0; + uniform highp float xStep; + varying highp vec2 qt_TexCoord0; + varying highp vec2 qt_TexCoord1; + varying highp vec2 qt_TexCoord2; + varying highp vec2 qt_TexCoord4; + varying highp vec2 qt_TexCoord5; + varying highp vec2 qt_TexCoord6; + + void main(void) + { + highp vec2 shift = vec2(xStep, 0.); + qt_TexCoord0 = qt_MultiTexCoord0 - 2.5 * shift; + qt_TexCoord1 = qt_MultiTexCoord0 - 1.5 * shift; + qt_TexCoord2 = qt_MultiTexCoord0 - 0.5 * shift; + qt_TexCoord4 = qt_MultiTexCoord0 + 0.5 * shift; + qt_TexCoord5 = qt_MultiTexCoord0 + 1.5 * shift; + qt_TexCoord6 = qt_MultiTexCoord0 + 2.5 * shift; + gl_Position = qt_ModelViewProjectionMatrix * qt_Vertex; + } + " + + fragmentShader:" + uniform highp vec4 color; + uniform lowp sampler2D sourceTexture; + varying highp vec2 qt_TexCoord0; + varying highp vec2 qt_TexCoord1; + varying highp vec2 qt_TexCoord2; + varying highp vec2 qt_TexCoord4; + varying highp vec2 qt_TexCoord5; + varying highp vec2 qt_TexCoord6; + + void main() { + highp vec4 sourceColor = (texture2D(sourceTexture, qt_TexCoord0) * 0.1 + + texture2D(sourceTexture, qt_TexCoord1) * 0.15 + + texture2D(sourceTexture, qt_TexCoord2) * 0.25 + + texture2D(sourceTexture, qt_TexCoord4) * 0.25 + + texture2D(sourceTexture, qt_TexCoord5) * 0.15 + + texture2D(sourceTexture, qt_TexCoord6) * 0.1); + gl_FragColor = mix(vec4(0), color, sourceColor.a); + } + " + } + + ShaderEffectSource { + id: hBlurredShadow + smooth: true + sourceItem: shadowEffectWithHBlur + hideSource: true + } + + ShaderEffectItem { + id: finalEffect + anchors.fill: parent + + property color color: "grey" + property variant sourceTexture: hBlurredShadow; + property real yStep: main.blur / main.height + + vertexShader:" + uniform highp mat4 qt_ModelViewProjectionMatrix; + attribute highp vec4 qt_Vertex; + attribute highp vec2 qt_MultiTexCoord0; + uniform highp float yStep; + varying highp vec2 qt_TexCoord0; + varying highp vec2 qt_TexCoord1; + varying highp vec2 qt_TexCoord2; + varying highp vec2 qt_TexCoord4; + varying highp vec2 qt_TexCoord5; + varying highp vec2 qt_TexCoord6; + + void main(void) + { + highp vec2 shift = vec2(0., yStep); + qt_TexCoord0 = qt_MultiTexCoord0 - 2.5 * shift; + qt_TexCoord1 = qt_MultiTexCoord0 - 1.5 * shift; + qt_TexCoord2 = qt_MultiTexCoord0 - 0.5 * shift; + qt_TexCoord4 = qt_MultiTexCoord0 + 0.5 * shift; + qt_TexCoord5 = qt_MultiTexCoord0 + 1.5 * shift; + qt_TexCoord6 = qt_MultiTexCoord0 + 2.5 * shift; + gl_Position = qt_ModelViewProjectionMatrix * qt_Vertex; + } + " + + fragmentShader:" + uniform highp vec4 color; + uniform lowp sampler2D sourceTexture; + uniform highp float qt_Opacity; + varying highp vec2 qt_TexCoord0; + varying highp vec2 qt_TexCoord1; + varying highp vec2 qt_TexCoord2; + varying highp vec2 qt_TexCoord4; + varying highp vec2 qt_TexCoord5; + varying highp vec2 qt_TexCoord6; + + void main() { + highp vec4 sourceColor = (texture2D(sourceTexture, qt_TexCoord0) * 0.1 + + texture2D(sourceTexture, qt_TexCoord1) * 0.15 + + texture2D(sourceTexture, qt_TexCoord2) * 0.25 + + texture2D(sourceTexture, qt_TexCoord4) * 0.25 + + texture2D(sourceTexture, qt_TexCoord5) * 0.15 + + texture2D(sourceTexture, qt_TexCoord6) * 0.1); + gl_FragColor = sourceColor * qt_Opacity; + } + " + } +} diff --git a/examples/declarative/shadereffects/qml/Grayscale.qml b/examples/declarative/shadereffects/qml/Grayscale.qml new file mode 100755 index 0000000..d819a5d --- /dev/null +++ b/examples/declarative/shadereffects/qml/Grayscale.qml @@ -0,0 +1,77 @@ +/**************************************************************************** +** +** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies). +** All rights reserved. +** Contact: Nokia Corporation (qt-info@nokia.com) +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:LGPL$ +** No Commercial Usage +** This file contains pre-release code and may not be distributed. +** You may use this file in accordance with the terms and conditions +** contained in the Technology Preview License Agreement accompanying +** this package. +** +** GNU Lesser General Public License Usage +** Alternatively, this file may be used under the terms of the GNU Lesser +** General Public License version 2.1 as published by the Free Software +** Foundation and appearing in the file LICENSE.LGPL included in the +** packaging of this file. Please review the following information to +** ensure the GNU Lesser General Public License version 2.1 requirements +** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html. +** +** In addition, as a special exception, Nokia gives you certain additional +** rights. These rights are described in the Nokia Qt LGPL Exception +** version 1.1, included in the file LGPL_EXCEPTION.txt in this package. +** +** If you have questions regarding the use of this file, please contact +** Nokia at qt-info@nokia.com. +** +** +** +** +** +** +** +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 1.0 +import Qt.labs.shaders 1.0 + +Item { + id: main + anchors.fill: parent + + GrayscaleEffect { + id: layer + anchors.fill: parent + + source: ShaderEffectSource { + sourceItem: Image { source: "images/desaturate.jpg" } + live: false + hideSource: true + } + + SequentialAnimation on ratio { + id: ratioAnimation + running: true + loops: Animation.Infinite + NumberAnimation { + easing.type: Easing.Linear + to: 0.0 + duration: 1500 + } + PauseAnimation { duration: 1000 } + NumberAnimation { + easing.type: Easing.Linear + to: 1.0 + duration: 1500 + } + PauseAnimation { duration: 1000 } + } + } +} diff --git a/examples/declarative/shadereffects/qml/GrayscaleEffect.qml b/examples/declarative/shadereffects/qml/GrayscaleEffect.qml new file mode 100755 index 0000000..34505ff --- /dev/null +++ b/examples/declarative/shadereffects/qml/GrayscaleEffect.qml @@ -0,0 +1,62 @@ +/**************************************************************************** +** +** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies). +** All rights reserved. +** Contact: Nokia Corporation (qt-info@nokia.com) +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:LGPL$ +** No Commercial Usage +** This file contains pre-release code and may not be distributed. +** You may use this file in accordance with the terms and conditions +** contained in the Technology Preview License Agreement accompanying +** this package. +** +** GNU Lesser General Public License Usage +** Alternatively, this file may be used under the terms of the GNU Lesser +** General Public License version 2.1 as published by the Free Software +** Foundation and appearing in the file LICENSE.LGPL included in the +** packaging of this file. Please review the following information to +** ensure the GNU Lesser General Public License version 2.1 requirements +** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html. +** +** In addition, as a special exception, Nokia gives you certain additional +** rights. These rights are described in the Nokia Qt LGPL Exception +** version 1.1, included in the file LGPL_EXCEPTION.txt in this package. +** +** If you have questions regarding the use of this file, please contact +** Nokia at qt-info@nokia.com. +** +** +** +** +** +** +** +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 1.0 +import Qt.labs.shaders 1.0 + +ShaderEffectItem { + id: effect + property real ratio: 1.0 + property variant source: 0 + + fragmentShader: + " + varying highp vec2 qt_TexCoord0; + uniform sampler2D source; + uniform highp float ratio; + void main(void) + { + lowp vec4 textureColor = texture2D(source, qt_TexCoord0.st); + lowp float gray = dot(textureColor, vec4(0.299, 0.587, 0.114, 0.0)); + gl_FragColor = vec4(gray * ratio + textureColor.r * (1.0 - ratio), gray * ratio + textureColor.g * (1.0 - ratio), gray * ratio + textureColor.b * (1.0 - ratio), textureColor.a); + } + " +} diff --git a/examples/declarative/shadereffects/qml/ImageMask.qml b/examples/declarative/shadereffects/qml/ImageMask.qml new file mode 100755 index 0000000..ea9fa0a --- /dev/null +++ b/examples/declarative/shadereffects/qml/ImageMask.qml @@ -0,0 +1,143 @@ +/**************************************************************************** +** +** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies). +** All rights reserved. +** Contact: Nokia Corporation (qt-info@nokia.com) +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:LGPL$ +** No Commercial Usage +** This file contains pre-release code and may not be distributed. +** You may use this file in accordance with the terms and conditions +** contained in the Technology Preview License Agreement accompanying +** this package. +** +** GNU Lesser General Public License Usage +** Alternatively, this file may be used under the terms of the GNU Lesser +** General Public License version 2.1 as published by the Free Software +** Foundation and appearing in the file LICENSE.LGPL included in the +** packaging of this file. Please review the following information to +** ensure the GNU Lesser General Public License version 2.1 requirements +** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html. +** +** In addition, as a special exception, Nokia gives you certain additional +** rights. These rights are described in the Nokia Qt LGPL Exception +** version 1.1, included in the file LGPL_EXCEPTION.txt in this package. +** +** If you have questions regarding the use of this file, please contact +** Nokia at qt-info@nokia.com. +** +** +** +** +** +** +** +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 1.0 +import Qt.labs.shaders 1.0 + +Item { + anchors.fill: parent + + Image { + id: bg + anchors.fill: parent + source: "images/image2.jpg" + } + + Item { + id: mask + anchors.fill: parent + + Text { + text: "Mask text" + font.pixelSize: 50 + font.bold: true + anchors.horizontalCenter: parent.horizontalCenter + + NumberAnimation on rotation { + running: true + loops: Animation.Infinite + from: 0 + to: 360 + duration: 3000 + } + + SequentialAnimation on y { + running: true + loops: Animation.Infinite + NumberAnimation { + to: main.height + duration: 3000 + } + NumberAnimation { + to: 0 + duration: 3000 + } + } + } + + Rectangle { + id: opaqueBox + width: 60 + height: parent.height + SequentialAnimation on x { + running: true + loops: Animation.Infinite + NumberAnimation { + to: main.width + duration: 2000 + easing.type: Easing.InOutCubic + } + NumberAnimation { + to: 0 + duration: 2000 + easing.type: Easing.InOutCubic + } + } + } + + Rectangle { + width: 100 + opacity: 0.5 + height: parent.height + SequentialAnimation on x { + PauseAnimation { duration: 100 } + + SequentialAnimation { + loops: Animation.Infinite + NumberAnimation { + to: main.width + duration: 2000 + easing.type: Easing.InOutCubic + } + NumberAnimation { + to: 0 + duration: 2000 + easing.type: Easing.InOutCubic + } + } + } + } + } + + ImageMaskEffect { + anchors.fill: parent + image: ShaderEffectSource { + sourceItem: Image { source: "images/image1.jpg" } + live: false + hideSource: true + } + mask: ShaderEffectSource { + sourceItem: mask + live: true + hideSource: true + } + } +} diff --git a/examples/declarative/shadereffects/qml/ImageMaskEffect.qml b/examples/declarative/shadereffects/qml/ImageMaskEffect.qml new file mode 100755 index 0000000..2dc0e75 --- /dev/null +++ b/examples/declarative/shadereffects/qml/ImageMaskEffect.qml @@ -0,0 +1,60 @@ +/**************************************************************************** +** +** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies). +** All rights reserved. +** Contact: Nokia Corporation (qt-info@nokia.com) +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:LGPL$ +** No Commercial Usage +** This file contains pre-release code and may not be distributed. +** You may use this file in accordance with the terms and conditions +** contained in the Technology Preview License Agreement accompanying +** this package. +** +** GNU Lesser General Public License Usage +** Alternatively, this file may be used under the terms of the GNU Lesser +** General Public License version 2.1 as published by the Free Software +** Foundation and appearing in the file LICENSE.LGPL included in the +** packaging of this file. Please review the following information to +** ensure the GNU Lesser General Public License version 2.1 requirements +** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html. +** +** In addition, as a special exception, Nokia gives you certain additional +** rights. These rights are described in the Nokia Qt LGPL Exception +** version 1.1, included in the file LGPL_EXCEPTION.txt in this package. +** +** If you have questions regarding the use of this file, please contact +** Nokia at qt-info@nokia.com. +** +** +** +** +** +** +** +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 1.0 +import Qt.labs.shaders 1.0 + +ShaderEffectItem { + id: effect + property variant image: 0 + property variant mask: 0 + + fragmentShader: + " + varying highp vec2 qt_TexCoord0; + uniform sampler2D image; + uniform sampler2D mask; + void main(void) + { + gl_FragColor = texture2D(image, qt_TexCoord0.st) * (texture2D(mask, qt_TexCoord0.st).a); + } + " +} diff --git a/examples/declarative/shadereffects/qml/RadialWave.qml b/examples/declarative/shadereffects/qml/RadialWave.qml new file mode 100755 index 0000000..4487293 --- /dev/null +++ b/examples/declarative/shadereffects/qml/RadialWave.qml @@ -0,0 +1,85 @@ +/**************************************************************************** +** +** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies). +** All rights reserved. +** Contact: Nokia Corporation (qt-info@nokia.com) +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:LGPL$ +** No Commercial Usage +** This file contains pre-release code and may not be distributed. +** You may use this file in accordance with the terms and conditions +** contained in the Technology Preview License Agreement accompanying +** this package. +** +** GNU Lesser General Public License Usage +** Alternatively, this file may be used under the terms of the GNU Lesser +** General Public License version 2.1 as published by the Free Software +** Foundation and appearing in the file LICENSE.LGPL included in the +** packaging of this file. Please review the following information to +** ensure the GNU Lesser General Public License version 2.1 requirements +** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html. +** +** In addition, as a special exception, Nokia gives you certain additional +** rights. These rights are described in the Nokia Qt LGPL Exception +** version 1.1, included in the file LGPL_EXCEPTION.txt in this package. +** +** If you have questions regarding the use of this file, please contact +** Nokia at qt-info@nokia.com. +** +** +** +** +** +** +** +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 1.0 +import Qt.labs.shaders 1.0 + +Item { + id: main + anchors.fill: parent + + ShaderEffectSource { + id: thesource + sourceItem: Image { source: "images/wave.jpg" } + live: false + hideSource: true + } + + RadialWaveEffect { + id: layer + anchors.fill: parent; + source: thesource + + wave: 0.0 + waveOriginX: 0.5 + waveOriginY: 0.5 + waveWidth: 0.01 + + NumberAnimation on wave { + id: waveAnim + running: true + loops: Animation.Infinite + easing.type: "Linear" + from: 0.0000; to: 2.0000; + duration: 2500 + } + } + + MouseArea { + anchors.fill: parent + onPressed: { + waveAnim.stop() + layer.waveOriginX = mouseX / main.width + layer.waveOriginY = mouseY / main.height + waveAnim.start() + } + } +} diff --git a/examples/declarative/shadereffects/qml/RadialWaveEffect.qml b/examples/declarative/shadereffects/qml/RadialWaveEffect.qml new file mode 100755 index 0000000..c415f69 --- /dev/null +++ b/examples/declarative/shadereffects/qml/RadialWaveEffect.qml @@ -0,0 +1,81 @@ +/**************************************************************************** +** +** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies). +** All rights reserved. +** Contact: Nokia Corporation (qt-info@nokia.com) +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:LGPL$ +** No Commercial Usage +** This file contains pre-release code and may not be distributed. +** You may use this file in accordance with the terms and conditions +** contained in the Technology Preview License Agreement accompanying +** this package. +** +** GNU Lesser General Public License Usage +** Alternatively, this file may be used under the terms of the GNU Lesser +** General Public License version 2.1 as published by the Free Software +** Foundation and appearing in the file LICENSE.LGPL included in the +** packaging of this file. Please review the following information to +** ensure the GNU Lesser General Public License version 2.1 requirements +** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html. +** +** In addition, as a special exception, Nokia gives you certain additional +** rights. These rights are described in the Nokia Qt LGPL Exception +** version 1.1, included in the file LGPL_EXCEPTION.txt in this package. +** +** If you have questions regarding the use of this file, please contact +** Nokia at qt-info@nokia.com. +** +** +** +** +** +** +** +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 1.0 +import Qt.labs.shaders 1.0 + +ShaderEffectItem { + id: effect + + property real wave: 0.3 + property real waveOriginX: 0.5 + property real waveOriginY: 0.5 + property real waveWidth: 0.01 + property real aspectRatio: width/height + property variant source: 0 + + fragmentShader: + " + varying mediump vec2 qt_TexCoord0; + uniform sampler2D source; + uniform highp float wave; + uniform highp float waveWidth; + uniform highp float waveOriginX; + uniform highp float waveOriginY; + uniform highp float aspectRatio; + + void main(void) + { + mediump vec2 texCoord2 = qt_TexCoord0; + mediump vec2 origin = vec2(waveOriginX, (1.0 - waveOriginY) / aspectRatio); + + highp float fragmentDistance = distance(vec2(texCoord2.s, texCoord2.t / aspectRatio), origin); + highp float waveLength = waveWidth + fragmentDistance * 0.25; + + if ( fragmentDistance > wave && fragmentDistance < wave + waveLength) { + highp float distanceFromWaveEdge = min(abs(wave - fragmentDistance), abs(wave + waveLength - fragmentDistance)); + texCoord2 += sin(1.57075 * distanceFromWaveEdge / waveLength) * distanceFromWaveEdge * 0.08 / fragmentDistance; + } + + gl_FragColor = texture2D(source, texCoord2.st); + } + " +} diff --git a/examples/declarative/shadereffects/qml/Water.qml b/examples/declarative/shadereffects/qml/Water.qml new file mode 100755 index 0000000..8ad6c6a --- /dev/null +++ b/examples/declarative/shadereffects/qml/Water.qml @@ -0,0 +1,60 @@ +/**************************************************************************** +** +** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies). +** All rights reserved. +** Contact: Nokia Corporation (qt-info@nokia.com) +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:LGPL$ +** No Commercial Usage +** This file contains pre-release code and may not be distributed. +** You may use this file in accordance with the terms and conditions +** contained in the Technology Preview License Agreement accompanying +** this package. +** +** GNU Lesser General Public License Usage +** Alternatively, this file may be used under the terms of the GNU Lesser +** General Public License version 2.1 as published by the Free Software +** Foundation and appearing in the file LICENSE.LGPL included in the +** packaging of this file. Please review the following information to +** ensure the GNU Lesser General Public License version 2.1 requirements +** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html. +** +** In addition, as a special exception, Nokia gives you certain additional +** rights. These rights are described in the Nokia Qt LGPL Exception +** version 1.1, included in the file LGPL_EXCEPTION.txt in this package. +** +** If you have questions regarding the use of this file, please contact +** Nokia at qt-info@nokia.com. +** +** +** +** +** +** +** +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 1.0 +import Qt.labs.shaders 1.0 + +Item { + anchors.fill: parent + + Image { + id: image + width: parent.width + height: parent.height * 0.65 + source: "images/sky.jpg" + smooth: true + } + WaterEffect { + sourceItem: image + intensity: 5 + height: parent.height - image.height + } +} diff --git a/examples/declarative/shadereffects/qml/WaterEffect.qml b/examples/declarative/shadereffects/qml/WaterEffect.qml new file mode 100755 index 0000000..84989eb --- /dev/null +++ b/examples/declarative/shadereffects/qml/WaterEffect.qml @@ -0,0 +1,126 @@ +/**************************************************************************** +** +** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies). +** All rights reserved. +** Contact: Nokia Corporation (qt-info@nokia.com) +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:LGPL$ +** No Commercial Usage +** This file contains pre-release code and may not be distributed. +** You may use this file in accordance with the terms and conditions +** contained in the Technology Preview License Agreement accompanying +** this package. +** +** GNU Lesser General Public License Usage +** Alternatively, this file may be used under the terms of the GNU Lesser +** General Public License version 2.1 as published by the Free Software +** Foundation and appearing in the file LICENSE.LGPL included in the +** packaging of this file. Please review the following information to +** ensure the GNU Lesser General Public License version 2.1 requirements +** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html. +** +** In addition, as a special exception, Nokia gives you certain additional +** rights. These rights are described in the Nokia Qt LGPL Exception +** version 1.1, included in the file LGPL_EXCEPTION.txt in this package. +** +** If you have questions regarding the use of this file, please contact +** Nokia at qt-info@nokia.com. +** +** +** +** +** +** +** +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 1.0 +import Qt.labs.shaders 1.0 + +Item { + id: root + property alias sourceItem: effectsource.sourceItem + property real intensity: 1 + property bool waving: true + anchors.top: sourceItem.bottom + width: sourceItem.width + height: sourceItem.height + + ShaderEffectItem { + anchors.fill: parent + property variant source: effectsource + property real f: 0 + property real f2: 0 + property alias intensity: root.intensity + smooth: true + + ShaderEffectSource { + id: effectsource + hideSource: false + smooth: true + } + + fragmentShader: + " + varying highp vec2 qt_TexCoord0; + uniform sampler2D source; + uniform lowp float qt_Opacity; + uniform highp float f; + uniform highp float f2; + uniform highp float intensity; + + void main() { + const highp float twopi = 3.141592653589 * 2.0; + + highp float distanceFactorToPhase = pow(qt_TexCoord0.y + 0.5, 8.0) * 5.0; + highp float ofx = sin(f * twopi + distanceFactorToPhase) / 100.0; + highp float ofy = sin(f2 * twopi + distanceFactorToPhase * qt_TexCoord0.x) / 60.0; + + highp float intensityDampingFactor = (qt_TexCoord0.x + 0.1) * (qt_TexCoord0.y + 0.2); + highp float distanceFactor = (1.0 - qt_TexCoord0.y) * 4.0 * intensity * intensityDampingFactor; + + ofx *= distanceFactor; + ofy *= distanceFactor; + + highp float x = qt_TexCoord0.x + ofx; + highp float y = 1.0 - qt_TexCoord0.y + ofy; + + highp float fake = (sin((ofy + ofx) * twopi) + 0.5) * 0.05 * (1.2 - qt_TexCoord0.y) * intensity * intensityDampingFactor; + + highp vec4 pix = + texture2D(source, vec2(x, y)) * 0.6 + + texture2D(source, vec2(x-fake, y)) * 0.15 + + texture2D(source, vec2(x, y-fake)) * 0.15 + + texture2D(source, vec2(x+fake, y)) * 0.15 + + texture2D(source, vec2(x, y+fake)) * 0.15; + + highp float darken = 0.6 - (ofx - ofy) / 2.0; + pix.b *= 1.2 * darken; + pix.r *= 0.9 * darken; + pix.g *= darken; + + gl_FragColor = qt_Opacity * vec4(pix.r, pix.g, pix.b, 1.0); + } + " + + NumberAnimation on f { + running: root.waving + loops: Animation.Infinite + from: 0 + to: 1 + duration: 2410 + } + NumberAnimation on f2 { + running: root.waving + loops: Animation.Infinite + from: 0 + to: 1 + duration: 1754 + } + } +} diff --git a/examples/declarative/shadereffects/qml/images/Curtain.jpg b/examples/declarative/shadereffects/qml/images/Curtain.jpg new file mode 100755 index 0000000..40003cb Binary files /dev/null and b/examples/declarative/shadereffects/qml/images/Curtain.jpg differ diff --git a/examples/declarative/shadereffects/qml/images/DropShadow.jpg b/examples/declarative/shadereffects/qml/images/DropShadow.jpg new file mode 100755 index 0000000..c1e693a Binary files /dev/null and b/examples/declarative/shadereffects/qml/images/DropShadow.jpg differ diff --git a/examples/declarative/shadereffects/qml/images/Grayscale.jpg b/examples/declarative/shadereffects/qml/images/Grayscale.jpg new file mode 100755 index 0000000..c95cab4 Binary files /dev/null and b/examples/declarative/shadereffects/qml/images/Grayscale.jpg differ diff --git a/examples/declarative/shadereffects/qml/images/ImageMask.jpg b/examples/declarative/shadereffects/qml/images/ImageMask.jpg new file mode 100755 index 0000000..0da4c0d Binary files /dev/null and b/examples/declarative/shadereffects/qml/images/ImageMask.jpg differ diff --git a/examples/declarative/shadereffects/qml/images/RadialWave.jpg b/examples/declarative/shadereffects/qml/images/RadialWave.jpg new file mode 100755 index 0000000..fc51efc Binary files /dev/null and b/examples/declarative/shadereffects/qml/images/RadialWave.jpg differ diff --git a/examples/declarative/shadereffects/qml/images/Water.jpg b/examples/declarative/shadereffects/qml/images/Water.jpg new file mode 100755 index 0000000..38615c1 Binary files /dev/null and b/examples/declarative/shadereffects/qml/images/Water.jpg differ diff --git a/examples/declarative/shadereffects/qml/images/back.png b/examples/declarative/shadereffects/qml/images/back.png new file mode 100755 index 0000000..5dd3d22 Binary files /dev/null and b/examples/declarative/shadereffects/qml/images/back.png differ diff --git a/examples/declarative/shadereffects/qml/images/bg.jpg b/examples/declarative/shadereffects/qml/images/bg.jpg new file mode 100755 index 0000000..4d22143 Binary files /dev/null and b/examples/declarative/shadereffects/qml/images/bg.jpg differ diff --git a/examples/declarative/shadereffects/qml/images/desaturate.jpg b/examples/declarative/shadereffects/qml/images/desaturate.jpg new file mode 100755 index 0000000..e5e99bb Binary files /dev/null and b/examples/declarative/shadereffects/qml/images/desaturate.jpg differ diff --git a/examples/declarative/shadereffects/qml/images/drop_shadow.png b/examples/declarative/shadereffects/qml/images/drop_shadow.png new file mode 100755 index 0000000..144c02d Binary files /dev/null and b/examples/declarative/shadereffects/qml/images/drop_shadow.png differ diff --git a/examples/declarative/shadereffects/qml/images/fabric.jpg b/examples/declarative/shadereffects/qml/images/fabric.jpg new file mode 100755 index 0000000..ab65409 Binary files /dev/null and b/examples/declarative/shadereffects/qml/images/fabric.jpg differ diff --git a/examples/declarative/shadereffects/qml/images/flower.png b/examples/declarative/shadereffects/qml/images/flower.png new file mode 100755 index 0000000..144c02d Binary files /dev/null and b/examples/declarative/shadereffects/qml/images/flower.png differ diff --git a/examples/declarative/shadereffects/qml/images/image1.jpg b/examples/declarative/shadereffects/qml/images/image1.jpg new file mode 100755 index 0000000..3442e77 Binary files /dev/null and b/examples/declarative/shadereffects/qml/images/image1.jpg differ diff --git a/examples/declarative/shadereffects/qml/images/image2.jpg b/examples/declarative/shadereffects/qml/images/image2.jpg new file mode 100755 index 0000000..23e5c5c Binary files /dev/null and b/examples/declarative/shadereffects/qml/images/image2.jpg differ diff --git a/examples/declarative/shadereffects/qml/images/qt-logo.png b/examples/declarative/shadereffects/qml/images/qt-logo.png new file mode 100755 index 0000000..41a304b Binary files /dev/null and b/examples/declarative/shadereffects/qml/images/qt-logo.png differ diff --git a/examples/declarative/shadereffects/qml/images/shader_effects.jpg b/examples/declarative/shadereffects/qml/images/shader_effects.jpg new file mode 100755 index 0000000..19e8a39 Binary files /dev/null and b/examples/declarative/shadereffects/qml/images/shader_effects.jpg differ diff --git a/examples/declarative/shadereffects/qml/images/sky.jpg b/examples/declarative/shadereffects/qml/images/sky.jpg new file mode 100755 index 0000000..8fc19ed Binary files /dev/null and b/examples/declarative/shadereffects/qml/images/sky.jpg differ diff --git a/examples/declarative/shadereffects/qml/images/toolbar.png b/examples/declarative/shadereffects/qml/images/toolbar.png new file mode 100755 index 0000000..773e3ea Binary files /dev/null and b/examples/declarative/shadereffects/qml/images/toolbar.png differ diff --git a/examples/declarative/shadereffects/qml/images/wave.jpg b/examples/declarative/shadereffects/qml/images/wave.jpg new file mode 100755 index 0000000..c8083bb Binary files /dev/null and b/examples/declarative/shadereffects/qml/images/wave.jpg differ diff --git a/examples/declarative/shadereffects/qml/main.qml b/examples/declarative/shadereffects/qml/main.qml new file mode 100755 index 0000000..ee85570 --- /dev/null +++ b/examples/declarative/shadereffects/qml/main.qml @@ -0,0 +1,160 @@ +/**************************************************************************** +** +** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies). +** All rights reserved. +** Contact: Nokia Corporation (qt-info@nokia.com) +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:LGPL$ +** No Commercial Usage +** This file contains pre-release code and may not be distributed. +** You may use this file in accordance with the terms and conditions +** contained in the Technology Preview License Agreement accompanying +** this package. +** +** GNU Lesser General Public License Usage +** Alternatively, this file may be used under the terms of the GNU Lesser +** General Public License version 2.1 as published by the Free Software +** Foundation and appearing in the file LICENSE.LGPL included in the +** packaging of this file. Please review the following information to +** ensure the GNU Lesser General Public License version 2.1 requirements +** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html. +** +** In addition, as a special exception, Nokia gives you certain additional +** rights. These rights are described in the Nokia Qt LGPL Exception +** version 1.1, included in the file LGPL_EXCEPTION.txt in this package. +** +** If you have questions regarding the use of this file, please contact +** Nokia at qt-info@nokia.com. +** +** +** +** +** +** +** +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 1.0 +import Qt.labs.shaders 1.0 + +Item { + id: main + width: 360 + height: 640 + + Rectangle { + anchors.fill: parent + color: "black" + } + + Image { + id: header + source: "images/shader_effects.jpg" + } + + ListModel { + id: demoModel + ListElement { name: "ImageMask" } + ListElement { name: "RadialWave" } + ListElement { name: "Water" } + ListElement { name: "Grayscale" } + ListElement { name: "DropShadow" } + ListElement { name: "Curtain" } + } + + Grid { + id: menuGrid + anchors.top: header.bottom + anchors.bottom: toolbar.top + width: parent.width + columns: 2 + Repeater { + model: demoModel + Item { + width: main.width / 2 + height: menuGrid.height / 3 + clip: true + Image { + width: parent.width + height: width + source: "images/" + name + ".jpg" + opacity: mouseArea.pressed ? 0.6 : 1.0 + } + MouseArea { + id: mouseArea + anchors.fill: parent + onClicked: { + demoLoader.source = name + ".qml" + main.state = "showDemo" + } + } + } + } + } + + Loader { + anchors.fill: parent + id: demoLoader + visible: false + Behavior on opacity { + NumberAnimation { duration: 300 } + } + } + + Image { + id: toolbar + source: "images/toolbar.png" + width: parent.width + anchors.bottom: parent.bottom + } + + Rectangle { + id: translucentToolbar + color: "black" + opacity: 0.3 + anchors.fill: toolbar + visible: !toolbar.visible + } + + Item { + height: toolbar.height + width: height + anchors.bottom: parent.bottom + + Image { + source: "images/back.png" + anchors.centerIn: parent + } + + MouseArea { + anchors.fill: parent + onClicked: { + if (main.state == "") Qt.quit(); else { + main.state = "" + demoLoader.source = "" + } + } + } + } + + states: State { + name: "showDemo" + PropertyChanges { + target: menuGrid + visible: false + } + PropertyChanges { + target: demoLoader + visible: true + } + PropertyChanges { + target: toolbar + visible: false + } + } +} diff --git a/examples/declarative/shadereffects/shadereffects.pro b/examples/declarative/shadereffects/shadereffects.pro new file mode 100755 index 0000000..1107887 --- /dev/null +++ b/examples/declarative/shadereffects/shadereffects.pro @@ -0,0 +1,21 @@ +TEMPLATE = app +TARGET = shadereffects +DEPENDPATH += . +INCLUDEPATH += . +QT += declarative opengl + +# Input +SOURCES += main.cpp + +symbian { + DEFINES += SHADEREFFECTS_USE_OPENGL_GRAPHICSSYSTEM +} + + +target.path = $$[QT_INSTALL_EXAMPLES]/declarative/shadereffects +sources.files = $$SOURCES $$HEADERS $$RESOURCES $$FORMS shadereffects.pro +sources.path = $$[QT_INSTALL_EXAMPLES]/declarative/shadereffects +qmlfiles.files = qml +qmlfiles.path = $$[QT_INSTALL_EXAMPLES]/declarative/shadereffects + +INSTALLS += target sources qmlfiles -- cgit v0.12