Qt/QML/OpenGL: Z-ordering doesn't work with semi-transparent items with OpenGL under QML

Question

Been following the examples found here and have an issue where semi-transparent items are always drawn on top of opaque items no matter their order in QML or how the z property is set.

With no OpenGL Item, everything works as expected

import QtQuick 2.14
import TestScene 1.0

Item {
    width: 160
    height: 120

    /*
    TestScene {
        // draw checkered pattern in OpenGL
    }
    */

    Rectangle {
        id: rect1

        x: 32
        y: 32
        width: 32
        height: 32

        color: Qt.rgba(1, 0, 0, 0.5)
    }

    Rectangle {
        id: rect2

        x: 32+16
        y: 32+16
        width: 32
        height: 32

        color: Qt.rgba(0, 0, 1, 1)
    }
}

desired

When uncommenting the TestScene item

result

This happens even if rect2 is set before rect1 and regardless of the z property of either item.

The OpenGL code in C++ is pretty much as the Squircle example, and this is on Windows 10 and Qt 5.14.

Just curious why this happens and if it can be prevented or is it just a limitation of drawing OpenGL under QML.

user_12997202 · Answer

Take a look at QOpenGLFrameBuffer.

https://doc.qt.io/qt-5/qopenglframebufferobject.html

It allows fine grained control of your opengl based item's placement in the QML scenegraph versus the technique you are using, which I believe allows rendering custom opengl items before or after the rest of the QML scene graph items are rendered.

There is a sample project located at: qt\Examples\$QTVERSION\quick\scenegraph extureinsgnode

Qt/QML/OpenGL: Z-ordering doesn't work with semi-transparent items with OpenGL under QML

1 Answers