Shader to render QR code - qt

Question

What is the best (in sense of performance and memory consumption) way to represent QR code graphically in Qt Quick application?
I think QR code bitmap can be represented graphically as square matrix of black and white cells using some shader. It would be performance-optimal solution.
Currently I can only create a GridView with a bunch of Rectangles. It is considered as a waste of memory to store and CPU/GPU time to render.
How may the shader looks like?
Say, given QBitArray of n*n size.

Answer 1

The shader itself would be trivial, basically you divide the fragment position x and y by the qr code size and floor that to get row and column, and then find the 1d index by adding the two, then lookup the qt data array at that index, if it contains a 0, the fragment color is white, if it contains 1, the color is black.
However, QML shaders currently don't provide facilities to pass regular 1d arrays.
You would have to convert the array to a bitmap image, and pass it to the array, which means you will also have to implement an image provider in order to get QImage to work with QML, because amazingly, it still doesn't by default.
I wouldn't bother about performance too much, that's premature optimization, which is bad in 99% of the cases. Even a trivial, 100% QML solution is sufficiently fast:
ApplicationWindow {
id: main
visible: true
width: 640
height: 480
color: "darkgray"
property var qrdata: []
MouseArea {
anchors.fill: parent
onClicked: {
qrdata = []
for (var i = 0; i < (100 * 100); ++i) qrdata.push(Math.round(Math.random()))
code.requestPaint()
}
}
Canvas {
id: code
width: 300
height: 300
onPaint: {
console.time("p")
var c = getContext("2d")
c.fillStyle = Qt.rgba(1, 1, 1, 1);
c.fillRect(0, 0, width, height)
c.fillStyle = Qt.rgba(0, 0, 0, 1);
var l = qrdata.length
var step = Math.sqrt(l)
var size = width / step
for (var i = 0; i < l; ++i) {
if (qrdata[i]) {
var rw = Math.floor(i / step), cl = i % step
c.fillRect(cl * size, rw * size, size, size)
}
}
console.timeEnd("p")
}
}
}
On my system, drawing a 100 x 100 qr code takes about 2 milliseconds. IMO that's sufficiently good and it is not really worth it to invest time into making are more complex low level solution.
However, what I would personally do is implement an image provider, convert the qr code data into an image, then scale that image as large as I want with smooth: false which will avoid blurring and preserve a crisp result. That is by far the most direct, efficient and straightforward solution.

Answer 2

If you've got just one QR code in the application then save your time and do a GridView.
Other options are:
C++ custom QQuickItem: generate and load a texture (Qt SceneGraph API)
C++ custom QQuickFramebufferObject: generate and load a texture (mostly pure OpenGL API)
C++ custom QQuickPaintedItem(QPainter 2D API)
QML-JS Canvas/Context2D (HTML 2D API)
QML-JS Canvas3D/Context3D: generate and load a texture (WebGL API) - like all other C++ options, but in JS version of OpenGL
C++ custom QQuickImageProvider: generate and load a texture (ImageProvider and OpenGL API) while passing the whole QR data as an image name to your custom QQuickImageProvider (maybe a bit too clever)
Using vertex-buffers/uniform-buffers instead of textures may work, but it needs an unusual shader code. QR fits more as a texture, I think.