Add the rhitextureitem example

fboitem, the OpenGL-based QQuickFramebufferObject example is now gone,
replaced by the rhitextureitem example.

It is now possible to implement a custom QQuickItem that renders into a
QRhiTexture and then draws a triangle/strip geometry textured with that
texture using just public Qt Quick APIs and the semi-public QRhi APIs.

There should be conveniences provided for this in future Qt versions,
but for the time being we provide an example how applications can do
this in Qt 6.6 already. This complements the rhiunderqml example which
shows the underlay/overlay approach, and the customrendernode example
that shows the "inline" approach with a custom QSGRenderNode. The
rhitextureitem example added here shows the third, "offscreen" approach
that goes through a texture.

The example docs are better than before but not yet complete.
To be extended separately.

Task-number: QTBUG-113331
Change-Id: I83000c08b057dd72371e2909905120dc496cb34d
Reviewed-by: Andy Nichols <andy.nichols@qt.io>

1 files changed, 88 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..5a3119c87a
--- /dev/null
+++ b/examples/quick/scenegraph/rhitextureitem/main.qml
@@ -0,0 +1,88 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+import SceneGraphRendering
+
+Item {
+    width: 400
+    height: 400
+
+    // 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
+
+        NumberAnimation on angle {
+            from: 0
+            to: 360
+            duration: 5000
+            loops: Animation.Infinite
+        }
+    //! [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: 0.8; 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: true
+        loops: Animation.Infinite
+    }
+
+    Rectangle {
+        id: labelFrame
+        anchors.margins: -10
+        radius: 5
+        color: "white"
+        border.color: "black"
+        opacity: 0.8
+        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 blue rectangle with the vintage 'Q' is rendered by the application by directly using the QRhi APIs on the scene graph render thread. The custom QQuickItem then draws a quad textured with the QRhiTexture containing the custom 3D rendering.")
+    }
+}