Skip to content

Kuesa Iro-Materials-Gallery QML Example

Demonstrates the appearance of the different [Digital Content Creation Plugins] Iro Materials that can be bundled in a glTF file.

iro-materials-gallery-example.jpg

QtQuick and Qt3D integration

The iro-materials-gallery relies on the regular QtQuick and Qt 3D APIs to instantiate a QtQuick based application that combines Qt 3D based content with a 2D UI overlay.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Item {
    id: mainRoot

    // 3D Content

    Item {
        id: baseUI
        anchors.fill: parent

        Scene3D {
            id: scene3D
            anchors.fill: parent
            focus: true
            multisample: true
            aspects: ["input", "animation", "logic"]

            // Root Scene Entity
            MainScene {
                id: sceneContent
                onClickedAt: {
                    inspectorView.x = x
                    inspectorView.y = y
                }
            }
        }
    }

    MaterialInspector {
        id: inspectorView
    }
}

Filename: iro-materials-gallery/qml/main.qml

SceneEntity

Kuesa provides the [SceneEntity ] element which holds collections of Qt 3D assets accessible by name.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
import Qt3D.Core 2.12
import Qt3D.Render 2.12
import Qt3D.Input 2.12
import Qt3D.Extras 2.12
import QtQuick 2.12

import Kuesa 2.0 as Kuesa
import Kuesa.Effects 2.0 as KuesaFX
import Kuesa.Utils 2.0 as KuesaUtils

Kuesa.SceneEntity {
    id: root3D
    signal clickedAt(int x, int y)

Filename: iro-materials-gallery/qml/MainScene.qml

Importing a glTF2 File

In order to load a glTF2 file, Kuesa provides the [GLTF2Importer ] element. If the sceneEntity property is set to a valid [SceneEntity ] instance, Qt 3D assets generated while parsing the file will be automatically added to the various asset collections.

The [GLTF2Importer ] takes care of intantiating the Kuesa Iro Materials 

1
2
3
4
5
6
7
    Kuesa.GLTF2Importer {
        id: gltf2importer
        sceneEntity: root3D
        assignNames: true
        source: "file:" + _assetsDir + "/models/iro-materials/iro-materials-gallery.gltf"
        options.generateTangents: true
    }

Filename: iro-materials-gallery/qml/MainScene.qml

Handling Picking

We want to display the material properties of the sphere on which we click. To do that, we can simply use the ObjectPicker element provided by Qt3D.

1
2
3
4
5
6
        ObjectPicker {
            onClicked: {
                _materialInspector.inspect(pick)
                root3D.clickedAt(pick.position.x, pick.position.y)
            }
        }

Filename: iro-materials-gallery/qml/MainScene.qml

We can react to the clicked signal and call some C++ function to perform some introspection and retrieve material properties.

Updated on 2023-07-03 at 11:02:17 +0000