[SailfishDevel] Different behaviour of ShaderEffectSource in emulator vs. device

Luca Donaggio donaggio at gmail.com
Fri Feb 6 13:12:30 UTC 2015


The following code works fine in Emulator, changing the gradient of the
Rectangle correctly updates the nested ShaderEffectSource and it is
reflected on the ShaderEffect which uses it as its texture:

Page {
    id: page

    SilicaFlickable {
        anchors.fill: parent

        contentHeight: column.height

        Column {
            id: column

            anchors { top: parent.top; left: parent.left; right:
parent.right; leftMargin: Theme.paddingLarge; rightMargin:
Theme.paddingLarge; }
            spacing: Theme.paddingLarge

            PageHeader {
                title: qsTr("ShaderEffect Test")
            }

            Row {
                anchors.horizontalCenter: parent.horizontalCenter
                spacing: Theme.paddingLarge

                Column {
                    spacing: Theme.paddingSmall

                    Rectangle {
                        id: gradientSource

                        property list<Gradient> gradients: [
                            Gradient {
                                GradientStop { position: 0.0; color:
"black"; }
                                GradientStop { position: 1.0; color:
"blue"; }
                            },

                            Gradient {
                                GradientStop { position: 0.0; color:
"black"; }
                                GradientStop { position: 1.0; color: "red";
}
                            }
                        ]

                        width: 100
                        height: 100

                        gradient: gradients[0]

                        ShaderEffectSource {
                            id: gradientTexture

                            anchors.fill: parent
                            sourceItem: gradientSource
                            hideSource: false
                            live: true
                        }
                    }

                    Label {
                        font.pixelSize: Theme.fontSizeExtraSmall
                        wrapMode: Text.WordWrap
                        text: "Rectangle\nShaderEffectSource"
                    }
                }

                Column {
                    spacing: Theme.paddingSmall

                    ShaderEffect {
                        property variant source: gradientTexture

                        width: 100
                        height: 100

                        blending: false
                        cullMode: ShaderEffect.BackFaceCulling
                        fragmentShader: "
                            varying highp vec2 qt_TexCoord0;
                            uniform lowp float qt_Opacity;
                            uniform sampler2D source;

                            void main() {
                                gl_FragColor = texture2D(source,
qt_TexCoord0) * qt_Opacity;
                            }"
                    }

                    Label {
                        font.pixelSize: Theme.fontSizeExtraSmall
                        text: "ShaderEffect"
                    }
                }
            }

            Button {
                anchors.horizontalCenter: parent.horizontalCenter
                text: "Blue gradient"

                onClicked: gradientSource.gradient =
gradientSource.gradients[0]
            }

            Button {
                anchors.horizontalCenter: parent.horizontalCenter
                text: "Red gradient"

                onClicked: gradientSource.gradient =
gradientSource.gradients[1]
            }
        }
    }
}

It doesn't work on device though (changing Reactangle's gradient doesn't
update the ShaderEffectSource).

Un-nesting the ShaderEffectSource from its source item (the Rectangle)
works fine both on emulator and on device:

Page {
    id: page

    SilicaFlickable {
        anchors.fill: parent

        contentHeight: column.height

        Column {
            id: column

            anchors { top: parent.top; left: parent.left; right:
parent.right; leftMargin: Theme.paddingLarge; rightMargin:
Theme.paddingLarge; }
            spacing: Theme.paddingLarge

            PageHeader {
                title: qsTr("ShaderEffect Test")
            }

            Row {
                anchors.horizontalCenter: parent.horizontalCenter
                spacing: Theme.paddingLarge

                Column {
                    spacing: Theme.paddingSmall

                    Rectangle {
                        id: gradientSource

                        property list<Gradient> gradients: [
                            Gradient {
                                GradientStop { position: 0.0; color:
"black"; }
                                GradientStop { position: 1.0; color:
"blue"; }
                            },

                            Gradient {
                                GradientStop { position: 0.0; color:
"black"; }
                                GradientStop { position: 1.0; color: "red";
}
                            }
                        ]

                        width: 100
                        height: 100

                        gradient: gradients[0]
                    }

                    Label {
                        font.pixelSize: Theme.fontSizeExtraSmall
                        text: "Rectangle"
                    }
                }

                Column {
                    spacing: Theme.paddingSmall

                    ShaderEffectSource {
                        id: gradientTexture

                        width: 100
                        height: 100
                        sourceItem: gradientSource
                        hideSource: false
                        live: true
                    }

                    Label {
                        font.pixelSize: Theme.fontSizeExtraSmall
                        text: "ShaderEffectSource"
                    }
                }

                Column {
                    spacing: Theme.paddingSmall

                    ShaderEffect {
                        property variant source: gradientTexture

                        width: 100
                        height: 100

                        blending: false
                        cullMode: ShaderEffect.BackFaceCulling
                        fragmentShader: "
                            varying highp vec2 qt_TexCoord0;
                            uniform lowp float qt_Opacity;
                            uniform sampler2D source;

                            void main() {
                                gl_FragColor = texture2D(source,
qt_TexCoord0) * qt_Opacity;
                            }"
                    }

                    Label {
                        font.pixelSize: Theme.fontSizeExtraSmall
                        text: "ShaderEffect"
                    }
                }
            }

            Button {
                anchors.horizontalCenter: parent.horizontalCenter
                text: "Blue gradient"

                onClicked: gradientSource.gradient =
gradientSource.gradients[0]
            }

            Button {
                anchors.horizontalCenter: parent.horizontalCenter
                text: "Red gradient"

                onClicked: gradientSource.gradient =
gradientSource.gradients[1]
            }
        }
    }
}

Is it a bug?

-- 
Luca Donaggio
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.sailfishos.org/pipermail/devel/attachments/20150206/9608face/attachment-0001.html>


More information about the Devel mailing list