Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Combining GraphicalEffect with custom Shader Effect



  • I am trying to use the Glow effect on the output of a custom shader effect (Stoke/outline).
    Below is the code that i am trying to use but it looks like we can not combine the custom shader with graphical effect.

    @
    Image {
    id:icon
    x:50
    y:200
    width:130
    height:130
    source: "Images/icnRadio.png"
    visible: false
    }

    ShaderEffect {
        id: stroke
        visible:true
        x:50
        y:200
        width: 130
        height: 130
        property variant source: icon
        property variant delta: Qt.size(0.5 / width, 0.5 / height)
        fragmentShader: "
            uniform sampler2D source;
            uniform highp vec2 delta;
            uniform highp float qt_Opacity;
            varying highp vec2 qt_TexCoord0;
            void main() {
                lowp vec4 tl = texture2D(source, qt_TexCoord0 - delta);
                lowp vec4 tr = texture2D(source, qt_TexCoord0 + vec2(delta.x, -delta.y));
                lowp vec4 bl = texture2D(source, qt_TexCoord0 - vec2(delta.x, -delta.y));
                lowp vec4 br = texture2D(source, qt_TexCoord0 + delta);
                lowp vec4 gx = (tl + bl) - (tr + br);
                lowp vec4 gy = (tl + tr) - (bl + br);
                gl_FragColor.xyz = vec3(0.,0.,0);
                gl_FragColor.w = clamp(dot(sqrt(gx * gx + gy * gy), vec4(1.)), 0., 1.) * qt_Opacity;
                gl_FragColor = vec4(clamp(dot(sqrt(gx * gx + gy * gy), vec4(1.)), 0., 1.) * qt_Opacity);
            }"
    }
    
    Glow {
        width:130
        height:130
        anchors.fill: stroke
        radius: 16
        samples: 32
        color: "red"
        source: icon
        spread:0.5
        visible:true
        } 
    

    @
    Only one effect is applied on the icon either its stoke/outline or Glow. But i want in this way, First the stroke/outline shader effect is applied on the icon image and then on its output the Glow effect is applied.
    Is it possible to do it?


  • Moderators

    Hi,

    I think you need to set source of Glow to stroke instead of icon.


Log in to reply