diff options
Diffstat (limited to 'examples/quick/scenegraph/rhitextureitem/main.qml')
| -rw-r--r-- | examples/quick/scenegraph/rhitextureitem/main.qml | 259 |
1 files changed, 259 insertions, 0 deletions
diff --git a/examples/quick/scenegraph/rhitextureitem/main.qml b/examples/quick/scenegraph/rhitextureitem/main.qml new file mode 100644 index 0000000000..dc386d2cf2 --- /dev/null +++ b/examples/quick/scenegraph/rhitextureitem/main.qml @@ -0,0 +1,259 @@ +// 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 + } + } + } + } +} |