We have moved to a new Sailfish OS Forum. Please start new discussions there.
2

[Bug] Different behaviour of ShaderEffectSource in emulator vs. device [answered]

asked 2015-02-10 13:55:53 +0300

donaggio gravatar image

updated 2015-02-10 14:27:55 +0300

The following code works fine in Emulator (SDK Beta 1412), 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?

edit retag flag offensive reopen delete

The question has been closed for the following reason "the question is answered, an answer was accepted" by donaggio
close date 2015-02-20 17:41:12.523739

1 Answer

Sort by » oldest newest most voted
0

answered 2015-02-20 17:40:33 +0300

donaggio gravatar image

This has been answered on the developers mailing-list:

here and here

edit flag offensive delete publish link more

Question tools

Follow
1 follower

Stats

Asked: 2015-02-10 13:55:53 +0300

Seen: 202 times

Last updated: Feb 20 '15