Revision control
Copy as Markdown
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import SceneGraphRendering
Item {
width: 800
height: 600
// The checkers background
ShaderEffect {
id: tileBackground
anchors.fill: parent
property real tileSize: 16
property color color1: Qt.rgba(0.9, 0.9, 0.9, 1);
property color color2: Qt.rgba(0.85, 0.85, 0.85, 1);
property size pixelSize: Qt.size(width / tileSize, height / tileSize);
fragmentShader: "qrc:/scenegraph/rhitextureitem/shaders/checker.frag.qsb"
}
//! [0]
ExampleRhiItem {
id: renderer
anchors.fill: parent
anchors.margins: 10
mirrorVertically: cbMirror.checked
sampleCount: cbMSAA.checked ? 4 : 1
fixedColorBufferWidth: cbSize.checked ? slSize.value.toFixed(0) : 0
fixedColorBufferHeight: cbSize.checked ? slSize.value.toFixed(0) : 0
alphaBlending: cbBlend.checked
colorBufferFormat: rdFormatRGBA8.checked ? ExampleRhiItem.TextureFormat.RGBA8
: rdFormatFP16.checked ? ExampleRhiItem.TextureFormat.RGBA16F
: rdFormatFP32.checked ? ExampleRhiItem.TextureFormat.RGBA32F
: ExampleRhiItem.TextureFormat.RGB10A2
// custom properties provided by the QQuickRhiItem subclass: angle, backgroundAlpha
NumberAnimation on angle {
from: 0
to: 360
duration: 5000
loops: Animation.Infinite
running: cbAnimate.checked
}
backgroundAlpha: slAlpha.value
//! [0]
// The transform is just to show something interesting..
transform: [
Rotation { id: rotation; axis.x: 0; axis.z: 0; axis.y: 1; angle: 0; origin.x: renderer.width / 2; origin.y: renderer.height / 2; },
Translate { id: txOut; x: -renderer.width / 2; y: -renderer.height / 2 },
Scale { id: scale; },
Translate { id: txIn; x: renderer.width / 2; y: renderer.height / 2 }
]
}
// Just to show something interesting
SequentialAnimation {
PauseAnimation { duration: 5000 }
ParallelAnimation {
NumberAnimation { target: scale; property: "xScale"; to: 0.6; duration: 1000; easing.type: Easing.InOutBack }
NumberAnimation { target: scale; property: "yScale"; to: 0.6; duration: 1000; easing.type: Easing.InOutBack }
}
NumberAnimation { target: rotation; property: "angle"; to: 80; duration: 1000; easing.type: Easing.InOutCubic }
NumberAnimation { target: rotation; property: "angle"; to: -80; duration: 1000; easing.type: Easing.InOutCubic }
NumberAnimation { target: rotation; property: "angle"; to: 0; duration: 1000; easing.type: Easing.InOutCubic }
NumberAnimation { target: renderer; property: "opacity"; to: 0.5; duration: 1000; easing.type: Easing.InOutCubic }
PauseAnimation { duration: 1000 }
NumberAnimation { target: renderer; property: "opacity"; to: 1.0; duration: 1000; easing.type: Easing.InOutCubic }
ParallelAnimation {
NumberAnimation { target: scale; property: "xScale"; to: 1; duration: 1000; easing.type: Easing.InOutBack }
NumberAnimation { target: scale; property: "yScale"; to: 1; duration: 1000; easing.type: Easing.InOutBack }
}
running: cbAnimate.checked
loops: Animation.Infinite
}
Rectangle {
id: labelFrame
anchors.margins: -10
radius: 5
color: "white"
border.color: "black"
anchors.fill: label
}
Text {
id: label
anchors.bottom: renderer.bottom
anchors.left: renderer.left
anchors.right: renderer.right
anchors.margins: 20
wrapMode: Text.WordWrap
text: qsTr("The triangle on the blue background is rendered by working directly the QRhi APIs on the scene graph render thread. The custom QQuickItem subclasses QQuickRhiItem, and it in effect draws a quad textured with the QRhiTexture containing the custom 3D rendering. Thanks to being a true QQuickItem, 2D/2.5D transforms, blending/opacity, stacking, clipping, etc. all work as usual.")
}
RowLayout {
anchors.top: renderer.top
anchors.right: renderer.right
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
color: "white"
font.pointSize: 16
}
TapHandler {
// qmllint disable signal-handler-parameters
onTapped: settingsDrawer.isOpen = !settingsDrawer.isOpen;
// qmllint enable signal-handler-parameters
}
}
SettingsDrawer {
id: settingsDrawer
title: qsTr("Settings")
isOpen: false
isLandscape: true
width: isLandscape ? implicitWidth * 1.2 : parent.width
height: isLandscape ? parent.height * 0.8 : parent.height * 0.33
CheckBox {
id: cbAnimate
text: qsTr("Animate")
checked: true
}
CheckBox {
id: cbMirror
text: qsTr("Mirror vertically")
checked: false
}
CheckBox {
id: cbMSAA
text: qsTr("Enable 4x MSAA")
checked: false
}
CheckBox {
id: cbSize
text: qsTr("Use fixed size")
checked: false
}
RowLayout {
Label {
text: qsTr("Texture size")
}
Slider {
id: slSize
enabled: cbSize.checked
from: 8
to: 2048
value: 128
Layout.fillWidth: false
}
}
Label {
text: qsTr("Backing texture size: %1x%2 pixels").arg(renderer.effectiveColorBufferSize.width).arg(renderer.effectiveColorBufferSize.height)
}
Label {
text: qsTr("Item logical size: %1x%2").arg(renderer.width).arg(renderer.height)
}
CheckBox {
id: cbBlend
text: qsTr("Force alpha blending\nregardless of item opacity")
checked: false
}
RowLayout {
Label {
text: qsTr("Background alpha")
}
Slider {
id: slAlpha
from: 0
to: 1.0
value: 1.0
Layout.fillWidth: false
}
}
Label {
text: qsTr("Background alpha: %1").arg(renderer.backgroundAlpha.toFixed(2))
}
Label {
text: qsTr("Item opacity: %1").arg(renderer.opacity.toFixed(2))
}
Label {
property string apiName:
if (GraphicsInfo.api === GraphicsInfo.OpenGL)
"OpenGL";
else if (GraphicsInfo.api === GraphicsInfo.Direct3D11)
"D3D11";
else if (GraphicsInfo.api === GraphicsInfo.Direct3D12)
"D3D12";
else if (GraphicsInfo.api === GraphicsInfo.Vulkan)
"Vulkan";
else if (GraphicsInfo.api === GraphicsInfo.Metal)
"Metal";
else if (GraphicsInfo.api === GraphicsInfo.Null)
"Null";
else
"Unknown API";
text: "The underlying graphics API is " + apiName
}
GroupBox {
title: qsTr("Texture format")
ColumnLayout {
RadioButton {
id: rdFormatRGBA8
text: qsTr("8-bit RGBA")
checked: true
Layout.fillWidth: false
}
RadioButton {
id: rdFormatFP16
text: qsTr("Half-float RGBA")
Layout.fillWidth: false
}
RadioButton {
id: rdFormatFP32
text: qsTr("Float RGBA")
Layout.fillWidth: false
}
RadioButton {
id: rdFormatRGB10A2
text: qsTr("10-bit RGB, 2-bit A")
Layout.fillWidth: false
}
}
}
}
}