Qt Quick 3D Szenen mit 2D-Inhalten

2D-Objekte in einer 3D-Welt

Qt Quick 3D ermöglichen die effiziente Erstellung und Darstellung von Szenen, die 3D- und 2D-Elemente kombinieren.

Was versteht man unter einer kombinierten 3D-2D-Szene?

Ein „ View3D “-Objekt, das ein 3D-Ansichtsfenster in der 2D-Szene darstellt, lässt sich naturgemäß leicht mit „ Qt Quick “-Elementen wie „Rectangle“, „Image“ oder „Text“ kombinieren – rund um, unterhalb oder oberhalb des „ View3D “-Objekts, das selbst ein „ Qt Quick “ Item ist.

Betrachten Sie das folgende Beispiel:

import QtQuick
import QtQuick3D

Rectangle {
    gradient: Gradient {
        GradientStop { position: 0; color: "steelblue" }
        GradientStop { position: 1; color: "black" }
    }
    Text {
        text: "Hello 2D World"
        font.pointSize: 32
        color: "red"
        anchors.top: parent.top
        anchors.horizontalCenter: parent.horizontalCenter
    }
    Item {
        width: 400; height: 400
        anchors.centerIn: parent
        View3D {
            anchors.fill: parent
            environment: SceneEnvironment { backgroundMode: SceneEnvironment.Color; clearColor: "lightGray" }
            PerspectiveCamera { z: 600 }
            DirectionalLight { }
            Model {
                source: "#Cube"
                materials: PrincipledMaterial { baseColor: "green"; metalness: 0.0; roughness: 0.0 }
                eulerRotation: Qt.vector3d(30, 45, 0)
            }
        }
    }
}

Hier ist die 3D-Szene der Bereich mit grauem Hintergrund. Der Rest des Fensters besteht aus 2D-Elementen „ Qt Quick “. Diese können sich mit dem „ View3D “ überlappen, sind jedoch nicht Teil der 3D-Welt, verwenden nicht das 3D-Koordinatensystem und nehmen nicht an den Transformationen der 3D-Szene teil.

Was ist, wenn wir 2D-Elemente innerhalb der 3D-Welt haben möchten, und zwar so, dass sie tatsächlich an allen 3D-Transformationen teilnehmen? Können wir beispielsweise „ Rectangle “- und „ Text “-Elemente so in der 3D-Welt platzieren, dass sie der Drehung des Würfels folgen und immer über ihm positioniert sind?

In den folgenden Abschnitten werden wir uns ansehen, wie dies erreicht werden kann. Das Beispiel verwendet zwar Rectangle und Text, doch jeder Inhalt von Qt Quick, einschließlich Qt Quick Controls, Shape, ShaderEffect und ParticleSystem, kann auf diese Weise verwendet werden.

Hinzufügen von 2D-Elementen zu 3D-Knoten

Entscheidend hierfür ist die Fähigkeit von ` Object3D`, untergeordnete Objekte vom Typ ` Item ` zu akzeptieren und diese auf besondere Weise zu behandeln. ` Object3D ` ist die Basisklasse für den Typ ` Node `. Das bedeutet, dass alle ` Node` sowie Typen wie ` Model` untergeordnete Objekte vom Typ ` Item ` akzeptieren.

Ab Qt 6.0 löst das Hinzufügen eines 2D-Elements zu einem 3D-Knoten nicht mehr das Rendern des 2D-Inhalts in eine OpenGL-Textur, ein Vulkan-Bild oder Ähnliches aus. Stattdessen werden die 2D-Elemente standardmäßig zusammen mit dem Rest der 3D-Szene im selben Render-Durchgang gerendert. Auf die 2D-Elemente werden alle 3D-Transformationen angewendet. Die Transformationen werden vom übergeordneten Knoten „ Node “ geerbt.

import QtQuick
import QtQuick3D

Rectangle {
    gradient: Gradient {
        GradientStop { position: 0; color: "steelblue" }
        GradientStop { position: 1; color: "black" }
    }
    Text {
        text: "Hello 2D World"
        font.pointSize: 32
        color: "red"
        anchors.top: parent.top
        anchors.horizontalCenter: parent.horizontalCenter
    }
    Item {
        width: 400; height: 400
        anchors.centerIn: parent
        View3D {
            anchors.fill: parent
            environment: SceneEnvironment { backgroundMode: SceneEnvironment.Color; clearColor: "lightGray" }
            PerspectiveCamera { z: 600 }
            DirectionalLight { }
            Model {
                Node {
                    y: 150
                    Rectangle {
                        anchors.horizontalCenter: parent.horizontalCenter
                        color: "white"
                        width: text3d.width
                        height: text3d.height
                        Text {
                            id: text3d
                            text: "Hello 3D World"
                            font.pointSize: 32
                        }
                    }
                }
                source: "#Cube"
                materials: PrincipledMaterial { baseColor: "green"; metalness: 0.0; roughness: 0.0 }
                eulerRotation: Qt.vector3d(30, 45, 0)
            }
        }
    }
}

Im Vergleich zum ersten Codeausschnitt verfügt der Knoten „ Model “ nun über einen untergeordneten Knoten, dessen Transformation ihn etwas oberhalb der Position des Würfels platziert. „ 150 “ ist relativ zum Mittelpunkt des Würfels im 3D-Koordinatenraum definiert.

Model {
    Node {
        y: 150

Dann gibt es noch das Element „ Rectangle “. Wenn man es unter einem „ Node “ hinzufügt, werden die Grenzen zwischen der 3D- und der 2D-Welt intern überschritten, was für den Anwendungsentwickler jedoch transparent bleibt. Es wird automatisch ein unsichtbares „ content item “ generiert, wodurch das Rechteck auf „ parent “ verweisen und eine Verankerung vornehmen kann. Die 3D-Transformation des Knotens wird auf den gesamten 2D-Teilbaum angewendet. Im Beispiel bedeutet dies, dass die Drehung der Drehung des Würfels entspricht.

Node {
    y: 150
    Rectangle {
        anchors.horizontalCenter: parent.horizontalCenter

Koordinatensysteme in 2D und 3D

Die 2D-Elemente verwenden weiterhin das Koordinatensystem von „ Qt Quick “: Die Y-Achse verläuft von oben nach unten, und die Einheiten entsprechen Pixeln. 3D-Knoten hingegen verwenden das 3D-Koordinatensystem: Die Y-Achse zeigt nach oben, und die Einheiten entsprechen Zentimetern, beeinflusst durch die perspektivische Projektion von „ Camera “.

Die linke obere Ecke des obersten Elements wird standardmäßig am Ursprung des Knotens platziert. Das bedeutet, dass für das oberste Element in einem 2D-Unterbaum häufig ein Anker festgelegt werden sollte, zum Beispiel anchors.centerIn: parent, oder – wie im Beispiel – die horizontale Mitte am horizontalen Mittelpunkt des übergeordneten Knotens verankert werden sollte, um den 2D-Inhalt horizontal über dem 3D-Knoten zu zentrieren.

Weitere Überlegungen

• Obwohl die 2D-Elemente inline mit 3D-Objekten gerendert werden, sind sie nicht an der Beleuchtung beteiligt und werfen keine Schatten.
• Clipping funktioniert möglicherweise nicht wie erwartet und sollte vermieden werden. Wenn das Clipping für das Design von 2D-Elementen unerlässlich ist, sollte die Anwendung explizit auf das Rendern in eine Textur zurückgreifen. Dies kann erreicht werden, indem „ layer.enabled: true “ zum obersten „ Item “ unter dem 3D-Knoten hinzugefügt wird.
• Ab Qt 6.2 werden Eingaben bei Bedarf an die 2D-Elemente weitergeleitet. Eingaben von Zeigegeräten müssen innerhalb des „ childrenRect “ der deklarierten Elemente erfolgen.
• Zwar ist das Hinzufügen eines 2D-Elementbaums zur 3D-Szene relativ ressourcenschonend, doch sollte eine übermäßige Anzahl (Hunderte oder mehr) von 2D-Unterbäumen innerhalb der 3D-Szene vermieden werden, da dies in großem Umfang zu einem erhöhten Speicher- und Grafikressourcenverbrauch führen kann. Beachten Sie, dass sich dies auf die Anzahl der einzelnen Item -Unterbäume unter 3D-Knoten bezieht, nicht auf die Gesamtzahl der 2D-Elemente in diesen Unterbäumen. Das obige QML-Snippet enthält beispielsweise nur einen 2D-Unterbaum.