How to render a OpenGL 2D texture on a QML surface?

Question

I have a valid OpenGL 2D texture. What is the best and simplest way to render it on a QML surface? Any simple Qt example(s) that I can refer to?

Basically I have the texture ID which is a GLuint. I do have access to the application's QOpenGLContext* which I believe is necessary to render the texture. Is there a simple example on how to render a texture on QML?

Environment:
MacOS Monterey and Android are my target platforms.

I don't find a straight example of this anywhere.

did you try to render a textured quad? unless there's something QML specific for drawing an existing texture, that's going to be as simple as it gets.. — Yakov Galka, Jan 23 '23 at 19:53
There no straight example of this using Qt. This is a valid question. — TheWaterProgrammer, Jan 24 '23 at 07:48

Stephen Quan · Answer 1 · 2023-02-15T07:40:20.900

Below is a QML demo of a spinning 3D cube with the faces replaced with a Texture png.

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick3D
Page {
    background: Rectangle { color: "#848895" }
    Node {
        id: standAloneScene
        DirectionalLight { ambientColor: Qt.rgba(1.0, 1.0, 1.0, 1.0) }
        Node {
            id: node
            Model {
                source: "#Cube"
                materials: [
                    DefaultMaterial {
                        diffuseMap: Texture {
                            sourceItem: Rectangle {
                                width: 256
                                height: 256
                                color: "#78a"
                                Image {
                                    anchors.centerIn: parent
                                    width: 224
                                    height: 224
                                    source: "https://stephenquan.github.io/images/qt/madewithqt.png"
                                }
                            }
                        }
                    }
                ]
            }
        }
        OrthographicCamera {
            id: cameraOrthographicFront
            lookAtNode: node
            y: 800; z: 1000
        }
    }
    View3D {
        anchors.fill: parent
        importScene: standAloneScene
        camera: cameraOrthographicFront
    }
    NumberAnimation {
        target: node
        property: "eulerRotation.y"
        loops: Animation.Infinite
        running: true
        from: 720; to: 0
        duration: 10000
    }
}

You can Try it Online!

See:

hahaha. you got me. I did try, but, I hit a limitation in that Web Assembly not supporting 3D textures. — Stephen Quan, Jan 24 '23 at 12:34

How to render a OpenGL 2D texture on a QML surface?

1 Answers1