Qt 3D: Wireframe QML Ejemplo

Qt 3D Renderizado Wireframe ilustra cómo dibujar una única entidad (un nudo trébol) utilizando un conjunto personalizado de shaders para implementar un método de renderizado wireframe de una sola pasada.

Ejecución del ejemplo

Para ejecutar el ejemplo desde Qt Creatorabra el modo Welcome y seleccione el ejemplo de Examples. Para más información, ver Qt Creator: Tutorial: Construir y ejecutar.

Creando Entidades

El aspecto renderizador busca entidades que tengan alguna geometría, un material, y opcionalmente una transformación. Todos ellos se especifican en forma de subclases de QComponent que se han exportado al motor QML en forma de Mesh, Material, y Transform. Utilizamos estos componentes para crear un elemento QML personalizado en TrefoilKnot.qml.

Empezamos importando el módulo Qt3D 2.0 que proporciona los ayudantes de tipo Entity y de tipo valor, como Qt.vector3d(). También importamos el módulo Qt3D.Renderer que proporciona los componentes y otros tipos recogidos por el aspecto renderer:

import Qt3D.Core 2.0
import Qt3D.Render 2.0

Para utilizar componentes de otros aspectos, tendríamos que importar también el módulo QML correspondiente.

A continuación, utilizamos un tipo Entity como elemento raíz del tipo QML personalizado, exponiendo algunas propiedades personalizadas como haríamos con cualquier otro tipo en 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

Además de agregar componentes, el tipo Entity puede utilizarse para agrupar objetos hijos. Esto es análogo a cómo se utiliza el tipo Item en Qt Quick 2.

Especificación de transformaciones

Instanciamos un componente Transform y un componente Mesh. El componente Transform especifica cómo el renderizador debe transformar la geometría cuando se dibuja con el canal OpenGL. Combinamos un conjunto ordenado de transformaciones en un único componente Transform. Esta información estará automáticamente disponible para nuestros shaders a través de variables uniformes con nombre estándar:

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

Carga de datos dinámicos por vértice

El componente Mesh es muy sencillo. Usamos su propiedad source para cargar un conjunto estático de geometría (como posiciones de vértices, vectores normales y coordenadas de textura) desde un archivo en formato Wavefront Obj. Estos datos fueron exportados desde la aplicación Blender.

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

Además del elemento Mesh, Qt 3D también permite la generación dinámica de datos de atributos por vértice a través de ganchos C++ que son llamados por el motor basado en tareas.

Agregación de componentes

Sin embargo, no basta con instanciar componentes. Para que imbuyan un comportamiento especial en una entidad, ésta debe agregar los componentes mediante su propiedad components:

    components: [ transform, mesh, root.material ]

Esto permite compartir componentes entre varias entidades de forma muy sencilla. En este ejemplo, tenemos componentes para la transformación y la malla que están contenidos dentro del tipo personalizado TrefoilKnot. El componente final, de tipo Material, es proporcionado por una propiedad del tipo personalizado TrefoilKnot. Más adelante personalizaremos la apariencia de la entidad.

Renderizado desde cámaras

Utilizamos el tipo personalizado TrefoilKnot en main.qml para dibujar el nudo trébol en la pantalla.

Utilizamos las mismas declaraciones de importación que en TrefoilKnot.qml, con la adición de una importación namespaced para el módulo Qt Quick que necesitaremos para las animaciones:

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

Utilizamos un tipo Entity como tipo raíz simplemente para que actúe como padre de sus hijos. En este sentido, el tipo Entity es muy parecido al tipo Item:

import Qt3D.Input 2.0
import Qt3D.Extras 2.0

Entity {
    id: root

El componente RendererSettings utiliza el tipo ForwardRenderer para configurar completamente el renderizador sin tocar ningún código C++:

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

El tipo BasicCamera es una envoltura trivial alrededor del tipo incorporado Camera que representa una cámara virtual. Tiene propiedades para los planos cercano y lejano, el campo de visión, la relación de aspecto, el tipo de proyección, la posición y la orientación:

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

El tipo Configuración proporciona una solución temporal para controlar la cámara con el ratón mientras se completa la implementación adecuada que utiliza aspectos y componentes:

    FirstPersonCameraController { camera: mainCamera }

Es trivial usar múltiples cámaras y elegir entre ellas usando el framegraph para todo o parte del renderizado de la escena.

Mapeado de materiales

Qt 3D tiene un sistema de materiales robusto y muy flexible que permite múltiples niveles de personalización. Utilizamos el tipo personalizado WireframeMaterial para envolver el tipo Material:

    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 )

Luego instanciamos el tipo TrefoilKnot y establecemos el material en él:

    TrefoilKnot {
        id: trefoilKnot
        material: wireframeMaterial
    }

El motor Qt 3D en conjunción con el aspecto renderizador ahora tiene suficiente información para finalmente renderizar nuestra malla usando el material que especificamos.

Uso de elementos de animación

Utilizamos los elementos de animación proporcionados por Qt Quick 2 para animar las propiedades de los tipos TrefoilKnot y WireframeMaterial. Las propiedades de los componentes de un tipo se actualizan utilizando el mecanismo de enlace de propiedades de QML:

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

La clase base QNode se da cuenta de las actualizaciones de las propiedades y las envía automáticamente a los objetos correspondientes del aspecto renderizador. El renderizador se encarga entonces de traducir las actualizaciones de las propiedades a nuevos valores para las variables uniformes en los programas de sombreado GLSL.

Ejecute el ejemplo para ver el nudo trébol con la anchura de las líneas de alambre pulsando. Todo el trabajo pesado lo realiza la GPU. La CPU sólo tiene que ejecutar las animaciones de las propiedades y traducir el scenegraph y el framegraph a llamadas OpenGL sin procesar.

También es posible animar en la GPU mediante un programa de sombreado y un material personalizados.

Proyecto de ejemplo @ code.qt.io