QML animation artifact: can be reduced?

0
votes

I'm writing a simple application that does nothing but:

  1. play a video on the background (fullHD)
  2. every 5 seconds slide some pictures like a carousel

Here the complete code of my QML page for Qt 6.2.0:

import QtQuick
import QtQuick.Controls
import QtMultimedia
import Qt5Compat.GraphicalEffects

ApplicationWindow {
    id: window
    width: 1080
    height: 1920
    visible: true
    visibility: "FullScreen"
    color: "black"
    title: qsTr("Demo")

    property string base_path: "file:///mnt/data/"

    MediaPlayer {
        id: mediaPlayer
        videoOutput: videoOutput
        source: "file:///home/user/test.mov"
        Component.onCompleted: play()
        onErrorOccurred: { console.log(mediaPlayer.errorString) }
    }

    VideoOutput {
        id: videoOutput
        property bool fullScreen: true
        anchors.fill: parent
    }

    Component {
        id: delegate
        Item {
            id: item
            width: 864 * 0.6; height: 1536 * 0.6
            scale: PathView.iconScale
            opacity: PathView.iconOpacity
            z: PathView.iconOrder

            Image {
                id: bug
                width: parent.width * 0.95
                height: parent.height * 0.95
                source: modelData
                sourceSize: Qt.size(parent.width, parent.height)
                smooth: true
                visible: false
                clip: false
            }

            Image {
                id: mask
                source: base_path + "Mask Resized80 03.PNG"
                sourceSize: Qt.size(parent.width*0.95, parent.height*0.95)
                smooth: true
                clip: false
                visible: false
            }

            OpacityMask {
                id: image
                anchors.fill: bug
                source: bug
                maskSource: mask
            }
        }
    }

    PathView {
        id: view
        anchors.fill: parent
        anchors.bottomMargin: 150
        anchors.topMargin: 50
        pathItemCount: 3
        preferredHighlightBegin: 0.5                         
        preferredHighlightEnd: 0.5                           
        highlightRangeMode: PathView.StrictlyEnforceRange    
        highlightMoveDuration: 1000
        model:
            [
            base_path + "Reduced.PNG",
            base_path + "Relax.PNG",
            base_path + "Resized80 03.png",
            base_path + "Resized80 04.png",
            base_path + "Resized80 05.png",
            base_path + "Resized80 06.png",
            base_path + "Resized80 08.png",
            ]
        delegate: delegate
        path: Path {
            startX: -view.width / 3; startY: view.height/2
            PathAttribute { name: "iconScale"; value: 0.4 }
            PathAttribute { name: "iconOpacity"; value: 0.01 }
            PathAttribute { name: "iconOrder"; value: 0 }
            PathLine {x: view.width / 2; y: view.height/2 }
            PathAttribute { name: "iconScale"; value: 1.2 }
            PathAttribute { name: "iconOpacity"; value: 1 }
            PathAttribute { name: "iconOrder"; value: 8 }
            PathLine {x: view.width * 1.3; y: view.height/2 }
        }
    }

    Item {
        Timer {
            interval: 5000; running: true; repeat: true
            onTriggered: view.incrementCurrentIndex()
        }
    }
}

The development machine runs an i7 with an nVidia GeForce GTX 670. The target machine runs an Atom E3940 quad-core (1.6 GHz) with an HD Graphic 500.

Running the code above on the development machine the animations of the carousel are smooth and clean.

Instead, on the target the animation are awful. You can clearly see artifacts during the movements: stuttering and flickering.

top says the CPU usage is about 80% (that is less than 1 CPU out of 4 is busy). As far as I understand if the GPU is not powerful enough the CPU needs to do the dirty job. Because the CPUs are not busy I guess it's not a problem of GPU.

Furthermore, even disabling the background video the animations are still bad.

When I work on RPi I use eglfs and I know I can set variables like QT_QPA_EGLFS_FORCEVSYNC, but on desktop I'm using xcb.

Is there a way to improve the quality of the animations?

qtanimationqmlxcb