OpenGL has very strong rendering effects. We can combine the QML interface with OpenGL for stronger rendering. In today’s example, we’ll copy the routine “Scene Graph-OpengL Under QML” and port it to our Ubuntu mobile platform.

\

To facilitate porting, we used the “QtQuick App with QML UI (Qmake)” template from our Ubuntu SDK.

\

\

\

The advantage of this template is that it is easy to incorporate the C++ code we need into our application. We need to add our C++ code to our.pro files:

\

SOURCES += main.cpp squircle.cpp
HEADERS += squircle.h
Copy the code

In addition:

main.cpp

\

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQuickView>

#include "squircle.h"

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);

    qmlRegisterType<Squircle>("OpenGLUnderQML", 1, 0, "Squircle");

    QQuickView view;
    view.setSource(QUrl(QStringLiteral("qrc:///Main.qml")));
    view.setResizeMode(QQuickView::SizeRootObjectToView);
    view.show();
    return app.exec();
}
Copy the code

\

Here, we registered “Squircle” and instantiated it in our QML file.

\

\

Main.qml

\

Import QtQuick 2.0 import Ubuntu.Components 1.1 import OpenGLUnderQML 1.0 Item {width: 320 height: 480 Squircle { SequentialAnimation on t { NumberAnimation { to: 1; duration: 2500; easing.type: Easing.InQuad } NumberAnimation { to: 0; duration: 2500; easing.type: Easing.OutQuad } loops: Animation.Infinite running: true } } //! [1] / /! [2] Rectangle {color: qt.rgba (1, 1, 1, 0.7) radius: 10 border. Width: 1 border. Color: "white" anchors. label anchors.margins: -10 } Text { id: label color: "black" wrapMode: Text.WordWrap text: "The background here is a squircle rendered with raw OpenGL using the 'beforeRender()' signal in QQuickWindow. This text  label and its border is rendered using QML" anchors.right: parent.right anchors.left: parent.left anchors.bottom: parent.bottom anchors.margins: 20 } }Copy the code

Note that we can no longer use MainView and Page, otherwise we won’t display our images correctly.

\

To run our app:

\

\

\

\

As you can see from the above, OpenGL works perfectly with QML.

\

The entire project source at: github.com/liu-xiao-gu…