Re: [Interest] Transparent rectangle with radius in one side
Try QtQuick.Shapes; you can get any shape you want. However those don’t do vertex antialiasing, so you might need to turn on MSAA to get rid of the jaggies. So it would be best to try to put all the shapes as children of one item (or children of a root shape) so that you only need to set layer.samples in one place, which will be more efficient. Canvas just uses QPainter to do cpu rendering (pixel by pixel). So there will be a texture the size of the canvas, and again it would be best to do as little of that as possible: put them all into one canvas. ___ Interest mailing list Interest@qt-project.org https://lists.qt-project.org/listinfo/interest
Re: [Interest] Transparent rectangle with radius in one side
Le mar. 5 oct. 2021 à 04:28, Murat ŞEKER via Interest a écrit : > 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 : > ... > 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. Have you considered BorderImage ? You could use an image with rounded borders only on one side, and it would look the same, with a single item. Not convenient if the radius is not fixed, though. -- Julien Cugnière ___ Interest mailing list Interest@qt-project.org https://lists.qt-project.org/listinfo/interest
Re: [Interest] Transparent rectangle with radius in one side
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
___
Interest mailing list
Interest@qt-project.org
https://lists.qt-project.org/listinfo/interest
[Interest] Transparent rectangle with radius in one side
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
___
Interest mailing list
Interest@qt-project.org
https://lists.qt-project.org/listinfo/interest
