Qt 3D: QML-Beispiel für Wireframes

Qt 3D Das Wireframe-Rendering veranschaulicht, wie ein einzelnes Objekt (ein Kleeblattknoten) mithilfe eines benutzerdefinierten Satzes von Shadern gezeichnet wird, um eine Single-Pass-Wireframe-Rendering-Methode zu implementieren.

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.

Erstellen von Entitäten

Der Renderer sucht nach Entitäten, die über eine Geometrie, ein Material und optional eine Transformation verfügen. Diese werden alle in Form von Unterklassen von `QComponent` spezifiziert, die als ` Mesh`, ` Material` und ` Transform` in die QML-Engine exportiert wurden. Wir verwenden diese Komponenten, um ein benutzerdefiniertes QML-Element in `TrefoilKnot.qml` zu erstellen.

Zunächst importieren wir das Modul „ Qt3D 2.0 “, das den Typ „ Entity “ sowie Wert-Helfer wie beispielsweise „Qt.vector3d()“ bereitstellt. Außerdem importieren wir das Modul „ Qt3D.Renderer “, das die Komponenten und andere Typen bereitstellt, die vom Renderer-Aspekt verwendet werden:

import Qt3D.Core 2.0
import Qt3D.Render 2.0

Um Komponenten aus anderen Aspekten zu verwenden, müssten wir auch das entsprechende QML-Modul importieren.

Anschließend verwenden wir einen Typ vom Typ „ Entity “ als Stammelement des benutzerdefinierten QML-Typs, der einige benutzerdefinierte Eigenschaften bereitstellt, genau wie bei jedem anderen Typ in QML:

Entity {
    id: root

    property real x: 0.0
    property real y: 0.0
    property real z: 0.0
    property real scale: 1.0
    property real theta: 0.0
    property real phi: 0.0
    property Material material

Neben der Aggregation von Komponenten kann der Typ „ Entity “ auch zum Gruppieren von untergeordneten Objekten verwendet werden. Dies entspricht der Verwendung des Typs „ Item “ in „ Qt Quick 2“.

Festlegen von Transformationen

Wir instanziieren eine „ Transform “-Komponente und eine „ Mesh “-Komponente. Die „ Transform “-Komponente legt fest, wie der Renderer die Geometrie transformieren soll, wenn sie mit der OpenGL-Pipeline gezeichnet wird. Wir kombinieren eine geordnete Menge von Transformationen zu einer einzigen „ Transform “-Komponente. Diese Informationen stehen unseren Shadern automatisch über standardmäßige benannte Uniform-Variablen zur Verfügung:

    Transform {
        id: transform
        translation: Qt.vector3d(root.x, root.y, root.z)
        rotation: fromEulerAngles(theta, phi, 0)
        scale: root.scale
    }

Laden dynamischer Daten pro Scheitelpunkt

Die Komponente „ Mesh “ ist sehr einfach aufgebaut. Wir nutzen ihre „source“-Eigenschaft, um eine statische Geometrie (wie Vertex-Positionen, Normalenvektoren und Texturkoordinaten) aus einer Datei im Wavefront-Obj-Format zu laden. Diese Daten wurden aus der Anwendung Blender exportiert.

    Mesh {
        id: mesh
        source: "qrc:/assets/obj/trefoil.obj"
    }

Zusätzlich zum „ Mesh “-Element ermöglicht „ Qt 3D “ auch die dynamische Generierung von Attributdaten pro Vertex über C++-Hooks, die von der aufgabenbasierten Engine aufgerufen werden.

Komponenten aggregieren

Das bloße Instanziieren von Komponenten reicht jedoch nicht aus. Damit sie einer Entität ein spezielles Verhalten verleihen können, muss die Entität die Komponenten mithilfe ihrer „components“-Eigenschaft aggregieren:

    components: [ transform, mesh, root.material ]

Dadurch lassen sich Komponenten sehr einfach von mehreren Entitäten gemeinsam nutzen. In diesem Beispiel verfügen wir über Komponenten für die Transformation und das Mesh, die im benutzerdefinierten Typ „TrefoilKnot“ enthalten sind. Die letzte Komponente vom Typ „ Material “ wird durch eine Eigenschaft des benutzerdefinierten Typs „TrefoilKnot“ bereitgestellt. Wir werden das Erscheinungsbild der Entität später anpassen.

Darstellung durch Kameras

Wir verwenden den benutzerdefinierten Typ „TrefoilKnot“ in „main.qml“, um den Trefoil-Knoten auf dem Bildschirm zu zeichnen.

Wir verwenden dieselben Import-Anweisungen wie in „TrefoilKnot.qml“, ergänzt um einen Namespace-Import für das Modul „ Qt Quick “, das wir für Animationen benötigen:

import QtQuick 2.1 as QQ2
import Qt3D.Core 2.0
import Qt3D.Render 2.0

Wir verwenden einen „ Entity “-Typ als Stammtyp, der lediglich als übergeordneter Typ für seine untergeordneten Elemente dient. In diesem Sinne ähnelt der Typ „ Entity “ stark dem Typ „ Item “:

import Qt3D.Input 2.0
import Qt3D.Extras 2.0

Entity {
    id: root

Die Komponente „RendererSettings“ nutzt den Typ „ForwardRenderer“, um den Renderer vollständig zu konfigurieren, ohne C++-Code zu verändern:

    // Render from the mainCamera
    components: [
        RenderSettings {
            activeFrameGraph: ForwardRenderer {
                id: renderer
                camera: mainCamera
            }
        },
        // Event Source will be set by the Qt3DQuickWindow
        InputSettings { }
    ]

Der Typ „BasicCamera“ ist ein einfacher Wrapper um den integrierten Typ „ Camera “, der eine virtuelle Kamera darstellt. Er verfügt über Eigenschaften für Aspekte wie die Nah- und Fernebene, das Sichtfeld, das Seitenverhältnis, den Projektionstyp, die Position und die Ausrichtung:

    BasicCamera {
        id: mainCamera
        position: Qt.vector3d( 0.0, 0.0, 15.0 )
    }

Der Typ „Configuration“ bietet eine vorübergehende Lösung für die Steuerung der Kamera mit der Maus, während die eigentliche Implementierung, die Aspekte und Komponenten nutzt, noch fertiggestellt wird:

    FirstPersonCameraController { camera: mainCamera }

Es ist ein Kinderspiel, mehrere Kameras zu verwenden und mithilfe des Framegraphs für die gesamte oder einen Teil der Szenenwiedergabe zwischen ihnen zu wechseln.

Materialzuordnung

Qt 3D verfügt über ein robustes und sehr flexibles Materialsystem, das zahlreiche Anpassungsmöglichkeiten bietet. Wir verwenden den benutzerdefinierten Typ „WireframeMaterial“, um den Typ „ Material “ zu umschließen:

    WireframeMaterial {
        id: wireframeMaterial
        effect: WireframeEffect {}
        ambient: Qt.rgba( 0.2, 0.0, 0.0, 1.0 )
        diffuse: Qt.rgba( 0.8, 0.0, 0.0, 1.0 )

Anschließend instanziieren wir den Typ „TrefoilKnot“ und weisen ihm das Material zu:

    TrefoilKnot {
        id: trefoilKnot
        material: wireframeMaterial
    }

Die „ Qt 3D “-Engine verfügt nun in Verbindung mit dem Renderer-Aspekt über genügend Informationen, um unser Mesh schließlich mit dem von uns festgelegten Material zu rendern.

Verwendung von Animationselementen

Wir nutzen die von Qt Quick 2 bereitgestellten Animationselemente, um die Eigenschaften der Typen „TrefoilKnot“ und „WireframeMaterial“ zu animieren. Die Eigenschaften der Komponenten eines Typs werden mithilfe des QML-Eigenschaftsbindungsmechanismus aktualisiert:

        QQ2.SequentialAnimation {
            loops: QQ2.Animation.Infinite
            running: true

            QQ2.NumberAnimation {
                target: wireframeMaterial;
                property: "lineWidth";
                duration: 1000;
                from: 0.8
                to: 1.8
            }

            QQ2.NumberAnimation {
                target: wireframeMaterial;
                property: "lineWidth";
                duration: 1000;
                from: 1.8
                to: 0.8
            }

            QQ2.PauseAnimation { duration: 1500 }
        }

Die Eigenschaftsaktualisierungen werden von der Basisklasse „ QNode “ erkannt und automatisch an die entsprechenden Objekte im Renderer-Aspekt weitergeleitet. Der Renderer übernimmt dann die Umsetzung der Eigenschaftsaktualisierungen in neue Werte für Uniform-Variablen in den GLSL-Shader-Programmen.

Führen Sie das Beispiel aus, um den Kleeblattknoten zu sehen, bei dem die Breite der Drahtgitterlinien pulsiert. Die gesamte Rechenlast wird von der GPU übernommen. Die CPU muss lediglich die Eigenschaftsanimationen ausführen und den Szenengraphen sowie den Framegraph in rohe OpenGL-Aufrufe übersetzen.

Es ist auch möglich, Animationen auf der GPU über ein benutzerdefiniertes Shader-Programm und Material zu erstellen.

Beispielprojekt @ code.qt.io