QML：如何将着色器效果与QtGraphical效果混合？

Question

我正在尝试实现的背景图像有两种效果：波浪（着色器）效果和彩色（QtGraphical）效果。不幸的是，它们只是单独出现（即一个图像是我背景上的波浪效果，另一个只是我背景的颜色）。

我想将两者合并为一张图片，但已经使用了几个小时。任何人都知道如何？

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;
                }"
}

Answer 1

使用ShaderEffectSource。 在您的示例中，为id项添加Colorize，并创建ShaderEffectSource作为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
}