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

Luca Donaggio donaggio at gmail.com
Wed Feb 11 09:46:27 UTC 2015


Thank you Gunnar!

I completely misunderstood the "layer" property of the Item element! I
thought its purpouse was to apply an effect (or a texture) to an Item
before rendering it on the scene, not to render any Item as an out-of-scene
texture which could then be used as the source for a ShaderEffect! I
thought that's what ShaderEffectSource does!

In my defense I must say that Qt documentation is not very clear, nor there
are many examples available :-)

Just out of curiosity then: why do you think my first code example works in
the Emulator?


On Tue, Feb 10, 2015 at 9:04 PM, Gunnar Sletta <gunnar.sletta at jolla.com>
wrote:

>  Hi Luca,
>
>  The application code is not doing the right thing :)
>
>  If the ShaderEffectSource depends on itself, it needs to have the
> “recursive” property set to true, and that is still probably not what you
> want. What you probably want is to set “layer.enabled: true; layer.smooth:
> true” on the gradientSource and then use it directly in the ShaderEffect.
> That should do what you want and comes without consequence.
>
>  cheers,
> Gunnar
>
>
>  On 10 Feb 2015, at 11:54, Luca Donaggio <donaggio at gmail.com> wrote:
>
>  Thanks Andrey.
>
> I'll report this on TJC as well, trying to get more visibility. I hope
> that some Sailor will notice it: it's not that important, but it's
> disturbing nonetheless.
>
>
> On Tue, Feb 10, 2015 at 11:39 AM, Andrey Kozhevnikov <
> coderusinbox at gmail.com> wrote:
>
>> yes i can confirm this behaviour.
>>
>> 10.02.2015 15:24, Luca Donaggio пишет:
>>
>>  Hi Andrey, thanks for your reply.
>>
>>  Still, can you try both tests on your Jolla?
>>  The first shouldn't work, while the second does.
>>
>> On Tue, Feb 10, 2015 at 10:32 AM, Andrey Kozhevnikov <
>> coderusinbox at gmail.com> wrote:
>>
>>> sorry, not using emulator at all.
>>>
>>> 10.02.2015 14:28, Luca Donaggio пишет:
>>>
>>>  Anybody is willing to try my test code and confirm or deny my finding?
>>>
>>> On Fri, Feb 6, 2015 at 2:12 PM, Luca Donaggio <donaggio at gmail.com>
>>> wrote:
>>>
>>>> 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
>>>>
>>>
>>>
>>>
>>> --
>>> Luca Donaggio
>>>
>>>
>>>  _______________________________________________SailfishOS.org Devel mailing list
>>> To unsubscribe, please send a mail to devel-unsubscribe at lists.sailfishos.org
>>>
>>>
>>>
>>> _______________________________________________
>>> SailfishOS.org Devel mailing list
>>> To unsubscribe, please send a mail to
>>> devel-unsubscribe at lists.sailfishos.org
>>>
>>
>>
>>
>> --
>> Luca Donaggio
>>
>>
>> _______________________________________________SailfishOS.org Devel mailing list
>> To unsubscribe, please send a mail to devel-unsubscribe at lists.sailfishos.org
>>
>>
>>
>> _______________________________________________
>> SailfishOS.org Devel mailing list
>> To unsubscribe, please send a mail to
>> devel-unsubscribe at lists.sailfishos.org
>>
>
>
>
> --
> Luca Donaggio
>  _______________________________________________
> SailfishOS.org Devel mailing list
> To unsubscribe, please send a mail to
> devel-unsubscribe at lists.sailfishos.org
>
>
>
> _______________________________________________
> SailfishOS.org Devel mailing list
> To unsubscribe, please send a mail to
> devel-unsubscribe at lists.sailfishos.org
>



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


More information about the Devel mailing list