Qt Quick Escenas 3D con contenido 2D

Elementos 2D en un mundo 3D

Qt Quick 3D ofrece una eficaz creación y renderización de escenas que combinan elementos 3D y 2D.

¿Qué entendemos por una escena combinada 3D-2D?

Por naturaleza, un objeto View3D, que representa una ventana 3D en la escena 2D, puede combinarse fácilmente con elementos Qt Quick, como, Rectángulo, Imagen, Texto, alrededor, debajo o encima del elemento View3D, que a su vez es un Qt Quick Item .

Considere el siguiente ejemplo:

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

Aquí la escena 3D es el área con fondo gris. El resto de la ventana consiste en elementos 2D Qt Quick. Éstos pueden solaparse con View3D pero no forman parte del mundo 3D, no utilizan el sistema de coordenadas 3D y no participan en las transformaciones de la escena 3D.

¿Qué pasa si queremos tener elementos 2D dentro del mundo 3D, de forma que realmente participen en todas las transformaciones 3D? Por ejemplo, ¿podemos tener elementos Rectangle y Text colocados dentro del mundo 3D, de forma que sigan la rotación del cubo y estén siempre colocados sobre él?

En las secciones siguientes veremos cómo conseguirlo. Aunque el ejemplo utiliza Rectangle y Text, cualquier contenido de Qt Quick, incluyendo Qt Quick Controls, Shape, ShaderEffect, ParticleSystem, puede ser utilizado de esta manera.

Añadir elementos 2D a nodos 3D

La clave es la capacidad de Object3D de aceptar objetos hijos de Item y tratarlos de forma especial. Object3D es la clase base para el tipo Node. Esto significa que cualquier Node, y también tipos como Model, aceptan Item hijos.

A partir de Qt 6.0, añadir un elemento 2D a un nodo 3D ya no activa el renderizado del contenido 2D en una textura OpenGL, imagen Vulkan o similar. En su lugar, el modo por defecto es renderizar los elementos 2D en línea con el resto de la escena 3D, en el mismo pase de render. A los elementos 2D se les aplican todas las transformaciones 3D. Las transformaciones se heredan de la envoltura 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)
            }
        }
    }
}

Comparado con el primer fragmento, el nodo Model tiene ahora un nodo hijo, con una transformación que lo sitúa algo por encima de la posición del cubo. 150 es relativo al centro del cubo, en el espacio de coordenadas 3D.

Model {
    Node {
        y: 150

Luego está el elemento Rectangle. Al añadirlo bajo un Node, los límites del mundo 3D y 2D se cruzan internamente, pero esto permanece transparente para el diseñador de la aplicación. Se genera automáticamente un content item invisible, que permite al Rectángulo referirse a parent y realizar el anclaje. La transformación 3D del Nodo se aplica a todo el subárbol 2D. En el ejemplo esto significa que la rotación coincidirá con la rotación del cubo.

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

Espacios de coordenadas en 2D y 3D

Los elementos 2D continúan utilizando el sistema de coordenadas de Qt Quick: El eje Y va de arriba a abajo, y las unidades corresponden a píxeles. Por otro lado, los nodos 3D utilizan el sistema de coordenadas 3D: el eje Y apunta hacia arriba, y las unidades corresponden a centímetros, afectados por la proyección en perspectiva de Camera.

La esquina superior izquierda del elemento superior se sitúa por defecto en el origen del Nodo. Esto significa que el elemento de nivel superior en un subárbol 2D a menudo querrá especificar un ancla, por ejemplo anchors.centerIn: parent, o, como en el ejemplo, anclar el centro horizontal al centro horizontal del padre, centrando así el contenido 2D horizontalmente sobre el nodo 3D.

Otras consideraciones

• Aunque los elementos 2D se renderizan en línea con los objetos 3D, no participan en la iluminación y no proyectan sombras.
• Clipping El recorte puede no funcionar como se espera y debería evitarse. Si el recorte es esencial para el diseño de los elementos 2D, la aplicación debe hacer una caída explícita a la representación de una textura. Esto puede lograrse añadiendo layer.enabled: true al nivel superior Item bajo el nodo 3D.
• A partir de Qt 6.2, la entrada se pasa a los elementos 2D según sea necesario. La entrada desde dispositivos apuntadores debe ocurrir dentro de childrenRect de los Items declarados.
• Mientras que añadir un árbol de ítems 2D en la escena 3D es bastante barato, deben evitarse cantidades excesivas (cientos o más) de subárboles 2D dentro de la escena 3D, ya que en grandes cantidades esto puede conducir a un mayor uso de memoria y recursos gráficos. Tenga en cuenta que esto se refiere al número de subárboles Item separados bajo nodos 3D, no al número total de elementos 2D en esos subárboles. Por ejemplo, el fragmento QML anterior sólo contiene un subárbol 2D.