Kuesa Runtime

Kuesa Music Box QML Example

Demonstrates the use of the Kuesa API to import a glTF2 file and play animations.

QtQuick and Qt3D integration

The music-box 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.

 import QtQuick 2.11
 import QtQuick.Scene3D 2.0

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

     MainScene { }
 }

SceneEntity

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

 import Kuesa 1.2 as Kuesa
 import Kuesa.Effects 1.1 as KuesaFX
 import MusicBox 1.0 as MusicBox

 Kuesa.SceneEntity {
     id: scene

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.

     Kuesa.GLTF2Importer {
         id: importer
         sceneEntity: scene
         source: "qrc:/RobotArm.gltf"
     ...

Extracting and running Animations

We know in advance the name of the animations bundled in the glTF2 file. If you haven't authored the file yourself, you can use the Kuesa Studio gltfInspector to introspect it, list the animations and preview them.

Given a list of animation names:

     QtObject {
         id: d

         readonly property var robotArmAnimations: [
             'ArmTopAction',
             'FingerBase3Action',
             'armBottomBottomAction',
             'armBottomBottomGauge.001Action',
             'armBottomBottomGaugeAction',
             'armBottomTopAction',
             'cogAction',
             'elbowPivotAction',
             'elbowPivotBaseAction',
             'fingerBase2Action',
             'fingerKnuckle1Action',
             'fingerPivot1.001Action',
             'fingerPivot2Action',
             'fingerTop1Action',
             'fingerTop2Action',
             'fingerTop3Action',
             'handleAction.001',
             'handleCoverAction',
             'musicBarrelAction',
             'shoulderPivotAction',
             'shoulderPivotBaseAction',
             'thumbBaseBottomAction',
             'thumbKnuckleAction',
             'thumbPivotAction',
             'thumbTopAction',
             'wristPivotAction'
         ]
     ...

We can generate AnimationPlayer to control them.

     NodeInstantiator {
         id: actionPlayers
         model: []
         delegate: Kuesa.AnimationPlayer {
             sceneEntity: scene
             clip: modelData
             loops: Kuesa.AnimationPlayer.Infinite
             running: d.animationRunning
         }
     }

Upon importing the glTF file, we can rely on the status change to trigger the animation playback.

         onStatusChanged: {
             if (status == Kuesa.GLTF2Importer.Ready) {
                 // start robot arm animation
                 actionPlayers.model = d.robotArmAnimations;

                 // get transforms for music barrel
                 var musicBarrelTransform = scene.transformForEntity('musicBarrel');
                 musicBarrelTransform.defaultPropertyTrackingMode = Node.TrackAllValues;

                 d.animationRunning = true
             }
         }

Files:

Images: