CODEWITHSUNDEEP
c++qtopenglqml
MrPickles
MrPickles

Reputation: 1445

QML: How to mix a shader effect with a QtGraphical Effect?

There are two effects on my background image I'm trying to achieve: a wave (shader) effect and a colorize (QtGraphical) effect. Unfortuately, they only appear separately, (i.e. one image is a wave effect on my background and the other is just a colorize of my background).

I want to combine the two into one image, but have been at it for hours. Anyone have an idea of how?

Colorize {
    anchors.fill: background
    source: background
    hue: 0.0
    saturation: 0.5
    lightness: -0.2
}

ShaderEffect {
    height: intro_over ? 0 : parent.height;
    width:  intro_over ? 0 :  parent.width;

    property variant source: background
    property real frequency: 8
    property real amplitude: 0.1
    property real time: 0.0

    // Animation stuff

    fragmentShader: "
                varying highp vec2 qt_TexCoord0;
                uniform sampler2D source;
                uniform lowp float qt_Opacity;
                uniform highp float frequency;
                uniform highp float amplitude;
                uniform highp float time;
                void main() {
                    highp vec2 pulse = sin(time - frequency * qt_TexCoord0);
                    highp vec2 coord = qt_TexCoord0 + amplitude * vec2(pulse.x, -pulse.x);
                    gl_FragColor = texture2D(source, coord) * qt_Opacity;
                }"
}

Upvotes: 0

Views: 794

Answers (1)

diro
diro

Reputation: 361

Using ShaderEffectSource. In your example, add an id for the Colorize item, and create a ShaderEffectSource as the source for ShaderEffect:

Colorize {
    id: colorize
    anchors.fill: background
    source: background
    hue: 0.0
    saturation: 0.5
    lightness: -0.2
}

ShaderEffect {
   height: intro_over ? 0 : parent.height;
    width:  intro_over ? 0 :  parent.width;

    property variant source: ShaderEffectSource {
        sourceItem: colorize
        hideSource: true
    }
    property real frequency: 8
    property real amplitude: 0.1
    property real time: 0.0
}

Upvotes: 3

Related Questions