QQuickRenderControl OpenGL Example¶
The QQuickRenderControl OpenGL Example shows how to render a Qt Quick scene into a texture that is then used by a non-Quick based OpenGL renderer.
# Copyright (C) 2022 The Qt Company Ltd.
# SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
from __future__ import annotations
import ctypes
import numpy
from OpenGL.GL import (GL_COLOR_BUFFER_BIT, GL_CULL_FACE, GL_CW,
GL_DEPTH_BUFFER_BIT, GL_DEPTH_TEST, GL_FALSE, GL_FLOAT,
GL_TEXTURE_2D, GL_TRIANGLES)
from PySide6.QtGui import QMatrix4x4, QOpenGLContext
from PySide6.QtOpenGL import (QOpenGLBuffer, QOpenGLShader,
QOpenGLShaderProgram, QOpenGLVertexArrayObject)
from shiboken6 import VoidPtr
VERTEXSHADER_SOURCE = """attribute highp vec4 vertex;
attribute lowp vec2 coord;
varying lowp vec2 v_coord;
uniform highp mat4 matrix;
void main() {
v_coord = coord;
gl_Position = matrix * vertex;
}
"""
FRAGMENTSHADER_SOURCE = """varying lowp vec2 v_coord;
uniform sampler2D sampler;
void main() {
gl_FragColor = vec4(texture2D(sampler, v_coord).rgb, 1.0);
}
"""
FLOAT_SIZE = ctypes.sizeof(ctypes.c_float)
VERTEXES = numpy.array([-0.5, 0.5, 0.5, 0.5, -0.5, 0.5, -0.5, -0.5, 0.5,
0.5, -0.5, 0.5, -0.5, 0.5, 0.5, 0.5, 0.5, 0.5,
-0.5, -0.5, -0.5, 0.5, -0.5, -0.5, -0.5, 0.5, -0.5,
0.5, 0.5, -0.5, -0.5, 0.5, -0.5, 0.5, -0.5, -0.5,
0.5, -0.5, -0.5, 0.5, -0.5, 0.5, 0.5, 0.5, -0.5,
0.5, 0.5, 0.5, 0.5, 0.5, -0.5, 0.5, -0.5, 0.5,
-0.5, 0.5, -0.5, -0.5, -0.5, 0.5, -0.5, -0.5, -0.5,
-0.5, -0.5, 0.5, -0.5, 0.5, -0.5, -0.5, 0.5, 0.5,
0.5, 0.5, -0.5, -0.5, 0.5, 0.5, -0.5, 0.5, -0.5,
-0.5, 0.5, 0.5, 0.5, 0.5, -0.5, 0.5, 0.5, 0.5,
-0.5, -0.5, -0.5, -0.5, -0.5, 0.5, 0.5, -0.5, -0.5,
0.5, -0.5, 0.5, 0.5, -0.5, -0.5, -0.5, -0.5, 0.5],
dtype=numpy.float32)
TEX_COORDS = numpy.array([0.0, 0.0, 1.0, 1.0, 1.0, 0.0,
1.0, 1.0, 0.0, 0.0, 0.0, 1.0,
1.0, 1.0, 1.0, 0.0, 0.0, 1.0,
0.0, 0.0, 0.0, 1.0, 1.0, 0.0,
1.0, 1.0, 1.0, 0.0, 0.0, 1.0,
0.0, 0.0, 0.0, 1.0, 1.0, 0.0,
0.0, 0.0, 1.0, 1.0, 1.0, 0.0,
1.0, 1.0, 0.0, 0.0, 0.0, 1.0,
0.0, 1.0, 1.0, 0.0, 1.0, 1.0,
1.0, 0.0, 0.0, 1.0, 0.0, 0.0,
1.0, 0.0, 1.0, 1.0, 0.0, 0.0,
0.0, 1.0, 0.0, 0.0, 1.0, 1.0], dtype=numpy.float32)
class CubeRenderer():
def __init__(self, offscreenSurface):
self.m_angle = 0
self.m_offscreenSurface = offscreenSurface
self.m_context = None
self.m_program = None
self.m_vbo = None
self.m_vao = None
self.m_matrixLoc = 0
self.m_proj = QMatrix4x4()
def __del__(self):
# Use a temporary offscreen surface to do the cleanup. There may not
# be a native window surface available anymore at self stage.
self.m_context.makeCurrent(self.m_offscreenSurface)
del self.m_program
del self.m_vbo
del self.m_vao
self.m_context.doneCurrent()
def init(self, w, share):
self.m_context = QOpenGLContext()
self.m_context.setShareContext(share)
self.m_context.setFormat(w.requestedFormat())
self.m_context.create()
if not self.m_context.makeCurrent(w):
return
f = self.m_context.functions()
f.glClearColor(0.0, 0.1, 0.25, 1.0)
f.glViewport(0, 0, w.width() * w.devicePixelRatio(),
w.height() * w.devicePixelRatio())
self.m_program = QOpenGLShaderProgram()
self.m_program.addCacheableShaderFromSourceCode(QOpenGLShader.Vertex,
VERTEXSHADER_SOURCE)
self.m_program.addCacheableShaderFromSourceCode(QOpenGLShader.Fragment,
FRAGMENTSHADER_SOURCE)
self.m_program.bindAttributeLocation("vertex", 0)
self.m_program.bindAttributeLocation("coord", 1)
self.m_program.link()
self.m_matrixLoc = self.m_program.uniformLocation("matrix")
self.m_vao = QOpenGLVertexArrayObject()
self.m_vao.create()
self.m_vbo = QOpenGLBuffer()
self.m_vbo.create()
self.m_vbo.bind()
vertexCount = 36
self.m_vbo.allocate(FLOAT_SIZE * vertexCount * 5)
vertex_data = VERTEXES.tobytes()
tex_coord_data = TEX_COORDS.tobytes()
self.m_vbo.write(0, VoidPtr(vertex_data),
FLOAT_SIZE * vertexCount * 3)
self.m_vbo.write(FLOAT_SIZE * vertexCount * 3,
VoidPtr(tex_coord_data),
FLOAT_SIZE * vertexCount * 2)
self.m_vbo.release()
if self.m_vao.isCreated():
self.setupVertexAttribs()
def resize(self, w, h):
self.m_proj.setToIdentity()
self.m_proj.perspective(45, w / float(h), 0.01, 100.0)
def setupVertexAttribs(self):
self.m_vbo.bind()
self.m_program.enableAttributeArray(0)
self.m_program.enableAttributeArray(1)
f = self.m_context.functions()
null = VoidPtr(0)
pointer = VoidPtr(36 * 3 * FLOAT_SIZE)
f.glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 0, null)
f.glVertexAttribPointer(1, 2, GL_FLOAT, GL_FALSE, 0, pointer)
self.m_vbo.release()
def render(self, w, share, texture):
if not self.m_context:
self.init(w, share)
if not self.m_context.makeCurrent(w):
return
f = self.m_context.functions()
f.glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT)
if texture:
f.glBindTexture(GL_TEXTURE_2D, texture)
f.glFrontFace(GL_CW) # because our cube's vertex data is such
f.glEnable(GL_CULL_FACE)
f.glEnable(GL_DEPTH_TEST)
self.m_program.bind()
# If VAOs are not supported, set the vertex attributes every time.
if not self.m_vao.isCreated():
self.setupVertexAttribs()
m = QMatrix4x4()
m.translate(0, 0, -2)
m.rotate(90, 0, 0, 1)
m.rotate(self.m_angle, 0.5, 1, 0)
self.m_angle += 0.5
self.m_program.setUniformValue(self.m_matrixLoc, self.m_proj * m)
# Draw the cube.
f.glDrawArrays(GL_TRIANGLES, 0, 36)
self.m_context.swapBuffers(w)
# Copyright (C) 2022 The Qt Company Ltd.
# SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
from __future__ import annotations
import sys
from PySide6.QtGui import QGuiApplication
from PySide6.QtQuick import QQuickWindow, QSGRendererInterface
from window_singlethreaded import WindowSingleThreaded
if __name__ == "__main__":
app = QGuiApplication(sys.argv)
# only functional when Qt Quick is also using OpenGL
QQuickWindow.setGraphicsApi(QSGRendererInterface.GraphicsApi.OpenGLRhi)
window = WindowSingleThreaded()
window.resize(1024, 768)
window.show()
ex = app.exec()
del window
sys.exit(ex)
# Copyright (C) 2022 The Qt Company Ltd.
# SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
from __future__ import annotations
import numpy
from pathlib import Path
import weakref
from OpenGL.GL import (GL_TEXTURE_MAG_FILTER, GL_TEXTURE_MIN_FILTER,
GL_NEAREST, GL_RGBA, GL_TEXTURE_2D, GL_UNSIGNED_BYTE)
from PySide6.QtGui import (QMouseEvent, QOffscreenSurface,
QOpenGLContext, QSurface,
QSurfaceFormat, QWindow)
from PySide6.QtOpenGL import QOpenGLFramebufferObject
from PySide6.QtQml import QQmlComponent, QQmlEngine
from PySide6.QtQuick import (QQuickGraphicsDevice,
QQuickRenderControl,
QQuickRenderTarget, QQuickWindow)
from PySide6.QtCore import QCoreApplication, QTimer, QUrl, Slot
from shiboken6 import VoidPtr
from cuberenderer import CubeRenderer
class RenderControl(QQuickRenderControl):
def __init__(self, window=None):
super().__init__()
self._window = window
def renderWindow(self, offset):
return self._window() # Dereference the weak reference
class WindowSingleThreaded(QWindow):
def __init__(self):
super().__init__()
self.m_rootItem = None
self.m_device = None
self.m_texture_ids = numpy.array([0], dtype=numpy.uint32)
self.m_quickInitialized = False
self.m_quickReady = False
self.m_dpr = 0
self.m_status_conn_id = None
self.setSurfaceType(QSurface.OpenGLSurface)
format = QSurfaceFormat()
# Qt Quick may need a depth and stencil buffer. Always make sure these
# are available.
format.setDepthBufferSize(16)
format.setStencilBufferSize(8)
self.setFormat(format)
self.m_context = QOpenGLContext()
self.m_context.setFormat(format)
self.m_context.create()
self.m_offscreenSurface = QOffscreenSurface()
# Pass m_context.format(), not format. Format does not specify and
# color buffer sizes, while the context, that has just been created,
# reports a format that has these values filled in. Pass self to the
# offscreen surface to make sure it will be compatible with the
# context's configuration.
self.m_offscreenSurface.setFormat(self.m_context.format())
self.m_offscreenSurface.create()
self.m_cubeRenderer = CubeRenderer(self.m_offscreenSurface)
self.m_renderControl = RenderControl(weakref.ref(self))
# Create a QQuickWindow that is associated with out render control.
# Note that this window never gets created or shown, meaning that
# will never get an underlying native (platform) window.
self.m_quickWindow = QQuickWindow(self.m_renderControl)
# Create a QML engine.
self.m_qmlEngine = QQmlEngine()
if not self.m_qmlEngine.incubationController():
c = self.m_quickWindow.incubationController()
self.m_qmlEngine.setIncubationController(c)
# When Quick says there is a need to render, we will not render
# immediately. Instead, a timer with a small interval is used
# to get better performance.
self.m_updateTimer = QTimer()
self.m_updateTimer.setSingleShot(True)
self.m_updateTimer.setInterval(5)
self.m_updateTimer.timeout.connect(self.render)
# Now hook up the signals. For simplicy we don't differentiate between
# renderRequested (only render is needed, no sync) and sceneChanged
# (polish and sync is needed too).
self.m_quickWindow.sceneGraphInitialized.connect(self.createTexture)
self.m_quickWindow.sceneGraphInvalidated.connect(self.destroyTexture)
self.m_renderControl.renderRequested.connect(self.requestUpdate)
self.m_renderControl.sceneChanged.connect(self.requestUpdate)
# Just recreating the texture on resize is not sufficient, when moving
# between screens with different devicePixelRatio the QWindow size may
# remain the same but the texture dimension is to change regardless.
self.screenChanged.connect(self.handleScreenChange)
def __del__(self):
# Make sure the context is current while doing cleanup. Note that
# we use the offscreen surface here because passing 'self' at self
# point is not safe: the underlying platform window may already be
# destroyed. To avoid all the trouble, use another surface that is
# valid for sure.
self.m_context.makeCurrent(self.m_offscreenSurface)
del self.m_qmlComponent
del self.m_qmlEngine
del self.m_quickWindow
del self.m_renderControl
if self.texture_id():
self.m_context.functions().glDeleteTextures(1, self.m_texture_ids)
self.m_context.doneCurrent()
def texture_id(self):
return self.m_texture_ids[0]
def set_texture_id(self, texture_id):
self.m_texture_ids[0] = texture_id
@Slot()
def createTexture(self):
# The scene graph has been initialized. It is now time to create a
# texture and associate it with the QQuickWindow.
self.m_dpr = self.devicePixelRatio()
self.m_textureSize = self.size() * self.m_dpr
f = self.m_context.functions()
f.glGenTextures(1, self.m_texture_ids)
f.glBindTexture(GL_TEXTURE_2D, self.texture_id())
f.glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST)
f.glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST)
null = VoidPtr(0)
f.glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, self.m_textureSize.width(),
self.m_textureSize.height(), 0,
GL_RGBA, GL_UNSIGNED_BYTE, null)
target = QQuickRenderTarget.fromOpenGLTexture(self.texture_id(),
self.m_textureSize)
self.m_quickWindow.setRenderTarget(target)
@Slot()
def destroyTexture(self):
self.m_context.functions().glDeleteTextures(1, self.m_texture_ids)
self.set_texture_id(0)
@Slot()
def render(self):
if not self.m_context.makeCurrent(self.m_offscreenSurface):
return
# Polish, synchronize and render the next frame (into our texture).
# In this example everything happens on the same thread and therefore
# all three steps are performed in succession from here. In a threaded
# setup the render() call would happen on a separate thread.
self.m_renderControl.beginFrame()
self.m_renderControl.polishItems()
self.m_renderControl.sync()
self.m_renderControl.render()
self.m_renderControl.endFrame()
QOpenGLFramebufferObject.bindDefault()
self.m_context.functions().glFlush()
self.m_quickReady = True
# Get something onto the screen.
texture_id = self.texture_id() if self.m_quickReady else 0
self.m_cubeRenderer.render(self, self.m_context, texture_id)
def requestUpdate(self):
if not self.m_updateTimer.isActive():
self.m_updateTimer.start()
def run(self):
if self.m_status_conn_id:
self.m_qmlComponent.statusChanged.disconnect(self.m_status_conn_id)
self.m_status_conn_id = None
if self.m_qmlComponent.isError():
for error in self.m_qmlComponent.errors():
print(error.url().toString(), error.line(), error.toString())
return
self.m_rootItem = self.m_qmlComponent.create()
if self.m_qmlComponent.isError():
for error in self.m_qmlComponent.errors():
print(error.url().toString(), error.line(), error.toString())
return
if not self.m_rootItem:
print("run: Not a QQuickItem")
del self.m_rootItem
# The root item is ready. Associate it with the window.
self.m_rootItem.setParentItem(self.m_quickWindow.contentItem())
# Update item and rendering related geometries.
self.updateSizes()
# Initialize the render control and our OpenGL resources.
self.m_context.makeCurrent(self.m_offscreenSurface)
self.m_device = QQuickGraphicsDevice.fromOpenGLContext(self.m_context)
self.m_quickWindow.setGraphicsDevice(self.m_device)
self.m_renderControl.initialize()
self.m_quickInitialized = True
def updateSizes(self):
# Behave like SizeRootObjectToView.
w = self.width()
h = self.height()
self.m_rootItem.setWidth(w)
self.m_rootItem.setHeight(h)
self.m_quickWindow.setGeometry(0, 0, w, h)
self.m_cubeRenderer.resize(w, h)
def startQuick(self, filename):
url = QUrl.fromLocalFile(filename)
self.m_qmlComponent = QQmlComponent(self.m_qmlEngine, url)
if self.m_qmlComponent.isLoading():
self.m_status_conn_id = self.m_qmlComponent.statusChanged.connect(self.run)
else:
self.run()
def exposeEvent(self, event):
if self.isExposed() and not self.m_quickInitialized:
texture_id = self.texture_id() if self.m_quickReady else 0
self.m_cubeRenderer.render(self, self.m_context, texture_id)
qml_file = Path(__file__).parent / "demo.qml"
self.startQuick(qml_file)
def resizeTexture(self):
if self.m_rootItem and self.m_context.makeCurrent(self.m_offscreenSurface):
self.m_context.functions().glDeleteTextures(1, self.m_texture_ids)
self.set_texture_id(0)
self.createTexture()
self.m_context.doneCurrent()
self.updateSizes()
self.render()
def resizeEvent(self, event):
# If self is a resize after the scene is up and running, recreate the
# texture and the Quick item and scene.
if (self.texture_id()
and self.m_textureSize != self.size() * self.devicePixelRatio()):
self.resizeTexture()
@Slot()
def handleScreenChange(self):
if self.m_dpr != self.devicePixelRatio():
self.resizeTexture()
def mousePressEvent(self, e):
# Use the constructor taking position and globalPosition. That puts
# position into the event's position and scenePosition, and
# globalPosition into the event's globalPosition. This way the
# scenePosition in `e` is ignored and is replaced by position.
# This is necessary because QQuickWindow thinks of itself as
# a top-level window always.
mappedEvent = QMouseEvent(e.type(), e.position(), e.globalPosition(),
e.button(), e.buttons(), e.modifiers())
QCoreApplication.sendEvent(self.m_quickWindow, mappedEvent)
def mouseReleaseEvent(self, e):
mappedEvent = QMouseEvent(e.type(), e.position(), e.globalPosition(),
e.button(), e.buttons(), e.modifiers())
QCoreApplication.sendEvent(self.m_quickWindow, mappedEvent)
// Copyright (C) 2021 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import QtQuick.Particles 2.0
Rectangle {
id: root
gradient: Gradient {
GradientStop { position: 0; color: mouse.pressed ? "lightsteelblue" : "steelblue" }
GradientStop { position: 1; color: "black" }
}
Text {
anchors.centerIn: parent
text: "Qt Quick in a texture"
font.pointSize: 40
color: "white"
SequentialAnimation on rotation {
PauseAnimation { duration: 2500 }
NumberAnimation { from: 0; to: 360; duration: 5000; easing.type: Easing.InOutCubic }
loops: Animation.Infinite
}
}
ParticleSystem {
id: particles
anchors.fill: parent
ImageParticle {
id: smoke
system: particles
anchors.fill: parent
groups: ["A", "B"]
source: "qrc:///particleresources/glowdot.png"
colorVariation: 0
color: "#00111111"
}
ImageParticle {
id: flame
anchors.fill: parent
system: particles
groups: ["C", "D"]
source: "qrc:///particleresources/glowdot.png"
colorVariation: 0.1
color: "#00ff400f"
}
Emitter {
id: fire
system: particles
group: "C"
y: parent.height
width: parent.width
emitRate: 350
lifeSpan: 3500
acceleration: PointDirection { y: -17; xVariation: 3 }
velocity: PointDirection {xVariation: 3}
size: 24
sizeVariation: 8
endSize: 4
}
TrailEmitter {
id: fireSmoke
group: "B"
system: particles
follow: "C"
width: root.width
height: root.height - 68
emitRatePerParticle: 1
lifeSpan: 2000
velocity: PointDirection {y:-17*6; yVariation: -17; xVariation: 3}
acceleration: PointDirection {xVariation: 3}
size: 36
sizeVariation: 8
endSize: 16
}
TrailEmitter {
id: fireballFlame
anchors.fill: parent
system: particles
group: "D"
follow: "E"
emitRatePerParticle: 120
lifeSpan: 180
emitWidth: TrailEmitter.ParticleSize
emitHeight: TrailEmitter.ParticleSize
emitShape: EllipseShape{}
size: 16
sizeVariation: 4
endSize: 4
}
TrailEmitter {
id: fireballSmoke
anchors.fill: parent
system: particles
group: "A"
follow: "E"
emitRatePerParticle: 128
lifeSpan: 2400
emitWidth: TrailEmitter.ParticleSize
emitHeight: TrailEmitter.ParticleSize
emitShape: EllipseShape{}
velocity: PointDirection {yVariation: 16; xVariation: 16}
acceleration: PointDirection {y: -16}
size: 24
sizeVariation: 8
endSize: 8
}
Emitter {
id: balls
system: particles
group: "E"
y: parent.height
width: parent.width
emitRate: 2
lifeSpan: 7000
velocity: PointDirection {y:-17*4*2; xVariation: 6*6}
acceleration: PointDirection {y: 17*2; xVariation: 6*6}
size: 8
sizeVariation: 4
}
Turbulence { //A bit of turbulence makes the smoke look better
anchors.fill: parent
groups: ["A","B"]
strength: 32
system: particles
}
}
onWidthChanged: particles.reset()
onHeightChanged: particles.reset()
MouseArea {
id: mouse
anchors.fill: parent
}
}