| /**************************************************************************** |
| ** |
| ** Copyright (C) 2017 The Qt Company Ltd. |
| ** Contact: https://www.qt.io/licensing/ |
| ** |
| ** This file is part of the documentation of the Qt Toolkit. |
| ** |
| ** $QT_BEGIN_LICENSE:FDL$ |
| ** 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. |
| ** |
| ** GNU Free Documentation License Usage |
| ** Alternatively, this file may be used under the terms of the GNU Free |
| ** Documentation License version 1.3 as published by the Free Software |
| ** Foundation and appearing in the file included in the packaging of |
| ** this file. Please review the following information to ensure |
| ** the GNU Free Documentation License version 1.3 requirements |
| ** will be met: https://www.gnu.org/licenses/fdl-1.3.html. |
| ** $QT_END_LICENSE$ |
| ** |
| ****************************************************************************/ |
| /*! |
| \title Qt Quick Examples - Shader Effects |
| \example shadereffects |
| \image qml-shadereffects-example.png |
| \brief A Qt Quick example demonstrating the use of shader effects. |
| \ingroup qtquickexamples |
| |
| This example demonstrates a couple of visual effects that you can perform |
| with shaders in Qt Quick. It applies five different effects on a text and |
| a couple of images. For more information, visit |
| \l{Important Concepts In Qt Quick - Graphical Effects} |
| |
| \include examples-run.qdocinc |
| |
| \section1 Using ShaderEffect |
| |
| The \l ShaderEffect type typically operates on other types, using a |
| \l ShaderEffectSource: |
| \snippet shadereffects/shadereffects.qml source |
| |
| In the above snippet, \c theItem is the ID of a complex QML object in the |
| file. |
| |
| ShaderEffects can use this ShaderEffectSource as a texture in their fragment |
| shader: |
| \snippet shadereffects/shadereffects.qml fragment |
| |
| In order to support multiple graphics APIs, not just OpenGL, the shader |
| source is not embedded into QML. When running with the graphics API |
| independent scene graph, the actual file in use is a pre-generated shader |
| pack containing multiple variants of the shader code. The appropriate |
| shader is then chosen by Qt Quick, regardless of running on Vulkan, Metal, |
| Direct 3D, or OpenGL. Qt automatically selects the file under the \c qsb |
| selector, for example \c{shaders/+qsb/wobble.frag}, when present. |
| |
| On the traditional code path, which can mean using OpenGL or Direct3D 12, |
| file selectors are used to select the correct variant at runtime. Based on |
| the Qt Quick backend in use, Qt will automatically select either |
| \c{shaders/wobble.frag} with the GLSL source code or |
| \c{shaders/+hlsl/wobble.frag} with the HLSL source code. |
| |
| \note For simplicity shader source code is used in all variants of the |
| files. However, with the Direct3D backend of Qt Quick pre-compiled shaders |
| are also supported. For example, try the following commands in the |
| \c{content/shaders/+hlsl} directory: \c{move wobble.frag wobble.frag.src} |
| followed by \c{fxc /E main /T ps_5_0 /Fo wobble.frag wobble.frag.src}. Now |
| \c wobble.frag contains Direct3D bytecode and that is what gets shipped |
| with the application instead of the shader source. Further changes are not |
| necessary, the application will function like before. |
| |
| You can use any custom property on the ShaderEffect in your shader. This |
| makes animated shader code very easy: |
| \snippet shadereffects/shadereffects.qml properties |
| |
| ShaderEffects can also have a custom vertext shader. Setting the mesh |
| property on ShaderEffect provides more vertices for you to manipulate, |
| enabling more effects. |
| \snippet shadereffects/shadereffects.qml vertex |
| */ |