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

Luca Donaggio donaggio at gmail.com
Thu Feb 12 09:19:35 UTC 2015


Wow! Documentation for Qt 5.4 has massively improved! Never thought about
looking at the 5.4 branch for docs though, as I'm developing for SailfishOS
exclusively and it's still 5.2 based; but from now on I will for sure, it's
sooo much better, thank you for pointing this out!

On Wed, Feb 11, 2015 at 8:07 PM, Gunnar Sletta <gunnar.sletta at jolla.com>
wrote:

>
>  On 11 Feb 2015, at 10:46, Luca Donaggio <donaggio at gmail.com> wrote:
>
>   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!
>
>
>  A convenient way of adding an effect is one usecase certainly. You can
> use it for other things though. The Qt 5.4 docs should have a fairly good
> explanation of how it works.
> http://doc-snapshot.qt-project.org/qt5-5.4/qml-qtquick-item.html#item-layers
>
>   I thought that's what ShaderEffectSource does!
>
>
>  layer is a more convenient ShaderEffectSource which doesn’t require you
> to add items into the sibling hierarchy.
>
>
>  In my defense I must say that Qt documentation is not very clear, nor
> there are many examples available :-)
>
>
>  In pre Qt 5.4, yes. Very much so :) If you find the 5.4 docs lacking,
> please let me know.
>
>
>  Just out of curiosity then: why do you think my first code example works
> in the Emulator?
>
>
>  Using the FBO as a source texture while writing to it is supported on
> many graphics cards.
>
>
>
> 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 <http://sailfishos.org/> Devel mailing list
>>>> To unsubscribe, please send a mail to devel-unsubscribe at lists.sailfishos.org
>>>>
>>>>
>>>>
>>>> _______________________________________________
>>>> SailfishOS.org <http://sailfishos.org/> Devel mailing list
>>>> To unsubscribe, please send a mail to
>>>> devel-unsubscribe at lists.sailfishos.org
>>>>
>>>
>>>
>>>
>>> --
>>> Luca Donaggio
>>>
>>>
>>> _______________________________________________SailfishOS.org <http://sailfishos.org/> Devel mailing list
>>> To unsubscribe, please send a mail to devel-unsubscribe at lists.sailfishos.org
>>>
>>>
>>>
>>> _______________________________________________
>>> SailfishOS.org <http://sailfishos.org/> Devel mailing list
>>> To unsubscribe, please send a mail to
>>> devel-unsubscribe at lists.sailfishos.org
>>>
>>
>>
>>
>> --
>> Luca Donaggio
>>  _______________________________________________
>> SailfishOS.org <http://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/20150212/03d4252b/attachment-0001.html>


More information about the Devel mailing list