Create reuseable shaderEffect

This is a shaderEffect codes from an example

Code:

---

//   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

Code:

---

//   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

Code:

---

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:

Code:

---

//.....
    uniform vec2 offset[9];
 
    uniform int kernel[9];
 
    //......

---