OpenGL scene under Qt qml application

Question

This should be the best way how to add custom opengl into qml app.

http://qt-project.org/doc/qt-5/qtquick-scenegraph-openglunderqml-example.html

The problem is, i dont want to paint over the whole window, but just in rectangle that is occupied by my opengl custom qt quick item. I thought i can just call glViewport with appropriate parameters, so opengl will paint just rectangle of my item.

Actually, this doesn't work for me.

qml:

import QtQuick 2.2
import QtQuick.Controls 1.1
import ge.components 1.0

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    color: "red"

    menuBar: MenuBar {
        Menu {
            title: qsTr("Filxe")
            MenuItem {
                text: qsTr("Exit")
                onTriggered: Qt.quit();
            }
        }
    }

    GLViewer {
        width: 200
        height: 200
        x: 100
        y: 100
    }
}

qt quick item: In paint method, i first fill whole window with color of ApplicationWindow and then i want to fill just rectangle occupied by my item with black color. Actually it fill the whole window with black, why???

#include "glviewer.h"
#include <QQuickWindow>
#include <iostream>
#include <QColor>

using namespace std;

GLViewer::GLViewer(QQuickItem *parent) :
    QQuickItem(parent)
{
    connect(this, SIGNAL(windowChanged(QQuickWindow*)), this, SLOT(handleWindowChanged(QQuickWindow*)));
}

void GLViewer::handleWindowChanged(QQuickWindow *win)
{
    if (win) {
        connect(win, SIGNAL(beforeRendering()), this, SLOT(paint()), Qt::DirectConnection);
        win->setClearBeforeRendering(false);
    }
}

void GLViewer::paint() {

    QColor color = window()->color();
    glClearColor(color.red(), color.green(), color.blue(), color.alpha());
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

    cout << "X: " << x() << ", Y: " << y() << ", W: " << width() << ", H: " << height() << endl;

    glViewport(x(), y(), width(), height());
    glClearColor(0.0f, 0.0f, 0.0f, 1.0f);
    glClear(GL_COLOR_BUFFER_BIT);

}

Answer 1

There are two issues with your code. First one, ApplicationWindow has no color attribute then when you set

color: "red"

in this component you don't set any color (that is color is black). You can set a background color for your ApplicationWindow adding a Rectangle component before your GLViewer as follow

Rectangle {
    width: parent.width
    height: parent.height
    anchors.centerIn: parent
    color: "red"
}

Second one, you are drawing in main windows GL context then, even if viewport is correctly setted, the following lines of code

glClearColor(0.0f, 0.0f, 0.0f, 1.0f);
glClear(GL_COLOR_BUFFER_BIT);

will clear the entire window. If you want to clear only a part of the window you have to use glScissor

glViewport(x, y, w, h);

glEnable(GL_SCISSOR_TEST);
glScissor(x,y,w,h);

glClearColor(0, 0, 0, 1);
glClear(GL_COLOR_BUFFER_BIT);

glDisable(GL_SCISSOR_TEST);

You can find a complete example (based on your link) on github .

Answer 2

How do you initialize your GLViewer ? Maybe, you should create a QQuickItem inside your QQuickWindow and cast this item to your GLViewer