[Solved]Create reuseable shaderEffect



  • This is a shaderEffect codes from an example

    @
    // Shader Effect
    ShaderEffect {
    id: shaderEffect
    anchors.fill: bug
    property variant source: bug
    property real amplitude: 0.01
    property real frequency: 20
    property real time: 0
    NumberAnimation on time { loops: Animation.Infinite; from: 0; to: Math.PI * 2; duration: 600 }
    fragmentShader:
    "uniform lowp float qt_Opacity;" +
    "uniform highp float amplitude;" +
    "uniform highp float frequency;" +
    "uniform highp float time;" +
    "uniform sampler2D source;" +
    "varying highp vec2 qt_TexCoord0;" +
    "void main() {" +
    " highp vec2 p = sin(time + frequency * qt_TexCoord0);" +
    " gl_FragColor = texture2D(source, qt_TexCoord0 + amplitude * vec2(p.y, -p.x)) * qt_Opacity;" +
    "}"
    }
    @

    I encapsulate it in a new component

    Wobble.qml
    @
    // Shader Effect
    ShaderEffect {
    id: root

        property variant source
        property real amplitude: 0.01
        property real frequency: 20
        property real time: 0
        NumberAnimation on time { loops: Animation.Infinite; from: 0; to: Math.PI * 2; duration: 600 }
        fragmentShader:
            "uniform lowp float qt_Opacity;" +
            "uniform highp float amplitude;" +
            "uniform highp float frequency;" +
            "uniform highp float time;" +
            "uniform sampler2D source;" +
            "varying highp vec2 qt_TexCoord0;" +
            "void main() {" +
            "    highp vec2 p = sin(time + frequency * qt_TexCoord0);" +
            "    gl_FragColor = texture2D(source, qt_TexCoord0 + amplitude * vec2(p.y, -p.x)) * qt_Opacity;" +
            "}"
    }
    

    @

    And I use it like this

    main.qml

    @
    import QtQuick 2.0

    Rectangle {
    width : bug.width
    height : bug.height

    Image{
        id: bug
    
        anchors.fill: parent
    
        source: "/Downloads/1359170070532.jpg"
        smooth: true
        fillMode: Image.PreserveAspectFit
    }    
    
    Wobble{
        id: wobble
    
        anchors.fill: bug
        source: bug
    }
    

    @

    However, it can't work, if I replace Wobble by the original ShaderEffect, it works
    What am I miss?Besides, do we have a solution to pass uniform array by qml?

    ex:

    @
    //.....
    uniform vec2 offset[9];

    uniform int kernel[9];

    //......
    @



  • When I try the code you list above (Wobble.qml and WobbleMain.qml) it works just fine. Do you have them in the same directory? What is the error you get?

    There is no way to pass uniform arrays from QML code, but you could do that using the scene graph material API (QSGMaterial or QSGSimpleMaterial).



  • Hi, it works now, haven't change the codes at all, don't know what kind of problem before.

    I will take a look on QSGMaterial or QSGSimpleMaterial, or create the shader effect by
    Qt/c++ if I have to, thanks


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.