- Qt 6.7
- Qt Quick 3D
- Qt Quick 3D Examples and Tutorials
- Qt Quick 3D - Offline Shaders Example
- Qt Quick 3D | Commercial or GPLv3

# Qt Quick 3D - Offline Shaders Example

     // Copyright (C) 2019 The Qt Company Ltd.
     // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause

     import QtQuick
     import QtQuick.Controls
     import QtQuick.Layouts
     import QtQuick3D
     import QtQuick3D.Helpers

     ApplicationWindow {
         id: window
         width: 1280
         height: 720
         visible: true
         title: qsTr("Lights Example")

         property bool isLandscape: width > height

         View3D {
             id: v3d

             anchors.bottom: parent.bottom
             anchors.right: parent.right
             anchors.left: window.isLandscape ? settingsDrawer.right : parent.left
             anchors.top: window.isLandscape ? parent.top : settingsDrawer.bottom

             environment: SceneEnvironment {
                 clearColor: "#808080"
                 backgroundMode: SceneEnvironment.Color
                 antialiasingMode: SceneEnvironment.MSAA
                 antialiasingQuality: SceneEnvironment.High
             }

             PerspectiveCamera {
                 position: Qt.vector3d(0, 400, 600)
                 eulerRotation.x: -30
                 clipFar: 2000
             }

             DirectionalLight {
                 id: light1
                 color: Qt.rgba(1.0, 0.1, 0.1, 1.0)
                 ambientColor: Qt.rgba(0.1, 0.1, 0.1, 1.0)
                 position: Qt.vector3d(0, 200, 0)
                 rotation: Quaternion.fromEulerAngles(-135, -90, 0)
                 shadowMapQuality: Light.ShadowMapQualityHigh
                 visible: directionalLightCheckBox.checked
                 castsShadow: checkBoxShadows.checked
                 brightness: directionalLightSlider.value
                 SequentialAnimation on rotation {
                     loops: Animation.Infinite
                     QuaternionAnimation {
                         to: Quaternion.fromEulerAngles(-45, -90, 0)
                         duration: 2000
                         easing.type: Easing.InOutQuad
                     }
                     QuaternionAnimation {
                         to: Quaternion.fromEulerAngles(-135, -90, 0)
                         duration: 2000
                         easing.type: Easing.InOutQuad
                     }
                 }
             }

             PointLight {
                 id: light2
                 color: Qt.rgba(0.1, 1.0, 0.1, 1.0)
                 ambientColor: Qt.rgba(0.1, 0.1, 0.1, 1.0)
                 position: Qt.vector3d(0, 300, 0)
                 shadowMapFar: 2000
                 shadowMapQuality: Light.ShadowMapQualityHigh
                 visible: pointLightCheckBox.checked
                 castsShadow: checkBoxShadows.checked
                 brightness: pointLightSlider.value
                 SequentialAnimation on x {
                     loops: Animation.Infinite
                     NumberAnimation {
                         to: 400
                         duration: 2000
                         easing.type: Easing.InOutQuad
                     }
                     NumberAnimation {
                         to: 0
                         duration: 2000
                         easing.type: Easing.InOutQuad
                     }
                 }
             }

             SpotLight {
                 id: light4
                 color: Qt.rgba(1.0, 0.9, 0.7, 1.0)
                 ambientColor: Qt.rgba(0.0, 0.0, 0.0, 0.0)
                 position: Qt.vector3d(0, 250, 0)
                 eulerRotation.x: -45
                 shadowMapFar: 2000
                 shadowMapQuality: Light.ShadowMapQualityHigh
                 visible: spotLightCheckBox.checked
                 castsShadow: checkBoxShadows.checked
                 brightness: spotLightSlider.value
                 coneAngle: 50
                 innerConeAngle: 30
                 PropertyAnimation on eulerRotation.y {
                     loops: Animation.Infinite
                     from: 0
                     to: -360
                     duration: 10000
                 }
             }

             Model {
                 source: "#Rectangle"
                 y: -200
                 scale: Qt.vector3d(15, 15, 15)
                 eulerRotation.x: -90
                 materials: [
                     PrincipledMaterial {
                         baseColor: Qt.rgba(0.8, 0.6, 0.4, 1.0)
                     }
                 ]
             }
             Model {
                 source: "#Rectangle"
                 z: -400
                 scale: Qt.vector3d(15, 15, 15)
                 materials: [
                      PrincipledMaterial {
                         baseColor: Qt.rgba(0.8, 0.8, 0.9, 1.0)
                     }
                 ]
             }

             RotatingTeaPot {
                 visible: !checkBoxCustomMaterial.checked
                 material: PrincipledMaterial {
                     baseColor: Qt.rgba(0.9, 0.9, 0.9, 1.0)
                 }
                 animate: checkBoxAnimate.checked
             }

             RotatingTeaPot {
                 visible: checkBoxCustomMaterial.checked
                 material: CustomMaterial {
                     id: customMaterial
                     vertexShader: "custom.vert"
                     property real uAmplitude: 0.5
                     property real uTime: 0.0
                     SequentialAnimation {
                         running: true
                         loops: Animation.Infinite
                         NumberAnimation { target: customMaterial; property: "uTime"; from: 0.0; to: 10.0; duration: 10000 }
                         NumberAnimation { target: customMaterial; property: "uTime"; from: 10.0; to: 0.0; duration: 10000 }
                     }
                 }
                 animate: checkBoxAnimate.checked
             }

             Model {
                 // Directional Light Marker
                 property real size: directionalLightSlider.highlight ? 0.2 : 0.1
                 source: "#Cube"
                 position: light1.position
                 rotation: light1.rotation
                 scale: Qt.vector3d(size, size, size * 2)
                 materials: [
                     PrincipledMaterial {
                         baseColor: light1.color
                         lighting: PrincipledMaterial.NoLighting
                     }
                 ]
                 castsShadows: false
                 visible: directionalLightCheckBox.checked
             }
             Model {
                 // Point Light Marker
                 source: "#Sphere"
                 position: light2.position
                 rotation: light2.rotation
                 property real size: pointLightSlider.highlight ? 0.2 : 0.1
                 scale: Qt.vector3d(size, size, size)
                 materials: [
                     PrincipledMaterial {
                         baseColor: light2.color
                         lighting: PrincipledMaterial.NoLighting
                     }
                 ]
                 castsShadows: false
                 visible: pointLightCheckBox.checked
             }
             Node {
                 // Spot Light Marker
                 position: light4.position
                 rotation: light4.rotation
                 property real size: spotLightSlider.highlight ? 0.2 : 0.1
                 scale: Qt.vector3d(size, size, size)
                 Model {
                     source: "#Cone"
                     castsShadows: false
                     eulerRotation.x: 90
                     materials: PrincipledMaterial {
                         baseColor: light4.color
                         lighting: PrincipledMaterial.NoLighting
                     }
                 }
                 visible: spotLightCheckBox.checked
             }

             DebugView {
                 id: dbg
                 anchors.top: parent.top
                 anchors.right: parent.right
                 source: v3d
                 visible: debugViewCheckbox.checked
             }
         }

         RowLayout {
             anchors.bottom: v3d.bottom
             anchors.left: v3d.left
             anchors.margins: 10
             Item {
                 id: settingsButton
                 implicitWidth: 64
                 implicitHeight: 64
                 Image {
                     anchors.centerIn: parent
                     source: "icon_settings.png"
                 }

                 HoverHandler {
                     id: hoverHandler
                 }
             }
             Text {
                 Layout.alignment: Qt.AlignVCenter
                 text: settingsDrawer.title
                 visible: !settingsDrawer.isOpen
                 color: "white"
                 font.pointSize: 16
             }
             TapHandler {
                 // qmllint disable signal-handler-parameters
                 onTapped: settingsDrawer.isOpen = !settingsDrawer.isOpen;
                 // qmllint enable signal-handler-parameters
             }
         }

         component SliderWithValue : RowLayout {
             property alias value: slider.value
             property alias from: slider.from
             property alias to: slider.to
             readonly property bool highlight: slider.hovered || slider.pressed
             Slider {
                 id: slider
                 stepSize: 0.01
                 Layout.minimumWidth: 200
                 Layout.maximumWidth: 200
             }
             Label {
                 id: valueText
                 text: slider.value.toFixed(2)
                 Layout.minimumWidth: 80
                 Layout.maximumWidth: 80
             }
         }

         SettingsDrawer {
             id: settingsDrawer
             title: qsTr("Settings")
             isLandscape: window.isLandscape
             width: window.isLandscape ? implicitWidth : window.width
             height: window.isLandscape ? window.height : window.height * 0.33

             CheckBox {
                 id: checkBoxShadows
                 text: qsTr("Enable Shadows")
                 checked: true
             }
             CheckBox {
                 id: checkBoxAnimate
                 text: qsTr("Rotate Teapot")
                 checked: true
             }
             CheckBox {
                 id: checkBoxCustomMaterial
                 text: qsTr("Custom Material")
                 checked: false
             }

             Label {
                 // spacer
             }

             CheckBox {
                 id: directionalLightCheckBox
                 text: qsTr("Directional Light")
                 checked: true
             }
             SliderWithValue {
                 id: directionalLightSlider
                 value: 0.5
                 from: 0
                 to: 1
                 enabled: directionalLightCheckBox.checked
             }

             Label {
                 // spacer
             }

             CheckBox {
                 id: pointLightCheckBox
                 text: qsTr("Point Light")
                 checked: false
             }
             SliderWithValue {
                 id: pointLightSlider
                 value: 6
                 from: 0
                 to: 10
                 enabled: pointLightCheckBox.checked
             }
             Label {
                 // spacer
             }
             CheckBox {
                 id: spotLightCheckBox
                 text: qsTr("Spot Light")
                 checked: false
             }
             SliderWithValue {
                 id: spotLightSlider
                 value: 10
                 from: 0
                 to: 30
                 enabled: spotLightCheckBox.checked
             }
             Label {
                 // spacer
             }
             CheckBox {
                 id: debugViewCheckbox
                 text: qsTr("Enable Debug View")
                 checked: false
             }
         }
     }