diff options
author | Venugopal Shivashankar <Venugopal.Shivashankar@qt.io> | 2020-11-23 09:51:37 +0100 |
---|---|---|
committer | Venugopal Shivashankar <Venugopal.Shivashankar@qt.io> | 2020-11-24 23:19:11 +0100 |
commit | 533149baa2af1c1b37346ec49352421a1e17b717 (patch) | |
tree | 3a6eba5642ac45b3d80fda8112b8ce167a9cbfba /examples | |
parent | 29a8cbf3edc9bd19271d398986d4143ceb7d964b (diff) |
Example: Move the shader code out of QML
In Qt 6, the fragment and vertex shader
programs have to be compiled into a package
using the shader tool offered. These packages
can then be added to the application's resource
and referred to using its relative URL.
In addition, addressed a few warnings
reported by Qt Creator.
Change-Id: Ic49f514d617182d21433d71bb3d18030667baeff
Reviewed-by: Topi Reiniƶ <topi.reinio@qt.io>
Reviewed-by: Laszlo Agocs <laszlo.agocs@qt.io>
Diffstat (limited to 'examples')
-rw-r--r-- | examples/demos/tweetsearch/CMakeLists.txt | 6 | ||||
-rw-r--r-- | examples/demos/tweetsearch/content/FlipBar.qml | 44 | ||||
-rw-r--r-- | examples/demos/tweetsearch/content/ListFooter.qml | 2 | ||||
-rw-r--r-- | examples/demos/tweetsearch/content/TweetDelegate.qml | 4 | ||||
-rw-r--r-- | examples/demos/tweetsearch/content/TweetsModel.qml | 10 | ||||
-rw-r--r-- | examples/demos/tweetsearch/content/shaders/compile.bat | 52 | ||||
-rw-r--r-- | examples/demos/tweetsearch/content/shaders/effect.frag | 28 | ||||
-rw-r--r-- | examples/demos/tweetsearch/content/shaders/effect.frag.qsb | bin | 0 -> 2132 bytes | |||
-rw-r--r-- | examples/demos/tweetsearch/content/shaders/effect.vert | 26 | ||||
-rw-r--r-- | examples/demos/tweetsearch/content/shaders/effect.vert.qsb | bin | 0 -> 2571 bytes | |||
-rw-r--r-- | examples/demos/tweetsearch/tweetsearch.pro | 6 | ||||
-rw-r--r-- | examples/demos/tweetsearch/tweetsearch.qml | 6 |
12 files changed, 135 insertions, 49 deletions
diff --git a/examples/demos/tweetsearch/CMakeLists.txt b/examples/demos/tweetsearch/CMakeLists.txt index 7ba34ee84..2e648e31d 100644 --- a/examples/demos/tweetsearch/CMakeLists.txt +++ b/examples/demos/tweetsearch/CMakeLists.txt @@ -52,9 +52,13 @@ set(qmake_content_resource_files "content/resources/icon-search.png" "content/tweetsearch.mjs" "tweetsearch.qml" + "content/shaders/effect.frag" + "content/shaders/effect.frag.qsb" + "content/shaders/effect.vert" + "content/shaders/effect.vert.qsb" ) -qt6_add_resources(tweetsearch "qmake_content" +qt6_add_resources(tweetsearch "qml_and_shader_content" PREFIX "/demos/tweetsearch" FILES diff --git a/examples/demos/tweetsearch/content/FlipBar.qml b/examples/demos/tweetsearch/content/FlipBar.qml index 608f5cc08..04ac8d4f1 100644 --- a/examples/demos/tweetsearch/content/FlipBar.qml +++ b/examples/demos/tweetsearch/content/FlipBar.qml @@ -89,7 +89,7 @@ Item { effect.visible = true; effect.sourceA = effect.source1 effect.sourceB = effect.source2 - if (start == undefined) + if (start === undefined) start = 1.0; deltaAnim.from = start; deltaAnim.to = 0.0 @@ -101,7 +101,7 @@ Item { effect.visible = true; effect.sourceA = effect.source1 effect.sourceB = effect.source2 - if (start == undefined) + if (start === undefined) start = 0.0; deltaAnim.from = start; deltaAnim.to = 1.0 @@ -139,45 +139,9 @@ Item { hideSource: effect.visible } - fragmentShader: " - uniform lowp float qt_Opacity; - uniform sampler2D sourceA; - uniform sampler2D sourceB; - uniform highp float delta; - varying highp vec2 qt_TexCoord0; - void main() { - highp vec4 tex = vec4(qt_TexCoord0.x, qt_TexCoord0.y * 2.0, qt_TexCoord0.x, (qt_TexCoord0.y-0.5) * 2.0); - highp float shade = clamp(delta*2.0, 0.5, 1.0); - highp vec4 col; - if (qt_TexCoord0.y < 0.5) { - col = texture2D(sourceA, tex.xy) * (shade); - } else { - col = texture2D(sourceB, tex.zw) * (1.5 - shade); - col.w = 1.0; - } - gl_FragColor = col * qt_Opacity; - } - " + fragmentShader: "shaders/effect.frag.qsb" property real h: height - vertexShader: " - uniform highp float delta; - uniform highp float factor; - uniform highp float h; - uniform highp mat4 qt_Matrix; - attribute highp vec4 qt_Vertex; - attribute highp vec2 qt_MultiTexCoord0; - varying highp vec2 qt_TexCoord0; - void main() { - highp vec4 pos = qt_Vertex; - if (qt_MultiTexCoord0.y == 0.0) - pos.x += factor * (1. - delta) * (qt_MultiTexCoord0.x * -2.0 + 1.0); - else if (qt_MultiTexCoord0.y == 1.0) - pos.x += factor * (delta) * (qt_MultiTexCoord0.x * -2.0 + 1.0); - else - pos.y = delta * h; - gl_Position = qt_Matrix * pos; - qt_TexCoord0 = qt_MultiTexCoord0; - }" + vertexShader: "shaders/effect.vert.qsb" } } diff --git a/examples/demos/tweetsearch/content/ListFooter.qml b/examples/demos/tweetsearch/content/ListFooter.qml index b84496d4c..40e9467c4 100644 --- a/examples/demos/tweetsearch/content/ListFooter.qml +++ b/examples/demos/tweetsearch/content/ListFooter.qml @@ -57,7 +57,7 @@ Rectangle { z: 2 Connections { target: mainListView - onAutoSearch: { + function onAutoSearch() { if (type == 'tag') { tagSearch.open() tagSearch.searchText = str diff --git a/examples/demos/tweetsearch/content/TweetDelegate.qml b/examples/demos/tweetsearch/content/TweetDelegate.qml index dfcb3dc7f..3b975f800 100644 --- a/examples/demos/tweetsearch/content/TweetDelegate.qml +++ b/examples/demos/tweetsearch/content/TweetDelegate.qml @@ -94,11 +94,12 @@ Item { id: placeHolder source: "resources/anonymous.png" x: 10; y: 9 - visible: avatar.status != Image.Ready + visible: avatar.status !== Image.Ready } Image { id: avatar + asynchronous: true source: model.userImage anchors.fill: placeHolder MouseArea { @@ -161,6 +162,7 @@ Item { Image { id: avatar2 + asynchronous: true source: model.userImage anchors.right: parent.right anchors.rightMargin: 10 diff --git a/examples/demos/tweetsearch/content/TweetsModel.qml b/examples/demos/tweetsearch/content/TweetsModel.qml index f2de931a4..d4edbf105 100644 --- a/examples/demos/tweetsearch/content/TweetsModel.qml +++ b/examples/demos/tweetsearch/content/TweetsModel.qml @@ -75,7 +75,7 @@ Item { function reload() { tweets.clear() - if (from == "" && phrase == "") + if (from === "" && phrase === "") return; //! [requesting] @@ -90,7 +90,13 @@ Item { } else { for (var key in objectArray.statuses) { var jsonObject = objectArray.statuses[key]; - tweets.append(jsonObject); + var cleanJsonObject = {}; + // iterate through the json objects + // and drop those with 'null' values. + for (var subkey in jsonObject) + if (jsonObject[subkey] !== null) + cleanJsonObject[subkey] = jsonObject[subkey] + tweets.append(cleanJsonObject); } } wrapper.isLoaded() diff --git a/examples/demos/tweetsearch/content/shaders/compile.bat b/examples/demos/tweetsearch/content/shaders/compile.bat new file mode 100644 index 000000000..c4211f274 --- /dev/null +++ b/examples/demos/tweetsearch/content/shaders/compile.bat @@ -0,0 +1,52 @@ +::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: +:: +:: Copyright (C) 2020 The Qt Company Ltd. +:: Contact: https://www.qt.io/licensing/ +:: +:: This file is part of the examples of the Qt Toolkit. +:: +:: $QT_BEGIN_LICENSE:BSD$ +:: Commercial License Usage +:: Licensees holding valid commercial Qt licenses may use this file in +:: accordance with the commercial license agreement provided with the +:: Software or, alternatively, in accordance with the terms contained in +:: a written agreement between you and The Qt Company. For licensing terms +:: and conditions see https://www.qt.io/terms-conditions. For further +:: information use the contact form at https://www.qt.io/contact-us. +:: +:: BSD License Usage +:: Alternatively, you may use this file under the terms of the BSD license +:: as follows: +:: +:: "Redistribution and use in source and binary forms, with or without +:: modification, are permitted provided that the following conditions are +:: met: +:: * Redistributions of source code must retain the above copyright +:: notice, this list of conditions and the following disclaimer. +:: * Redistributions in binary form must reproduce the above copyright +:: notice, this list of conditions and the following disclaimer in +:: the documentation and/or other materials provided with the +:: distribution. +:: * Neither the name of The Qt Company Ltd nor the names of its +:: contributors may be used to endorse or promote products derived +:: from this software without specific prior written permission. +:: +:: +:: THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +:: "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +:: LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +:: A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +:: OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +:: SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +:: LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +:: DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +:: THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +:: (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +:: OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +:: +:: $QT_END_LICENSE$ +:: +::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: + +qsb --glsl "150,120,100 es" --hlsl 50 --msl 12 -c -o effect.frag.qsb effect.frag +qsb -b --glsl "150,120,100 es" --hlsl 50 --msl 12 -c -o effect.vert.qsb effect.vert diff --git a/examples/demos/tweetsearch/content/shaders/effect.frag b/examples/demos/tweetsearch/content/shaders/effect.frag new file mode 100644 index 000000000..63017e8ad --- /dev/null +++ b/examples/demos/tweetsearch/content/shaders/effect.frag @@ -0,0 +1,28 @@ +#version 440 + + + +layout(location = 0) in vec2 qt_TexCoord0; +layout(location = 0) out vec4 fragColor; + +layout(binding = 1) uniform sampler2D sourceA; +layout(binding = 2) uniform sampler2D sourceB; + +layout(std140, binding = 0) uniform buf { + mat4 qt_Matrix; + float qt_Opacity; + float delta; +}; + +void main() { + vec4 tex = vec4(qt_TexCoord0.x, qt_TexCoord0.y * 2.0, qt_TexCoord0.x, (qt_TexCoord0.y-0.5) * 2.0); + float shade = clamp(delta*2.0, 0.5, 1.0); + vec4 col; + if (qt_TexCoord0.y < 0.5) { + col = texture(sourceA, tex.xy) * (shade); + } else { + col = texture(sourceB, tex.zw) * (1.5 - shade); + col.w = 1.0; + } + fragColor = col * qt_Opacity; +} diff --git a/examples/demos/tweetsearch/content/shaders/effect.frag.qsb b/examples/demos/tweetsearch/content/shaders/effect.frag.qsb Binary files differnew file mode 100644 index 000000000..91a5c326e --- /dev/null +++ b/examples/demos/tweetsearch/content/shaders/effect.frag.qsb diff --git a/examples/demos/tweetsearch/content/shaders/effect.vert b/examples/demos/tweetsearch/content/shaders/effect.vert new file mode 100644 index 000000000..c56751427 --- /dev/null +++ b/examples/demos/tweetsearch/content/shaders/effect.vert @@ -0,0 +1,26 @@ +#version 440 + +layout(location = 0) in vec4 qt_Vertex; +layout(location = 1) in vec2 qt_MultiTexCoord0; +layout(location = 0) out vec2 qt_TexCoord0; + +layout(std140, binding = 0) uniform buf { + mat4 qt_Matrix; + float qt_Opacity; + float delta; + float h; + float factor; +}; + + +void main() { + vec4 pos = qt_Vertex; + if (qt_MultiTexCoord0.y == 0.0) + pos.x += factor * (1. - delta) * (qt_MultiTexCoord0.x * -2.0 + 1.0); + else if (qt_MultiTexCoord0.y == 1.0) + pos.x += factor * (delta) * (qt_MultiTexCoord0.x * -2.0 + 1.0); + else + pos.y = delta * h; + gl_Position = qt_Matrix * pos; + qt_TexCoord0 = qt_MultiTexCoord0; +} diff --git a/examples/demos/tweetsearch/content/shaders/effect.vert.qsb b/examples/demos/tweetsearch/content/shaders/effect.vert.qsb Binary files differnew file mode 100644 index 000000000..23df5ca55 --- /dev/null +++ b/examples/demos/tweetsearch/content/shaders/effect.vert.qsb diff --git a/examples/demos/tweetsearch/tweetsearch.pro b/examples/demos/tweetsearch/tweetsearch.pro index 3995a15f6..49fa7d7d4 100644 --- a/examples/demos/tweetsearch/tweetsearch.pro +++ b/examples/demos/tweetsearch/tweetsearch.pro @@ -19,7 +19,11 @@ content.files = \ content/resources/icon-clear.png \ content/resources/icon-loading.png \ content/resources/icon-refresh.png \ - content/resources/icon-search.png + content/resources/icon-search.png \ + content/shaders/effect.frag \ + content/shaders/effect.frag.qsb \ + content/shaders/effect.vert \ + content/shaders/effect.vert.qsb RESOURCES += content diff --git a/examples/demos/tweetsearch/tweetsearch.qml b/examples/demos/tweetsearch/tweetsearch.qml index 82a95c9f2..d9508ad99 100644 --- a/examples/demos/tweetsearch/tweetsearch.qml +++ b/examples/demos/tweetsearch/tweetsearch.qml @@ -63,7 +63,7 @@ Rectangle { property var idx property var ids - Component.onCompleted: ids = new Array() + Component.onCompleted: ids = [] function idInModel(id) { @@ -77,7 +77,7 @@ Rectangle { id: tweetsModel onIsLoaded: { console.debug("Reload") - idx = new Array() + idx = [] for (var i = 0; i < tweetsModel.model.count; i++) { var id = tweetsModel.model.get(i).id if (!idInModel(id)) @@ -128,7 +128,7 @@ Rectangle { footer: ListFooter { } function clear() { - ids = new Array() + ids = [] model.clear() } |