Wiggly

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

Exécution de l'exemple

Pour exécuter l'exemple à partir de Qt Creatorouvrez le mode Welcome et sélectionnez l'exemple à partir de Examples. Pour plus d'informations, voir Qt Creator: Tutoriel : Construire et exécuter.

Principes de base de l'application

La majeure partie de l'exemple est contenue et configurée dans le fichier main.qml. Tout d'abord, créez un élément qui servira de source pour 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)
    }
}

L'élément est un Rectangle avec un élément Text à l'intérieur. La taille du rectangle dépend du nombre de caractères du texte pour qu'il s'intègre bien dans 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 cache cet élément car l'effet remplacera son contenu. Si l'élément est visible, il ressemble à ceci sans l'effet ondulé :

Créez ensuite la barre d'outils de paramétrage utilisée pour 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 les contrôlesQt Quick , empilés à l'intérieur d'un élément Row. Le premier est un élément TextField, que vous pouvez utiliser pour modifier le texte ondulé. Il y a ensuite des éléments Slider distincts, pour contrôler la taille de la vague en coordonnées X et Y. Le dernier contrôle est un élément 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 site sourceItem défini précédemment. Le code attribue la valeur true à timeRunning pour animer l'effet. Enfin, il relie certaines propriétés de l'effet d'ombrage aux composants de contrôle.

Vous pouvez également consulter le fichier WigglyEffect.qml pour obtenir des détails sur l'effet. Mais ce fichier est créé par l'outil QQEM, vous ne devriez donc pas le modifier manuellement. Utilisez plutôt l'outil Qt Quick Effect Maker comme indiqué dans la section suivante.

Modifier l'effet dans QQEM

Comme indiqué ci-dessus, l'effet WigglyEffect a été créé à l'aide de l'outil de création d'effets Qt Quick. Pour plus d'informations sur l'installation de QQEM, voir la documentation Installing Qt Quick Effect Maker.

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, les propriétés ou le code du shader et visualisez l'aperçu en direct.
3. Lorsque vous êtes prêt, exportez l'effet modifié dans 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 le site Node view avec les différents nœuds de cet effet. La vue en haut à droite est 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 source de prévisualisation actuellement sélectionné. Pour voir l'aperçu en direct avec le contenu réel, ajoutez l'image de sourceItem à la liste des sources dans Edit > Preferences et sélectionnez-la dans la liste déroulante de la barre d'outils d'aperçu.

Pour modifier le code du shader pour l'effet ondulé, double-cliquez sur le nœud Wiggly ou sélectionnez-le et passez du mode DESIGN au mode CODE. Sélectionnez ensuite l'onglet VERT pour voir le vertex shader, 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 du maillage ShaderEffect. C'est nécessaire, car par défaut, il n'y a des sommets que dans les coins et l'effet ondulé nécessite plus de sommets mobiles. Ensuite, le vertex shader sort la variable wigglyColor, qui sera utilisée plus tard dans le fragment shader pour appliquer une ombre. Ensuite, introduisez une fonction appelée rainbowColor, qui renvoie la couleur d'un seul canal à la phase.

Dans la méthode principale, le code définit d'abord vertCoord pour déplacer les positions des vertex dans 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 ombrage à la suite de la vague.

Sélectionnez ensuite l'onglet FRAG pour voir le code du fragment shader :

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

Le fragment shader est très simple et ne fait que multiplier la couleur source actuelle avec le wigglyColor reçu du vertex shader.

Une plus grande partie du traitement aurait pu être effectuée du côté du fragment shader, mais le fait d'avoir le code dans le vertex shader est généralement plus performant car le nombre de sommets est nettement inférieur au nombre de fragments (pixels). Certains outils, comme Shader Tools, ne permettent d'écrire qu'un fragment shader. Mais comme Qt Quick et QQEM prennent également en charge les vertex shaders personnalisés, vous devriez essayer d'en tirer parti.

Lorsque vous modifiez ces shaders, la sortie du site Live view change instantanément. Pour utiliser le nuanceur modifié dans l'application d'exemple, sélectionnez File > Export dans le menu.

Vous pouvez maintenant jouer davantage avec 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 nuanceur, etc. Voici un exemple de l'effet 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