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

Posted 2023-02-16

【中文标题】QML：如何将着色器效果与 QtGraphical 效果混合？

【英文标题】：QML: How to mix a shader effect with a QtGraphical Effect?

【发布时间】：2016-03-21 03:00:31

【问题描述】：

我试图在我的背景图像上实现两种效果：波浪（着色器）效果和着色（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;
                "

【参考方案1】：

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