- Qt 6.5
- Qt Quick 3D
- Qt Quick 3D Examples and Tutorials
- Qt Quick 3D - Screen Space Reflections Example
- Qt Quick 3D | Commercial or GPLv3

# Qt Quick 3D - Screen Space Reflections Example

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

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

     Window {
         width: 1024
         height: 768
         visible: true
         title: qsTr("Screen Space Reflections")

         View3D {
             id: screenSpaceReflectionsView
             anchors.fill: parent
             property double modelRotation: 0
             property double modelHeight: 0

             NumberAnimation on modelRotation {
                 running: true
                 from: 0
                 to: 360
                 duration: 10000
                 loops: Animation.Infinite
             }

             SequentialAnimation on modelHeight {
                 running: true
                 loops: Animation.Infinite
                 NumberAnimation {
                     from: -5
                     to: 20
                     duration: 1000
                 }
                 NumberAnimation {
                     from: 20
                     to: -5
                     duration: 1000
                 }
             }

             environment: SceneEnvironment {
                 backgroundMode: SceneEnvironment.SkyBox
                 probeExposure: 2
                 lightProbe: Texture {
                     source: "maps/OpenfootageNET_lowerAustria01-1024.hdr"
                 }
             }

             Node {

                 Model {
                     source: "#Cube"
                     eulerRotation.y: 0
                     scale: Qt.vector3d(1, 1, 1)
                     position: Qt.vector3d(50.0, 40.0, 50.0)
                     materials:  DefaultMaterial {
                         diffuseMap: Texture {
                             source: "qt_logo_rect.png"
                         }
                     }
                 }

                 Node{

                     Model {
                         source: "#Sphere"
                         position: Qt.vector3d(-400.0, screenSpaceReflectionsView.modelHeight, 0.0)
                         materials: DefaultMaterial {
                             diffuseColor: "magenta"
                         }
                     }
                 }

                 Node{
                     eulerRotation.y: screenSpaceReflectionsView.modelRotation
                     position.y: screenSpaceReflectionsView.modelHeight

                     Model {
                         source: "#Sphere"
                         pivot: Qt.vector3d(0, 0.0, 0.0)
                         position: Qt.vector3d(200.0, 0.0, 0.0)
                         materials: DefaultMaterial {
                             diffuseColor: "green"
                         }
                     }
                 }

                 Node{
                     eulerRotation.y: screenSpaceReflectionsView.modelRotation
                     position.y: screenSpaceReflectionsView.modelHeight

                     Model {
                         source: "#Sphere"
                         eulerRotation.y: 45
                         position: Qt.vector3d(0.0, 0.0, -200.0)
                         materials: DefaultMaterial {
                             diffuseColor: "blue"
                         }
                     }
                 }

                 Node{
                     eulerRotation.y: screenSpaceReflectionsView.modelRotation
                     position.y: screenSpaceReflectionsView.modelHeight

                     Model {
                         source: "#Sphere"
                         position: Qt.vector3d(0.0, 0.0, 200.0)
                         materials: DefaultMaterial {
                             diffuseColor: "red"
                         }
                     }
                 }

                 Model {
                     source: "#Rectangle"
                     scale: Qt.vector3d(5, 5, 5)
                     eulerRotation.x: -90
                     eulerRotation.z: 180
                     position: Qt.vector3d(0.0, -50.0, 0.0)
                     materials: ScreenSpaceReflections {
                         depthBias: depthBiasSlider.value
                         rayMaxDistance: distanceSlider.value
                         marchSteps: marchSlider.value
                         refinementSteps: refinementStepsSlider.value
                         specular: specularSlider.value
                         materialColor: materialColorCheckBox.checked ? "transparent" : "dimgray"
                     }
                 }

                 PerspectiveCamera {
                     id: camera
                     position: Qt.vector3d(0.0, 40.0, 500)
                 }

                 DirectionalLight {
                     y: 0
                     castsShadow: false
                 }
             }

             WasdController {
                 id: wasdController
                 controlledObject: camera
             }

             MouseArea {
                 anchors.fill: parent
                 onClicked: {
                     wasdController.forceActiveFocus()
                 }
             }
         }

         Frame {
             background: Rectangle {
                 color: "#c0c0c0"
                 border.color: "#202020"
             }
             anchors.top: parent.top
             anchors.left: parent.left
             anchors.margins: 10
             Column {
                 id: settingsArea
                 spacing: 5

                 CheckBox {
                     id: materialColorCheckBox
                     text: "Transparent Material"
                 }

                 Row {

                     Slider {
                         id: depthBiasSlider
                         from: 0.0
                         to: 5
                         value: 0.79
                     }
                     Text {
                         anchors.verticalCenter: parent.verticalCenter
                         text: "Depth Bias: " + depthBiasSlider.value.toFixed(2);
                     }
                 }

                 Row {

                     Slider {
                         id: distanceSlider
                         from: 0.0
                         to: 400
                         value: 200
                         stepSize: 1
                     }
                     Text {
                         anchors.verticalCenter: parent.verticalCenter
                         text: "Ray Distance: " + distanceSlider.value
                     }
                 }

                 Row {

                     Slider {
                         id: marchSlider
                         Layout.alignment: Qt.AlignHCenter
                         from: 0
                         to: 2000
                         value: 300
                         stepSize: 1
                     }
                     Text {
                         anchors.verticalCenter: parent.verticalCenter
                         text: "March Steps: " + marchSlider.value
                     }
                 }

                 Row {
                     Slider {
                         id: refinementStepsSlider
                         Layout.alignment: Qt.AlignHCenter
                         from: 0
                         to: 50
                         value: 10
                         stepSize: 1
                     }
                     Text {
                         anchors.verticalCenter: parent.verticalCenter
                         text: "Refinement Steps: " + refinementStepsSlider.value
                     }
                 }

                 Row {
                     Slider {
                         id: specularSlider
                         Layout.alignment: Qt.AlignHCenter
                         from: 0
                         to: 1
                         value: 1.0
                     }
                     Text {
                         anchors.verticalCenter: parent.verticalCenter
                         text: "Specular: " + specularSlider.value.toFixed(2);
                     }
                 }
             }
         }

         Item {
             width: debugViewToggleText.implicitWidth
             height: debugViewToggleText.implicitHeight
             anchors.right: parent.right
             Label {
                 id: debugViewToggleText
                 text: "Click here " + (dbg.visible ? "to hide DebugView" : "for DebugView")
                 anchors.right: parent.right
                 anchors.top: parent.top
             }
             MouseArea {
                 anchors.fill: parent
                 onClicked: dbg.visible = !dbg.visible
                 DebugView {
                     y: debugViewToggleText.height * 2
                     anchors.right: parent.right
                     source: screenSpaceReflectionsView
                     id: dbg
                     visible: false
                 }
             }
         }
     }