Qt Quick Exemples - Effets d'ombrage

Cet exemple présente quelques effets visuels que vous pouvez réaliser avec les shaders dans Qt Quick. Il applique cinq effets différents à un texte et à quelques images. Pour plus d'informations, consultez la page Concepts importants à l'adresse Qt Quick. Graphical Effects

Exécution de l'exemple

Pour exécuter l'exemple à partir de Qt CreatorOuvrez le mode Welcome et sélectionnez l'exemple de Examples. Pour plus d'informations, voir Qt Creator: Tutoriel : Construire 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 ci-dessus, theItem est l'ID d'un objet QML complexe dans le fichier.

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

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

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

Vous pouvez utiliser n'importe quelle propriété personnalisée sur le site ShaderEffect dans votre shader. Cela rend le code des shaders animés très facile :

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 avoir un vertext shader personnalisé. En définissant la propriété mesh sur ShaderEffect, vous disposez d'un plus grand nombre de vertices à manipuler, ce qui vous permet d'obtenir davantage d'effets.

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

Exemple de projet @ code.qt.io