Qt Quick Scènes 3D avec contenu 2D

Éléments 2D dans un monde 3D

Qt Quick La 3D permet de créer et de rendre efficacement des scènes qui combinent des éléments 3D et 2D.

Qu'entendons-nous par une scène combinant 3D et 2D ?

Par nature, un objet View3D, représentant un point de vue 3D dans la scène 2D, peut être facilement combiné avec des éléments Qt Quick, tels que Rectangle, Image, Texte, autour, au-dessous ou au-dessus de l'élément View3D, qui est lui-même un Qt Quick Item .

Prenons l'exemple suivant :

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

Ici, la scène 3D est la zone sur fond gris. Le reste de la fenêtre est constitué d'éléments 2D Qt Quick. Ceux-ci peuvent se superposer à View3D mais ne font pas partie du monde 3D, n'utilisent pas le système de coordonnées 3D et ne participent pas aux transformations de la scène 3D.

Que se passe-t-il si nous voulons que des éléments 2D fassent partie du monde 3D, de manière à ce qu'ils participent réellement à toutes les transformations 3D ? Par exemple, pouvons-nous avoir des objets Rectangle et Text placés dans le monde 3D, de manière à ce qu'ils suivent la rotation du cube et soient toujours placés au-dessus de lui ?

Dans les sections suivantes, nous verrons comment cela est possible. Bien que l'exemple utilise Rectangle et Text, tout contenu Qt Quick, y compris Qt Quick Controls, Shape, ShaderEffect, ParticleSystem, peut être utilisé de cette manière.

Ajout d'éléments 2D à des nœuds 3D

L'élément clé est la capacité de Object3D à accepter des objets enfants Item et à les traiter d'une manière particulière. Object3D est la classe de base du type Node. Cela signifie que n'importe quel Node, ainsi que des types comme Model, acceptent les enfants Item.

À partir de Qt 6.0, l'ajout d'un élément 2D à un nœud 3D ne déclenche plus le rendu du contenu 2D dans une texture OpenGL, une image Vulkan ou similaire. Au lieu de cela, le mode par défaut est de rendre les éléments 2D en ligne avec le reste de la scène 3D, dans la même passe de rendu. Toutes les transformations 3D sont appliquées aux éléments 2D. Les transformations sont héritées de l'enveloppe Node.

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

Par rapport au premier extrait, le nœud Model a maintenant un nœud enfant, avec une transformation qui le place légèrement au-dessus de la position du cube. 150 est relatif au centre du cube, dans l'espace de coordonnées 3D.

Model {
    Node {
        y: 150

Il y a ensuite l'élément Rectangle. Lorsqu'on l'ajoute sous un Node, les limites du monde 3D et 2D sont franchies en interne, mais cela reste transparent pour le concepteur de l'application. Un content item invisible est généré automatiquement, ce qui permet au Rectangle de se référer à parent et d'effectuer des ancrages. La transformation 3D du nœud est appliquée à l'ensemble du sous-arbre 2D. Dans l'exemple, cela signifie que la rotation correspondra à celle du cube.

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

Espaces de coordonnées en 2D et 3D

Les éléments 2D continuent d'utiliser le système de coordonnées de Qt Quick: L'axe Y va de haut en bas et les unités correspondent à des pixels. Les nœuds 3D, quant à eux, utilisent le système de coordonnées 3D : l'axe Y pointe vers le haut et les unités correspondent à des centimètres, affectés par la projection en perspective de Camera.

Le coin supérieur gauche de l'élément supérieur est placé par défaut à l'origine du nœud. Cela signifie que l'élément de premier niveau d'un sous-arbre 2D devra souvent spécifier une ancre, par exemple anchors.centerIn: parent, ou, comme dans l'exemple, ancrer le centre horizontal au centre horizontal du parent, centrant ainsi le contenu 2D horizontalement sur le nœud 3D.

Autres considérations

• Bien que les éléments 2D soient rendus en ligne avec les objets 3D, ils ne participent pas à l'éclairage et ne projettent pas d'ombres.
• Clipping L'écrêtage peut ne pas donner les résultats escomptés et doit être évité. Si l'écrêtage est essentiel à la conception des objets 2D, l'application doit prévoir un retour explicite au rendu vers une texture. Ceci peut être réalisé en ajoutant layer.enabled: true au niveau supérieur de Item sous le nœud 3D.
• Depuis Qt 6.2, les entrées sont transmises aux éléments 2D si nécessaire. Les entrées provenant de dispositifs de pointage doivent se produire à l'intérieur de childrenRect des éléments déclarés.
• Bien que l'ajout d'un arbre d'éléments 2D dans la scène 3D soit relativement peu coûteux, il convient d'éviter les quantités excessives (des centaines ou plus) de sous-arbres 2D dans la scène 3D, car cela peut entraîner une utilisation accrue de la mémoire et des ressources graphiques. Notez qu'il s'agit du nombre de sous-arbres Item distincts sous les nœuds 3D, et non du nombre total d'éléments 2D dans ces sous-arbres. Par exemple, l'extrait QML ci-dessus ne contient qu'un seul sous-arbre 2D.