Jerky SwipeView animation movement on desktop

[gmoon]

I'm building some applications that will need to run fullscreen in macOS, but I'm noticing that something as simple as a SwipeView with 1920x1080 (compressed) JPGs doesn't appear as silky smooth as it should. I'm working on a MacBook Pro for development, and deployment will be on Mac Minis.

Even working from the most basic app - using a SwipeView or PropertyAnimation with easing to transition between images gives a stuttering or jittery look, not the silky smooth movement I need.

The same app published to retina iOS looks perfectly smooth, very impressive. But on Desktop everything appears choppy.

Any suggestions appreciated!

[J.Hilk]

hi @gmoon

You may be surprised, but iPhones can be more powerful than Macs, especially if you compare old Macs with new phones. Also new Macs suffer heavily from thermal throttling, iPhone don't.

That said, there are a couple of ways to smoothen your overall QML application.
Take a look here, for general suggestions on performance for QML:
https://doc.qt.io/qt-5/qtquick-performance.html

In you particular case, I would suggest looking into a Loader and the asynchronous property:

https://doc.qt.io/qt-5/qml-qtquick-loader.html#asynchronous-prop

Helped me personally a lot in my latest app.

[gmoon]

@J.Hilk - thanks for the quick response!

Loading hasn't been an issue (I figured out the async thing early on), and I've actually built a few apps that I've deployed to ios and they look great. I think the main thing is I'm moving some apps from Adobe AIR, building them completely declaratively in QML, not a lot of constant logic going on, but something about the visual performance doesn't look as smooth as it should (even compared to AIR, which was not using the GPU on desktop).

The look is almost like a low-framerate, but I implemented a frame counter and that seems fine (hovers at 60 fps).

Even something as simple as this:

import QtQuick 2.12
import QtQuick.Controls 2.5

ApplicationWindow {
    visible: true
    width: 1920
    height: 1080

    SwipeView {
        id: swipeView
        anchors.fill: parent

        Repeater {
            model:5
            Item {
                Image {
                    width:1920
                    height:1080
                    asynchronous: true
                    source:"./assets/img" + index + ".jpg"
                }
               }

        }

    }
}

... has a slightly "jittery" feel to it, when I would expect it should glide smoothly...

[J.Hilk]

@gmoon are you sure it's actually rendered over the GPU?

I have an external screen attached to my macbook and everything drawn on that screen is not rendered via GPU (or at least I'm pretty sure it isn't).
There's a noticeable difference.

[gmoon]

@J.Hilk Good question - how would I know if it's definitely rendered on the GPU? That was my first thought, but I couldn't figure out how to test that. I tried various settings in my cpp ( QCoreApplication::setAttribute(Qt::AA_UseDesktopOpenGL... etc)), none of which have a discernible effect.

Also - if Qt does not use GPU rendering on multiple displays that is going to be an issue. Is this the case in general?

Starting to wonder if I need to abandon Qt right now if I can't find a working solution, which is too bad as I'm enjoying it otherwise.

[gmoon]

*** Solved ***

Took some digging but I realized my Mac desktop apps were not using the threaded render loop by default. The solution was to add:

qputenv("QSG_RENDER_LOOP", "threaded");

... and with that it is nice and smooth and quick. Without that, every QtQuick 2 app I build from the get-go is running in Render Loop:Basic by default, which seems weird to say the least.

Thanks @J.Hilk for your help on this.

[J.Hilk]

@gmoon
hey great that you found a solution, and thanks for sharing

sorry I didn‘t respond, but I totally missed your tag 🤔

I‘m myself a casual but passionant Mac user, so I couldn‘t have helped a lot 🙈