Qt Quick Beispiele – Shader-Effekte

Dieses Beispiel veranschaulicht einige visuelle Effekte, die Sie mit Shadern in „ Qt Quick “ erzielen können. Es wendet fünf verschiedene Effekte auf einen Text und einige Bilder an. Weitere Informationen finden Sie unter „Wichtige Konzepte in Qt Quick “ – Graphical Effects

Ausführen des Beispiels

Sie können das Beispiel wie folgt ausführen:

• Qt Creator

  Öffnen Sie den Modus „ Welcome “ und wählen Sie das Beispiel unter „ Examples “ aus. Weitere Informationen finden Sie unter Qt Creator: Tutorial: Erstellen und Ausführen.

• Qt Extension for Visual Studio Code

  Führen Sie den Befehl „ Qt: Open Qt examples “ aus dem Verzeichnis „ Command Palette “ aus und wählen Sie das Beispiel aus der Liste aus. Weitere Informationen finden Sie unter Qt Extension for Visual Studio Code: Tutorial: Erstellen und Ausführen.

Verwendung von ShaderEffect

Der Typ „ ShaderEffect “ wird in der Regel auf andere Typen angewendet, wobei ein „ ShaderEffectSource “ verwendet wird:

ShaderEffectSource {
    id: theSource
    sourceItem: theItem
}

Im obigen Codeausschnitt ist ` theItem ` die ID eines komplexen QML-Objekts in der Datei.

ShaderEffects können diesen „ ShaderEffectSource “ als Textur in ihrem Fragment-Shader verwenden:

fragmentShader: "content/shaders/wobble.frag.qsb"

Um nicht nur OpenGL, sondern mehrere Grafik-APIs zu unterstützen, wird der Shader-Quellcode nicht in QML eingebettet. Die referenzierte Datei „ .qsb “ ist ein vorab generiertes Shader-Paket, das mehrere Varianten des Shader-Codes enthält. Der passende Shader wird dann zur Laufzeit von „ Qt Quick “ ausgewählt, abhängig von der zur Laufzeit verwendeten Grafik-API (Vulkan, Metal, Direct3D 11 oder OpenGL). Die .qsb-Datei wird offline generiert und über das Qt-Ressourcensystem mit der ausführbaren Datei gebündelt.

Sie können in Ihrem Shader beliebige benutzerdefinierte Eigenschaften des „ ShaderEffect “ verwenden. Dies macht animierten Shader-Code sehr einfach:

property variant source: theSource
property real bend
property real minimize
property real side: genieSlider.value
SequentialAnimation on bend {
    loops: Animation.Infinite
    NumberAnimation { to: 1; duration: 700; easing.type: Easing.InOutSine }
    PauseAnimation { duration: 1600 }
    NumberAnimation { to: 0; duration: 700; easing.type: Easing.InOutSine }
    PauseAnimation { duration: 1000 }
}
SequentialAnimation on minimize {
    loops: Animation.Infinite
    PauseAnimation { duration: 300 }
    NumberAnimation { to: 1; duration: 700; easing.type: Easing.InOutSine }
    PauseAnimation { duration: 1000 }
    NumberAnimation { to: 0; duration: 700; easing.type: Easing.InOutSine }
    PauseAnimation { duration: 1300 }
}

„ShaderEffects“ können auch einen benutzerdefinierten Vertex-Shader enthalten. Durch das Setzen der Mesh-Eigenschaft auf „ ShaderEffect “ stehen Ihnen mehr Vertices zur Bearbeitung zur Verfügung, was weitere Effekte ermöglicht.

mesh: Qt.size(10, 10)
vertexShader: "content/shaders/genie.vert.qsb"

Beispielprojekt @ code.qt.io