- Qt 6.8
- Qt Quick 3D
- Qt Quick 3D Examples and Tutorials
- Qt Quick 3D - Virtual Assistant Example
- Qt Quick 3D | Commercial or GPLv3

# Qt Quick 3D - Virtual Assistant Example

Qt Quick application that presents a 3D model of a virtual assistant with dynamic animations created using QML and timelines.

Virtual Assistant Example demonstrates how to bring a 3D model of a virtual assistant to life through timeline animations, increasing user engagement and interaction. The example can be run and edited in both QtDesignStudio and QtCreator.

#### Importing 3D Model

To load the model in QtDesingStudio it is enough to import the .gltf file to the project. QtDesignStudio automatically create a qml file that represents the object and it wil also generate necessary assets. Without QtDesignStudio you need to use balsam tool, and run it manually. In this example the generated qml file was modified to introduce the states, animations and some additional invicible models that allows to pick specific parts of the Virtual Assistant.

#### Preparing SceneEnvironment Scene Environment

Scene use HDR images to create a skybox and to provide natural lighthing.

             environment: ExtendedSceneEnvironment {
                 backgroundMode: SceneEnvironment.SkyBox
                 lightProbe: Texture { source: Constants.sceneName }
                 antialiasingMode: SceneEnvironment.MSAA
                 antialiasingQuality: SceneEnvironment.VeryHigh
                 fxaaEnabled: true
                 probeExposure: 0.6
                 probeOrientation: Qt.vector3d(0, settingsPanel.skyboxRotation, 0)
                 specularAAEnabled: true
                 tonemapMode: SceneEnvironment.TonemapModeLinear
                 vignetteEnabled: true
                 vignetteRadius: 0.15
             }

#### Camera Options

Camera properties can be changed from the `SettingsPanel`. You can manipulate the camera FOV, skybox rotation using sliders. The checkbox enable the OrbitCameraController that allows to change camera position, rotation etc. using mouse and keyboards buttons.

#### Animations

The animations are created using multiple Timeline timelines and Keyframe keyframes. Each Timeline Timeline is connected with different state of the `VirtualAssistant`. The animations starts playing immadiately when the state change. At the end of each animation the object returns to the default state and restore the default values like position and rotation of the model nodes. The animations change the properties values of the nodes in our skeleton and also modify the weight of different morph targets to animate the face elements (eyes, mouth).

To run the animation you can use the button on ControlPanel on the left side of the scene or you can also click on specific model elements like hands, lower body and face to activate animation related to that part of the model.

##### Skeleton animations

- Entry animation
- Exit animation
- Explore scene animation
- Backflip animation
- Bouncing animation
- Right and Left hand waving animation

##### Morph Target animations

- Face animations (Happy and Sad)

Sample implementation of waving animation on the model's left hand:

     Timeline {
         id: leftHandWavingTimeline
         animations: [
             TimelineAnimation {
                 id: leftHandWavingAnimation
                 onFinished: node.restoreDefaults()
                 running: false
                 loops: 1
                 duration: 2000
                 to: 2000
                 from: 0
             }
         ]
         startFrame: 0
         endFrame: 2000
         enabled: false

         KeyframeGroup {
             target: hand_l
             property: "x"
             Keyframe {
                 value: 2.89
                 frame: 400
             }

             Keyframe {
                 value: 2.89
                 frame: 1600
             }

             Keyframe {
                 value: 1.89
                 frame: 2000
             }
         }

         KeyframeGroup {
             target: hand_l
             property: "y"
             Keyframe {
                 value: 1
                 frame: 400
             }

             Keyframe {
                 value: 1
                 frame: 1600
             }

             Keyframe {
                 value: 0.5
                 frame: 2000
             }
         }

         KeyframeGroup {
             target: hand_l
             property: "z"
             Keyframe {
                 value: 1
                 frame: 400
             }

             Keyframe {
                 value: 1
                 frame: 1600
             }

             Keyframe {
                 value: -0.1
                 frame: 2000
             }
         }

         KeyframeGroup {
             target: hand_l
             property: "eulerRotation.x"
             Keyframe {
                 value: -15
                 frame: 400
             }

             Keyframe {
                 value: -5
                 frame: 700
             }

             Keyframe {
                 value: -15
                 frame: 1000
             }

             Keyframe {
                 value: -5
                 frame: 1300
             }

             Keyframe {
                 value: -15
                 frame: 1600
             }

             Keyframe {
                 value: -0.18
                 frame: 2000
             }
         }

         KeyframeGroup {
             target: hand_l
             property: "eulerRotation.y"
             Keyframe {
                 value: -15
                 frame: 400
             }

             Keyframe {
                 value: -30
                 frame: 1600
             }

             Keyframe {
                 value: -145
                 frame: 2000
             }

             Keyframe {
                 value: -40
                 frame: 700
             }
         }

         KeyframeGroup {
             target: hand_l
             property: "eulerRotation.z"
             Keyframe {
                 value: -88
                 frame: 400
             }

             Keyframe {
                 value: -30
                 frame: 700
             }

             Keyframe {
                 value: -86.05
                 frame: 1000
             }

             Keyframe {
                 value: -30
                 frame: 1300
             }

             Keyframe {
                 value: -86.05
                 frame: 1600
             }

             Keyframe {
                 value: -178.92
                 frame: 2000
             }
         }

         KeyframeGroup {
             target: morphTarget38
             property: "weight"
             Keyframe {
                 value: 1
                 frame: 0
             }

             Keyframe {
                 value: 0.25
                 frame: 400
             }

             Keyframe {
                 value: 0.25
                 frame: 1600
             }

             Keyframe {
                 value: 1
                 frame: 2000
             }
         }

         KeyframeGroup {
             target: morphTarget42
             property: "weight"
             Keyframe {
                 value: 0
                 frame: 2000
             }

             Keyframe {
                 value: 0.75
                 frame: 1600
             }

             Keyframe {
                 value: 0.75
                 frame: 400
             }

             Keyframe {
                 value: 0
                 frame: 0
             }
         }

         KeyframeGroup {
             target: morphTarget27
             property: "weight"
             Keyframe {
                 value: 0
                 frame: 0
             }

             Keyframe {
                 value: 1
                 frame: 400
             }

             Keyframe {
                 value: 1
                 frame: 1600
             }

             Keyframe {
                 value: 0
                 frame: 2000
             }
         }

         KeyframeGroup {
             target: morphTarget28
             property: "weight"
             Keyframe {
                 value: 1
                 frame: 2000
             }

             Keyframe {
                 value: 0
                 frame: 1600
             }

             Keyframe {
                 value: 0
                 frame: 400
             }

             Keyframe {
                 value: 1
                 frame: 0
             }
         }
     }

Example project @ code.qt.io