[Interest] Transparent rectangle with radius in one side

[Murat ŞEKER]

Hello,

We have a Quick scene where we draw a lot of semi-transparent rectangles and those rectangles are rounded in one side. As a representative :
Rectangle {    id: clipper    width: 100    height: 100    opacity: 0.5    clip: true
    Rectangle {        id: clipped        radius: 20.0        width: parent.width + radius        height: parent.height        color: 'red'    }}
As it can be seen from the snippet above we use clipping to achieve rounding in one side however that comes with a significant cost in batching as the number of those rectangles are quite high. I've looked at what we can do to get rid of clipping while preserving the existing and UI what I've found is as follows:
Using Canvas API in QMLThis will probably be slower than QQuickRectangle with clipping.
Using QQuickPaintedItem with QPainter APIThis will be faster than canvas API but still slower than QQuickRectangle with clipping.
Custom QQuickItemThis seems like the only way we can outperform QQuickRectangle with clipping however the amount of implementation needed for a simple rounded rectangle makes me think twice about this approach. TBH I'm also a bit scared about some potential issues like aliasing.
Using OpacityMask from QtGraphicalEffectsI am not sure about this approach. Can you shed some light on how this works behind the scenes in scene graph renderer if I have, let's say, a hundred instances of the following :
Rectangle {  // some properties
  OpacityMask {    // some properties  }}
As far as I understand each shader is a unique state in graphics API which results in a separate draw call but is it also the case if we use the same shader for repeated items like above ?
I mean this should be fine if the shader is set for once because I assume items can be batched afterwards. But if each item requires a different batch then this has no gain over clipping.

Am I correct about the assumptions I make above regarding the performance characteristics ? What is the best way to deal with this ?
Thank you.
Murat Seker
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.qt-project.org/pipermail/interest/attachments/20211005/e0f27436/attachment.html>