Wiggly

Wiggly veranschaulicht, wie Sie einen mit dem „ Qt Quick Effect Maker “ (QQEM) erstellten Shader-Effekt in Ihrer „ Qt Quick “-Anwendung verwenden können. Über eine einfache Benutzeroberfläche mit „ Qt Quick “ können Sie den „Wiggly“-Text und die Wellengröße ändern sowie den „Electric Cloud“-Effekt anwenden.

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 “ über „ 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.

Grundlagen der Anwendung

Der Großteil des Beispiels ist in der Datei „main.qml“ enthalten und eingerichtet. Erstellen Sie zunächst ein Element, das als Quelle für den Effekt dient.

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

Das Element ist ein „ Rectangle “ mit einem „ Text “-Element im Inneren. Die Größe des Rechtecks hängt von der Anzahl der Zeichen im Text ab, damit es gut in das Anwendungsfenster passt. Die wichtigen Zeilen hier sind „layer.enabled: true“, wodurch die Offscreen-Textur für den Effekt erstellt wird, und „visible: false“, wodurch dieses Element ausgeblendet wird, da der Effekt dessen Inhalt ersetzt. Wenn das Element sichtbar ist, sieht es ohne den Wackeleffekt wie folgt aus:

Erstellen Sie als Nächstes die Einstellungs-Symbolleiste, mit der der Effekt gesteuert wird.

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
}

Diese Komponenten verwenden das Qt Quick Controls, die innerhalb eines „ Row “-Elements gestapelt sind. Das erste ist ein „ TextField “, mit dem Sie den welligen Text ändern können. Dann gibt es separate „ Slider “-Elemente zur Steuerung der Wellengröße in den X- und Y-Koordinaten. Das letzte Steuerelement ist ein „ Switch “, um den Effekt der elektrischen Wolken zu aktivieren.

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
}

Dieser „WigglyEffect“ wird auf das zuvor definierte „ sourceItem “ angewendet. Der Code setzt „ timeRunning “ auf „true“, um den Effekt zu animieren. Schließlich werden einige Eigenschaften des Shader-Effekts mit den Steuerungskomponenten verknüpft.

Weitere Details zum Effekt finden Sie auch in der Datei „ WigglyEffect.qml “. Da diese Datei jedoch vom QQEM-Tool erstellt wird, sollten Sie sie normalerweise nicht manuell ändern. Verwenden Sie stattdessen die „ Qt Quick Effect Maker “, wie im nächsten Abschnitt beschrieben.

Anpassen des Effekts in QQEM

Wie oben erwähnt, wurde der „WigglyEffect“ mithilfe der Datei „ Qt Quick Effect Maker “ erstellt. Weitere Informationen zur Installation von QQEM finden Sie in der Dokumentation „Installing Qt Quick Effect Maker “.

So ändern Sie die Effekte:

1. Öffnen Sie die Effekt-Projektdatei (qep) im QQEM-Tool.
2. Passen Sie die Effektknoten, Eigenschaften oder den Shader-Code an und sehen Sie sich die Live-Vorschau an.
3. Wenn Sie fertig sind, exportieren Sie den geänderten Effekt in Ihre Anwendung.

Wenn das Projekt „ WigglyEffect/WigglyEffect.qep “ in QQEM geöffnet ist, sollte etwa Folgendes zu sehen sein:

Auf der linken Seite sehen Sie den „ Node view “ mit verschiedenen Knoten dieses Effekts. Die Ansicht oben rechts ist „ Property view “ mit den Eigenschaften (API) des Effekts. In der unteren rechten Ecke wird „ Live view “ des Effekts angezeigt, mit dem aktuell ausgewählten Element für die Vorschauquelle. Um die Live-Vorschau mit dem tatsächlichen Inhalt zu sehen, fügen Sie das Bild „ sourceItem “ zur Quellenliste unter „ Edit > Preferences “ hinzu und wählen Sie es aus der Popup-Liste der Vorschau-Symbolleiste aus.

Um den Shader-Code für den Wiggly-Effekt zu ändern, doppelklicken Sie auf den Wiggly -Knoten oder wählen Sie ihn aus und wechseln Sie vom Modus „ DESIGN “ in den Modus „ CODE “. Wählen Sie anschließend die Registerkarte „ VERT “, um den Vertex-Shader anzuzeigen, in dem sich der Großteil des Effektcodes befindet:

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

Die erste Zeile legt die Größe des „ ShaderEffect “-Mesh-Gitters fest. Dies ist erforderlich, da standardmäßig nur in den Ecken Scheitelpunkte vorhanden sind und der Wiggly-Effekt mehr bewegliche Scheitelpunkte benötigt. Stellen Sie anschließend den Vertex-Shader so ein, dass er die Variable „ wigglyColor “ ausgibt, die später im Fragment-Shader zum Anwenden von Schatten verwendet wird. Als Nächstes wird eine Funktion namens „ rainbowColor “ eingeführt, die die Farbe eines einzelnen Kanals an der jeweiligen Phase zurückgibt.

Innerhalb der main-Methode legt der Code zunächst die „ vertCoord “ fest, um die Scheitelpunktpositionen in einer Sinuswelle zu verschieben. Die nächsten Zeilen legen die roten, grünen und blauen Kanäle des wellenförmigen Regenbogens fest. Die letzten beiden Zeilen wenden dann entsprechend der Welle einen Schatteneffekt an.

Wählen Sie als Nächstes die Registerkarte „ FRAG “ aus, um den Code des Fragment-Shaders anzuzeigen:

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

Der Fragment-Shader ist sehr einfach und multipliziert lediglich die aktuelle Quellfarbe mit dem vom Vertex-Shader empfangenen „ wigglyColor “.

Ein größerer Teil der Verarbeitung hätte auch auf der Seite des Fragment-Shaders erfolgen können, doch ist es in der Regel leistungsfähiger, den Code im Vertex-Shader zu haben, da die Anzahl der Scheitelpunkte deutlich geringer ist als die Anzahl der Fragmente (Pixel). Einige Tools, wie beispielsweise Shadertoy, erlauben nur das Schreiben eines Fragment-Shaders. Da Qt Quick und QQEM jedoch auch benutzerdefinierte Vertex-Shader unterstützen, solltest du versuchen, diese zu nutzen.

Wenn du diese Shader änderst, ändert sich die Ausgabe des „ Live view “ sofort. Um den geänderten Shader in der Beispielanwendung zu verwenden, wähle im Menü „ File “ > „ Export “.

Sie können nun weiter mit den Funktionen von QQEM experimentieren. Fügen Sie beispielsweise neue Knoten hinzu, ändern oder fügen Sie neue Eigenschaften hinzu, nutzen Sie diese Eigenschaften im Shader-Code und so weiter. Hier ist ein Beispiel dafür, wie der Effekt aussieht, wenn der Knoten „ LedScreen “ am Anfang des Knotendiagramms hinzugefügt wird:

Dateien:

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