QtQuick3D rendering issue

[Tomislav]

First of all hello to everyone it is my first time posting here!
I'm trying to render multiple meshes using QtQuick3D, but as I started to add more complex models which consist of multiple meshes embedded on inside another I saw that there is some kind of depth fighting between meshes that are semi-transparent.

• In the documentation of Default Material I saw that setting the blendMode to DefaultMaterial.Screen would fix that issue and indeed it did but when multiple semi-transparent meshes are overlapping the color is white so it does not work for my case.

• The next thing that I tried is setting depthBias property of Model QML Type which also fixes the depth fighting but since my camera is rotating the meshes look different based on the camera position - so again it will not serve my purpouse.

I made a code snippet that showcases this issue:

import QtQuick
import QtQuick3D
import QtQuick3D.Helpers

Item {
    id: root
    anchors.fill: parent

    View3D {
        id: view3D
        anchors.fill: parent
        camera: PerspectiveCamera {
            id: perspectiveCamera
            position: Qt.vector3d(0, 10, 200)
            eulerRotation: Qt.vector3d(0, 0, 0)  // Adjust rotation to look at the origin
        }

        OrbitCameraController {
            anchors.fill: parent
            origin: rootNode
            camera: perspectiveCamera
        }

        DirectionalLight {
            color: "white"
            eulerRotation: perspectiveCamera.eulerRotation
        }

        Node {
            id: rootNode

            Repeater3D {
                id: meshRepeater
                model: [
                    { mesh: "#Sphere", color: Qt.rgba(255/255,100/255,100/255, 1.0), position: Qt.vector3d(-20, 0, 0), depth: 10},
                    { mesh: "#Sphere", color: Qt.rgba(100/255,255/255,100/255, 1.0), position: Qt.vector3d(0, 0, 20), depth: 20},
                    { mesh: "#Sphere", color: Qt.rgba(100/255,100/255,255/255, 1.0), position: Qt.vector3d(20, 0, 0), depth: 30},
                ]
                delegate:
                    Model {
                    source: modelData.mesh
                    scale: Qt.vector3d(1, 1, 1)
                    position: modelData.position
                    // depthBias: modelData.depth
                    materials: [
                        DefaultMaterial {
                            diffuseColor: modelData.color
                            opacity: 0.5
                            // blendMode: DefaultMaterial.Screen
                        }

                    ]
                }
            }
        }
    }
}

I suspect that the issue is linked to the part that there is no depth peeling, I tried this same example with VTK library and it does not happen. Can I resolve this with some kind of a Custom Material? The example in the pictures is caused by minimal movement, if someone is interested I can provide a video. Any help or clue is welcomed, thank you!

[Jonas Karlsson]

Hi, there has recently been some improvements in OIT in Qt 6.9, see https://doc-snapshots.qt.io/qt6-dev/qml-qtquick3d-sceneenvironment.html#oitMethod-prop . I suggest you try it out when the 6.9 beta is released next week.

[Tomislav]

@Jonas-Karlsson Thank you a lot, I will try it out.

[Tomislav]

@Jonas-Karlsson I tried it and it works on a desktop app! However it seems that it is not yet supported by the WebGL - it does not work on a WebAssembly application. Let me know if you have any more ideas and if not I will close this as resolved since it is probably not related anymore to Qt.

[Jonas Karlsson]

It's probably not supported on WebGL since it requires MRT and per rendertarget blending.