Wiggly

Wiggly montre comment utiliser un effet de shader, créé avec l'Effect Maker d'Qt Quick (QQEM), dans votre application Qt Quick. Une interface utilisateur simple de type « Qt Quick » permet de modifier le texte ondulé et la taille de l'onde, ainsi que d'appliquer l'effet de nuage électrique.

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.

Principes de base de l’application

La majeure partie de l’exemple se trouve dans le fichier main.qml. Commencez par créer un élément qui servira de source à l’effet.

Rectangle {
    id: sourceItem
    anchors.centerIn: parent
    width: textItem.width + 60 * mainWindow.px
    height: textItem.height + 30 * mainWindow.px
    color: "#d0d0d0d0"
    border.color: "#d0ffffff"
    border.width: 4 * mainWindow.px
    radius: 20 * mainWindow.px
    layer.enabled: true
    layer.smooth: true
    visible: false
    Text {
        id: textItem
        anchors.centerIn: parent
        text: wigglyTextField.text
        font.family: font1.font.family
        font.pixelSize: Math.min(200 * mainWindow.px, 0.8 * mainWindow.width / text.length)
    }
}

Cet élément est un « Rectangle » contenant un élément « Text ». La taille du rectangle dépend du nombre de caractères du texte afin qu’il s’adapte parfaitement à la fenêtre de l’application. Les lignes importantes ici sont ` layer.enabled: true `, qui crée la texture hors écran pour l'effet, et `visible: false `, qui masque cet élément car l'effet remplacera son contenu. Si l'élément est visible, il se présente ainsi sans l'effet ondulant :

Créez ensuite la barre d’outils de paramètres permettant de contrôler l’effet.

TextField {
    id: wigglyTextField
    anchors.verticalCenter: parent.verticalCenter
    width: mainWindow.width * 0.3
    text: "Wiggly"
}
Slider {
    id: wigglyAmountYSlider
    anchors.verticalCenter: parent.verticalCenter
    width: mainWindow.width * 0.15
    from: 0
    to: 100
    value: 40
}
Slider {
    id: wigglyAmountXSlider
    anchors.verticalCenter: parent.verticalCenter
    width: mainWindow.width * 0.15
    from: 0
    to: 100
    value: 20
}
Switch {
    id: electricSwitch
    anchors.verticalCenter: parent.verticalCenter
}

Ces composants utilisent l’élément Qt Quick Controls, empilés à l’intérieur d’un élément « Row ». Le premier est un « TextField », que vous pouvez utiliser pour modifier le texte ondulant. Viennent ensuite des éléments « Slider » distincts, permettant de contrôler la taille de l’ondulation selon les coordonnées X et Y. Le dernier contrôle est un « Switch », qui permet d’activer l’effet de nuages électriques.

WigglyEffect {
    id: wigglyEffect
    source: sourceItem
    anchors.fill: sourceItem
    timeRunning: true
    wigglyAmountX: wigglyAmountXSlider.value
    wigglyAmountY: wigglyAmountYSlider.value
    electricCloudColor.a: electricSwitch.checked ? 1.0 : 0.0
    wigglyShadows: 0.5
}

Cet effet WigglyEffect est appliqué au sourceItem défini précédemment. Le code définit timeRunning sur « true » pour animer l’effet. Enfin, il relie certaines propriétés de l’effet de shader aux composants de contrôle.

Vous pouvez également consulter le fichier « WigglyEffect.qml » pour plus de détails sur l’effet. Cependant, ce fichier est généré par l’outil QQEM ; vous ne devez donc généralement pas le modifier manuellement. Utilisez plutôt l’outil « Qt Quick Effect Maker » comme indiqué dans la section suivante.

Modification de l’effet dans QQEM

Comme mentionné ci-dessus, l’effet WigglyEffect a été créé à l’aide de l’Effect Maker de Qt Quick. Pour plus d’informations sur l’installation de QQEM, consultez la documentation intitulée « Installation de l’Effect Maker de Qt Quick ».

Pour modifier les effets :

1. Ouvrez le fichier de projet d’effet (qep) dans l’outil QQEM.
2. Modifiez les nœuds de l’effet, ses propriétés ou le code du shader, puis visualisez l’aperçu en temps réel.
3. Lorsque vous êtes prêt, exportez l’effet modifié vers votre application.

Lorsque le projet « WigglyEffect/WigglyEffect.qep » est ouvert dans QQEM, vous devriez voir quelque chose comme ceci :

Sur le côté gauche, vous pouvez voir l'Node view avec les différents nœuds de cet effet. La vue en haut à droite correspond à l'Property view, avec les propriétés (API) de l'effet. Le coin inférieur droit affiche « Live view » de l’effet, avec l’élément de source d’aperçu actuellement sélectionné. Pour voir l’aperçu en direct avec le contenu réel, ajoutez l’image de l’ sourceItem à la liste des sources dans « Edit > Preferences » et sélectionnez-la dans la liste contextuelle de la barre d’outils d’aperçu.

Pour modifier le code du shader de l’effet « wiggly », double-cliquez sur le nœud Wiggly ou sélectionnez-le, puis passez du mode « DESIGN » au mode « CODE ». Sélectionnez ensuite l’onglet « VERT » pour afficher le shader de sommet, où se trouve la majeure partie du code de l’effet :

@mesh 63, 1
out vec3 wigglyColor;

float rainbowColor(float phase) {
    return abs(sin(texCoord.x * 2.0 + iTime + phase));
}

@main
{
    float wave = sin(vertCoord.x * 0.01 + iTime * 3.0);
    vertCoord.x += wigglyAmountX * wave;
    vertCoord.y += wigglyAmountY * wave;
    const float tau = 6.28318530718;
    wigglyColor.r = rainbowColor(0.0);
    wigglyColor.g = rainbowColor(1.0/3.0 * tau);
    wigglyColor.b = rainbowColor(2.0/3.0 * tau);
    float shadowAmount = (wigglyAmountX + wigglyAmountY) * wave;
    wigglyColor.rgb += shadowAmount * wigglyShadows * 0.01;
}

La première ligne définit la taille de la grille de maillage « ShaderEffect ». Cette étape est nécessaire, car par défaut, il n’y a des sommets qu’aux coins, alors que l’effet ondulé nécessite davantage de sommets mobiles. Ensuite, configurez le shader de sommets pour qu’il génère la variable « wigglyColor », qui sera utilisée ultérieurement dans le shader de fragments pour appliquer des ombres. Ensuite, on introduit une fonction appelée ` rainbowColor`, qui renvoie la couleur d’un seul canal à la phase.

Dans la méthode `main`, le code commence par définir l’ vertCoord pour faire varier les positions des sommets selon une onde sinusoïdale. Les lignes suivantes définissent les canaux rouge, vert et bleu de l’arc-en-ciel ondulé. Les deux dernières lignes appliquent ensuite un effet d’ombrage suivant la courbe de l’onde.

Sélectionnez ensuite l’onglet « FRAG » pour voir le code du shader de fragment :

@main
{
    fragColor.rgb *= wigglyColor * fragColor.a;
}

Le shader de fragment est très simple et se contente de multiplier la couleur source actuelle par l’ wigglyColor reçue du shader de sommet.

Une plus grande partie du traitement aurait pu être effectuée du côté du shader de fragment, mais le fait de placer le code dans le shader de sommet offre généralement de meilleures performances, car le nombre de sommets est nettement inférieur à celui des fragments (pixels). Certains outils, comme Shadertoy, ne permettent d’écrire qu’un shader de fragment. Mais comme Qt Quick et QQEM prennent également en charge les shaders de sommet personnalisés, vous devriez essayer d’en tirer parti.

Lorsque vous modifiez ces shaders, le résultat affiché par l’ Live view change instantanément. Pour utiliser le shader modifié dans l’application d’exemple, sélectionnez « File » > « Export » dans le menu.

Vous pouvez désormais explorer davantage les fonctionnalités de QQEM. Par exemple, ajoutez de nouveaux nœuds, modifiez ou ajoutez de nouvelles propriétés, utilisez ces propriétés dans le code du shader, etc. Voici un exemple du rendu obtenu avec le nœud « LedScreen » ajouté au début du graphe de nœuds :

Fichiers :

• wiggly/CMakeLists.txt
• wiggly/WigglyEffect/WigglyEffect.qml
• wiggly/main.cpp
• wiggly/main.qml
• wiggly/qml.qrc
• wiggly/wiggly.pro