Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Anti-Aliasing get omitted when layer enabled



  • Hello everyone!

    I just found a problem that an Item (and it's children) won't transform smoothly if its layer.enabled property is set to true.

    0_1532689739490_20180727190840.png

    As the image shows above, the left rectangle gets smoothed well while the right one does not. The only different between these rectangles is the layer.enabled property.

    Environment: Windows 10 x64, Qt 5.11

    Here's a minimum example to reproduce this issue:

    import QtQuick 2.11
    import QtQuick.Window 2.11
    
    Window {
        visible: true
        width: 640
        height: 480
        color: "black"
    
        title: qsTr("Antialiasing Issuses")
    
        Row {
            anchors.centerIn: parent
    
            spacing: 32
    
            Rectangle {
                width: 256
                height: 256
                rotation: 20
                antialiasing: true
            }
    
            Rectangle {
                width: 256
                height: 256
                rotation: 20
                antialiasing: true
    
                layer.enabled: true // this screws things up
            }
        }
    }
    

    Is this a bug or there's something I missed?
    I also tried to change the layer.samples and layer.mipmap properties but with no luck.
    Thank you for any ideas :P



  • @GPBeta hi,
    I found this interesting (related to QML Shapes) :
    https://stackoverflow.com/questions/48895449/how-do-i-enable-antialiasing-on-qml-shapes

    You can enable multisampling
    //main.cpp

          QSurfaceFormat format;
          format.setSamples(8);
          QSurfaceFormat::setDefaultFormat(format);
    


  • Hi @LeLev , thank you very much for the useful hint!
    I found out the reason why the layer.samples property doesn't take effects finally.

    There're something different from the Shape's anti-aliasing problem, my issue in the example is caused by layer's transformation.
    So we have to enable the multi-sampling feature of a transformed layer's parent node:

    Row {
        ......
    
        // this fix the layer transformation
        layer.enabled: true
        layer.samples: 8
    
        Rectangle {
            width: 256
            height: 256
            rotation: 20
            antialiasing: true
        }
    
        Rectangle {
            width: 256
            height: 256
            rotation: 20
            antialiasing: true
    
            layer.enabled: true // rotate a layered item smoothly now!
        }
    }
    

    0_1532705922446_20180727233719.png
    Even thought layering the Row clips the rectangles, it solves my issue and question.



  • @GPBeta said in Anti-Aliasing get omitted when layer enabled:
    Thanks for the info!

    I just tried your example, and found that it is also equivalent with setting smooth: true on the parent Row.

    Row {    
          ......
         // this fix the layer transformation
         layer.enabled: true
         smooth: true
    }
    

Log in to reply