QML DropShadow performance issue on android app

Question

I stumbled upon this problem some time ago and made this post: Is my QML android application running on software and how can I fix this?.

The answers suggested that the app is actually being rendered on GPU and I just need to optimize my code with a profiler but I didn't find any kind of complicated bindings or anything that could be significantly optimized. But I did notice that shadows are what causes all the lags. I decided to experiment with it and created a very simple program: two spinning rectangles with a shadow applied to both of them.

Here's the code:

import QtQuick 2.15
import QtQuick.Window 2.15
import QtGraphicalEffects 1.0

import MyFpsText 1.0


Window {
    id: mw
    visible: true

    MyFpsText {
        anchors.right: parent.right
        anchors.top: parent.top

        width: 100
        height: 100

        Text {
            anchors.centerIn: parent
            font.pixelSize: 20
            text: parent.fps
        }
    }

    Rectangle {
        id: rect1
        anchors.horizontalCenter: parent.horizontalCenter
        y: 200

        width: 200
        height: 50

        color: "skyblue";

        layer.enabled: true
        layer.effect: DropShadow {
            radius: 50
            samples: 101
        }
    }

    Rectangle {
        id: rect2
        anchors.horizontalCenter: parent.horizontalCenter
        y: 500

        width: 200
        height: 50

        color: "skyblue";

        layer.enabled: true
        layer.effect: DropShadow {
            radius: 50
            samples: 101
        }
    }


    RotationAnimator {
        target: rect1

        running: true
        loops: Animation.Infinite

        from: 0
        to: 360
        duration: 2000
    }
}

I also used a custom element MyFpsText that I took from here.

Now the results. Stack Overflow doesn't allow gifs over 2 MB, so they are on imgur: https://imgur.com/a/G0LoRsy

First, without shadows - everything is fine, 120fps
Shadow parameters: radius: 30 samples: 61 (as suggested in the official documentation, samples = 2 * radius + 1). The lag is already quite visible as the fps dropped to 30
And the worst: radius: 50, fps -- 11

So. It's definitely not a bad code problem and the app is rendered on hardware (according to the answer to the previous post). So what is it? What can I do about this?

I'm using Qt 5.12.2

Also, one more question as it might be related. There's a similar problem on desktop as well. Although it's not about fps: the UI lags when I resize the window (of any qml app, this one or anything else I make). This one though is solved by setting qputenv("QT_OPENGL", "angle");, but someone said that it's more of a hack and that angle is CPU rendered (yet, it runs much better for some reason, but whatever).

I've found this post says that it was fixed in qt 5.9.2, but I'm using qt 5.15.2 and it's not fixed.

David K. Hess David K. Hess · Accepted Answer · 2021-04-13T17:07:11

I'm guessing you'll see better results if you turn on the cached property:

https://doc.qt.io/qt-5/qml-qtgraphicaleffects-dropshadow.html#cached-prop

QML DropShadow performance issue on android app

1 Answers