Unable to have a background component with qml + opengl scene graph

[rannamal]

Consider the opengl under qml scene graph example http://doc.qt.io/qt-4.8/http://doc.qt.io/qt-5/qtquick-scenegraph-openglunderqml-example.html

Everything works fine until i create a background rectangle of any color with full opacity.
I expect the squircle opengl widget to be shown with the rectangular component as a background but actually the background rectangle is drawn above the squircle and I am not able to see the opengl widget drawn using the shaders.

Actual code :

import QtQuick 2.0
import OpenGLUnderQML 1.0
 
Item {
 
    width: 320
    height: 480
 
    //Actual widget which is drawn using opengl
    Squircle {
    }
}

import QtQuick 2.0
import OpenGLUnderQML 1.0

Item {

    width: 320
    height: 480

    //Actual widget which is drawn using opengl
    Squircle {
    }
}

To copy to clipboard, switch view to plain text mode 

Modified Code

import QtQuick 2.0
import OpenGLUnderQML 1.0
 
Item {
 
    width: 320
    height: 480
 
    //Background rectangle which i expect to be shown below the opengl widget
    //But actually it gets drawn over the opengl widget
    //This is visible by reducing the opacity of the background rectnagle
    Rectangle {
        anchors.fill: parent
        color: "#ffff0000"
    }
 
    Squircle {
    }
}

import QtQuick 2.0
import OpenGLUnderQML 1.0

Item {

    width: 320
    height: 480

    //Background rectangle which i expect to be shown below the opengl widget
    //But actually it gets drawn over the opengl widget
    //This is visible by reducing the opacity of the background rectnagle
    Rectangle {
        anchors.fill: parent
        color: "#ffff0000"
    }

    Squircle {
    }
}

To copy to clipboard, switch view to plain text mode 

Will there be any way to draw any qml components below the opengl widget drawn using QML ?

[rannamal]

I am able to draw the opengl component above the qml component when i paint on listening to afterRendering signal ( instead of beforeRendering signal )

changed from

connect(window(), &QQuickWindow::beforeRendering, m_renderer, &SquircleRenderer::paint, Qt::DirectConnection);

connect(window(), &QQuickWindow::beforeRendering, m_renderer, &SquircleRenderer::paint, Qt::DirectConnection);

To copy to clipboard, switch view to plain text mode 

to

connect(window(), &QQuickWindow::afterRendering, m_renderer, &SquircleRenderer::paint, Qt::DirectConnection);

connect(window(), &QQuickWindow::afterRendering, m_renderer, &SquircleRenderer::paint, Qt::DirectConnection);

To copy to clipboard, switch view to plain text mode 

Reduced the view port dimensions from

glViewport(0, 0, m_viewportSize.width(), m_viewportSize.height());

glViewport(0, 0, m_viewportSize.width(), m_viewportSize.height());

To copy to clipboard, switch view to plain text mode 

to

glViewport(80, 0, 150, 500);

glViewport(80, 0, 150, 500);

To copy to clipboard, switch view to plain text mode 

I draw the gl widget only for half of the screen and i expect the rest half of the screen to show my qml component in the background. But the opengl widget draws on one half where its intented to and it leaves a black area in the rest of the screen where i expect the qml background to be shown.

Any ideas will be appreciated. Thanks in advance.