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
}
}
}
}