Performance issue using QML Repeater

[CyrilDamae]

Hi,

For convenience we are using QML Repeater to draw small circle above opengl viewer displaying image (more or less 500 circles).

The positions of circles are kept consistent with image move and zoom using property binding. When a redraw is triggered after moving or zooming on the image, the next image makes a lot of time to be drawn which causes an unpleasant lag in use, presumably because the Qt thread is overflowded.

we considered disabling the drawing of circles during zooms and drags of the image but this solution is not very satisfactory.

Note that the image draw after zoom or drag without QML Repeater above is perfectly optimized. Using opengl to draw the circles would be nasty and we would like to avoid such implementation.

How can we use QML to optimize the redraw ?
Thank you for your time.
Cyril

[J.Hilk]

@CyrilDamae said in Performance issue using QML Repeater:

The positions of circles are kept consistent with image move and zoom using property binding

this is probably causing 500 redraws each change of x or y or width or height.

I would decouple the binding and reposition all circles at once in a function.

Once you have done that, you could consider time gating the function call with a timer, so it only allows for updates every 10 ms or so.

[jeremy_k]

@CyrilDamae said in Performance issue using QML Repeater:

For convenience we are using QML Repeater to draw small circle above opengl viewer displaying image (more or less 500 circles).
The positions of circles are kept consistent with image move and zoom using property binding.

Code to refer to would be nice.

This sounds like an overlay, possibly constructed something like:

Item {
    property int xOffset: 0
    Repeater {
        model: 500
        delegate: Rectangle { x: random() + xOffset // each delegate moves in the overlay }
    }
}

If this is an accurate rendition, an easy and likely more performant solution is to transform the overlay rather than the delegate instances.

Item {
    property int xOffset: 0 // Likely really a property from outside the overlay
    x: xOffset
    Repeater {
        model: 500
        delegate: Rectangle { x: random() // delegates are stationary in the overlay once constructed }
    }
}

@J-Hilk said in Performance issue using QML Repeater:

this is probably causing 500 redraws each change of x or y or width or height.
I would decouple the binding and reposition all circles at once in a function.
Once you have done that, you could consider time gating the function call with a timer, so it only allows for updates every 10 ms or so.

A function setting the properties is still going to trigger the corresponding handlers, unless signals on each delegate instance is blocked.

Gating updates could work, as long as the current state is eventually shown. The scene graph should (I think) already be limiting redraws to the vsync rate, so presumably this would need to use significantly longer intervals to fix slowness in the redraw rather than in property updates.

[CyrilDamae]

Hi !
Thank you for all your answers. Things got a little more complicated since the last time i posted, we are also using rectangles.

We are using indeed a bind on the delegate component. The code look like this :

Item {
  id: overlay
    Repeater {
      delegate: Loader {
        active: condition
        asynchronous: true 
        sourceComponent: Rectangle {
          x: xFromOutsideOverlay
          y: xFromOutsideOverlay
          rotation: rFromOutsideOverlay
          width: wFromOutsideOverlay
          height: hFromOutsideOverlay
        }
      }
    }
  }
}

We are gonna try to move, scale and rotate the overlay instead of the delegate to increase performances.