Qt Quick Exemples - Effets de shader

Cet exemple présente quelques effets visuels que vous pouvez créer à l'aide des shaders dans Qt Quick. Il applique cinq effets différents à un texte et à quelques images. Pour plus d'informations, consultez la section « Concepts importants dans Qt Quick » - Graphical Effects

Exécution de l’exemple

Vous pouvez exécuter l’exemple à partir de :

• Qt Creator

  Ouvrez le mode « Welcome » et sélectionnez l’exemple dans Examples. Pour plus d’informations, consultez Qt Creator: Tutoriel : Compiler et exécuter.

• Qt Extension for Visual Studio Code

  Exécutez la commande « Qt: Open Qt examples » à partir de Command Palette, puis sélectionnez l’exemple dans la liste. Pour plus d’informations, consultez Qt Extension for Visual Studio Code: Tutoriel : Compiler et exécuter.

Utilisation de ShaderEffect

Le type ` ShaderEffect ` opère généralement sur d’autres types, à l’aide d’un ` ShaderEffectSource` :

ShaderEffectSource {
    id: theSource
    sourceItem: theItem
}

Dans l’extrait de code ci-dessus, theItem correspond à l’identifiant d’un objet QML complexe présent dans le fichier.

Les ShaderEffects peuvent utiliser cet ShaderEffectSource comme texture dans leur shader de fragment :

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

Afin de prendre en charge plusieurs API graphiques, et pas seulement OpenGL, le code source du shader n’est pas intégré dans le QML. Le fichier .qsb référencé est un pack de shaders pré-généré contenant plusieurs variantes du code du shader. Qt Quick ensuite le shader approprié au moment de l’exécution, en fonction de l’API graphique (Vulkan, Metal, Direct3D 11 ou OpenGL) utilisée à ce moment-là. Le fichier .qsb est généré hors ligne et intégré à l’exécutable via le système de ressources Qt.

Vous pouvez utiliser n’importe quelle propriété personnalisée de l’ ShaderEffect dans votre shader. Cela facilite grandement la création de code de shader animé :

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 }
}

Les ShaderEffects peuvent également disposer d’un shader de sommets personnalisé. La définition de la propriété « mesh » sur l’ ShaderEffect vous fournit davantage de sommets à manipuler, ce qui permet de créer davantage d’effets.

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

Exemple de projet sur code.qt.io