Skip to content

Kuesa ToneMapping QML Example

Demonstrates the use of the Kuesa API to import a glTF2 file and control its appearance by using different tone mapping algorithms.

tonemapping-example.jpg

QtQuick and Qt3D integration

The tonemapping example 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
Item {
    id: root

    Item {
        id: baseUI
        anchors.fill: parent

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

            MainScene {
                id: sceneEntity
                screenWidth: scene3d.width
                screenHeight: scene3d.height
                exposure: menu.exposure
                rotating: menu.toggleRotation
                lightRotating: menu.toggleLightRotation
                toneMappingAlgorithmName: menu.toneMappingAlgorithmName
            }
        }
    }

Filename: tonemapping/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
14
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

    property string toneMappingAlgorithmName: "None"

Filename: tonemapping/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.

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

Filename: tonemapping/qml/MainScene.qml

Controlling the Exposure and Tone Mapping

We use a [ForwardRenderer ] FrameGraph to render our scene. This FrameGraph has properties to control the exposure as well as the tone mapping algorithm we want to use.

Therefore we can create a binding on the toneMappingAlgorithm property of our [ForwardRenderer ] FrameGraph to control the tonemapping algorithm used

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
            activeFrameGraph: Kuesa.ForwardRenderer {
                id: frameGraph
                camera: cameraAsset.node ? cameraAsset.node : fallbackCamera
                clearColor: Qt.rgba(0.1, 0.1, 0.1, 1.0)
                exposure: root3D.exposure
                toneMappingAlgorithm: {
                    if (toneMappingAlgorithmName == "Filmic")
                        return KuesaFX.ToneMappingAndGammaCorrectionEffect.Filmic
                    if (toneMappingAlgorithmName == "Reinhard")
                        return KuesaFX.ToneMappingAndGammaCorrectionEffect.Reinhard
                    if (toneMappingAlgorithmName == "Uncharted")
                        return KuesaFX.ToneMappingAndGammaCorrectionEffect.Uncharted
                    return KuesaFX.ToneMappingAndGammaCorrectionEffect.None
                }
                skinning: true
            }

Filename: tonemapping/qml/MainScene.qml

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