Qt 3D: Exemple QML Wireframe

Qt 3D WireframeRendering illustre comment dessiner une seule entité (un nœud en trèfle) en utilisant un ensemble personnalisé de shaders pour mettre en œuvre une méthode de rendu filaire en un seul passage.

Exécution de l'exemple

Pour exécuter l'exemple à partir de Qt CreatorOuvrez le mode Welcome et sélectionnez l'exemple à partir de Examples. Pour plus d'informations, voir Qt Creator: Tutoriel : Construire et exécuter.

Création d'entités

Le moteur de rendu recherche des entités ayant une géométrie, un matériau et, éventuellement, une transformation. Ces entités sont toutes spécifiées sous la forme de sous-classes de QComponent qui ont été exportées vers le moteur QML sous la forme de Mesh, Material, et Transform. Nous utilisons ces composants pour créer un élément QML personnalisé dans TrefoilKnot.qml.

Nous commençons par importer le module Qt3D 2.0 qui fournit les aides de type et de valeur Entity, telles que Qt.vector3d(). Nous importons également le module Qt3D.Renderer qui fournit les composants et autres types récupérés par l'aspect renderer :

import Qt3D.Core 2.0
import Qt3D.Render 2.0

Pour utiliser les composants d'autres aspects, nous devons également importer le module QML correspondant.

Nous utilisons ensuite un type Entity comme élément racine du type QML personnalisé, en exposant certaines propriétés personnalisées comme vous le feriez avec n'importe quel autre type 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

Outre l'agrégation de composants, le type Entity peut être utilisé pour regrouper des objets enfants. Cela est analogue à la façon dont le type Item est utilisé dans Qt Quick 2.

Spécification des transformations

Nous instancions un composant Transform et un composant Mesh. Le composant Transform spécifie comment le moteur de rendu doit transformer la géométrie lorsqu'elle est dessinée avec le pipeline OpenGL. Nous combinons un ensemble ordonné de transformations dans un seul composant Transform. Cette information sera automatiquement disponible pour nos shaders par le biais de variables uniformes nommées standard :

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

Chargement des données dynamiques par vertex

Le composant Mesh est très simple. Nous utilisons sa propriété source pour charger un ensemble statique de géométrie (comme les positions des vertex, les vecteurs normaux et les coordonnées de texture) à partir d'un fichier au format Wavefront Obj. Ces données ont été exportées à partir de l'application Blender.

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

Outre l'élément Mesh, Qt 3D permet également la génération dynamique de données d'attributs par sommet par le biais de crochets C++ appelés par le moteur basé sur les tâches.

Agrégation de composants

Cependant, il ne suffit pas d'instancier des composants. Pour qu'ils confèrent un comportement spécial à une entité, celle-ci doit agréger les composants au moyen de sa propriété components :

    components: [ transform, mesh, root.material ]

Cela permet de partager très facilement les composants entre plusieurs entités. Dans cet exemple, nous avons des composants pour la transformation et le maillage qui sont contenus dans le type personnalisé TrefoilKnot. Le dernier composant, de type Material, est fourni par une propriété du type personnalisé TrefoilKnot. Nous personnaliserons ultérieurement l'apparence de l'entité.

Rendu à partir de caméras

Nous utilisons le type personnalisé TrefoilKnot dans le fichier main.qml pour dessiner le nœud en forme de trèfle à l'écran.

Nous utilisons les mêmes instructions d'importation que dans TrefoilKnot.qml, avec l'ajout d'une importation d'espace de noms pour le module Qt Quick dont nous aurons besoin pour les animations :

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

Nous utilisons un type Entity comme type racine simplement pour servir de parent à ses enfants. En ce sens, le type Entity ressemble beaucoup au type Item:

import Qt3D.Input 2.0
import Qt3D.Extras 2.0

Entity {
    id: root

Le composant RendererSettings utilise le type ForwardRenderer pour configurer complètement le moteur de rendu sans toucher au code C++ :

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

Le type BasicCamera est une enveloppe triviale autour du type intégré Camera qui représente une caméra virtuelle. Il possède des propriétés telles que les plans proche et lointain, le champ de vision, le rapport d'aspect, le type de projection, la position et l'orientation :

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

Le type Configuration constitue une solution temporaire pour contrôler la caméra à l'aide de la souris pendant que l'implémentation correcte utilisant les aspects et les composants est en cours d'achèvement :

    FirstPersonCameraController { camera: mainCamera }

Il est trivial d'utiliser plusieurs caméras et de choisir entre elles en utilisant le framegraph pour tout ou partie du rendu de la scène.

Cartographie des matériaux

Qt 3D dispose d'un système de matériaux robuste et très flexible qui permet plusieurs niveaux de personnalisation. Nous utilisons le type personnalisé WireframeMaterial pour envelopper le type 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 )

Nous instancions ensuite le type TrefoilKnot et lui appliquons le matériau :

    TrefoilKnot {
        id: trefoilKnot
        material: wireframeMaterial
    }

Le moteur Qt 3D, en conjonction avec l'aspect de rendu, dispose maintenant de suffisamment d'informations pour effectuer le rendu de notre maillage en utilisant le matériau que nous avons spécifié.

Utilisation des éléments d'animation

Nous utilisons les éléments d'animation fournis par Qt Quick 2 pour animer les propriétés des types TrefoilKnot et WireframeMaterial. Les propriétés des composants d'un type sont mises à jour à l'aide du mécanisme de liaison des propriétés 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 }
        }

Les mises à jour des propriétés sont remarquées par la classe de base QNode et automatiquement envoyées aux objets correspondants dans l'aspect de rendu. Le moteur de rendu se charge ensuite de traduire les mises à jour des propriétés en nouvelles valeurs pour les variables uniformes dans les programmes de shaders GLSL.

Exécutez l'exemple pour visualiser le nœud en trèfle avec la largeur des lignes filaires pulsées. Le GPU se charge de toutes les tâches lourdes. L'unité centrale n'a plus qu'à exécuter les animations de propriété et à traduire le scenegraph et le framegraph en appels OpenGL bruts.

Il est également possible d'animer sur le GPU par le biais d'un programme de shader et d'un matériau personnalisés.

Exemple de projet @ code.qt.io