[Interest] Transparent rectangle with radius in one side

[Murat ŞEKER]

Sorry for the formatting. Rich formatting ruined it. Here we go again :

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 QML
This will probably be slower than QQuickRectangle with clipping.

Using QQuickPaintedItem with QPainter API
This will be faster than canvas API but still slower than QQuickRectangle with clipping.

Custom QQuickItem
This 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 QtGraphicalEffects
I 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 seperate 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