Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Use a shader to hide part of an image
QtWS25 Last Chance

Use a shader to hide part of an image

Scheduled Pinned Locked Moved Solved QML and Qt Quick
shadereffect
2 Posts 1 Posters 359 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • P Offline
    P Offline
    plaristote
    wrote on 20 Nov 2021, 22:47 last edited by plaristote
    #1

    Greetings !
    I'm using Qt 5.15, and I would like to hide part of an image. Basically, cutting out a circle at given coordinates. And I've seen some puzzling things while trying to achieve that.

    Firstly, I thought that shaders were actually allowing me to modify an image before drawing it. But it seems that the shader actually draws on top o the existing image. Is that so ?

    Here's my shader so far:

    ShaderEffect {
      property variant source
      property point    position
      property real     radius: 40
      property real     centerX: position.x - parent.x
      property real     centerY: position.y - parent.y
    
      anchors.fill: parent
      vertexShader: "
          uniform highp mat4 qt_Matrix;
          attribute highp vec4 qt_Vertex;
          attribute highp vec2 qt_MultiTexCoord0;
          varying highp vec2 coord;
          void main() {
              coord = qt_MultiTexCoord0;
              gl_Position = qt_Matrix * qt_Vertex;
          }"
      fragmentShader: "
          varying highp vec2 coord;
          uniform sampler2D source;
          uniform lowp float qt_Opacity;
          uniform lowp float centerX;
          uniform lowp float centerY;
          uniform lowp float radius;
          uniform lowp float width;
          uniform lowp float height;
          void main() {
              lowp vec4 tex = texture2D(source, coord);
              if (coord.x * width  >= centerX - radius && coord.x * width  <= centerX + radius
               && coord.y * height >= centerY - radius && coord.y * height <= centerY + radius) {
                gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
              }
              else {
                gl_FragColor = tex * qt_Opacity;
              }
          }"
    }
    

    Currently, it draws a black rectangle where I want it to.
    If I set gl_FragColor to vec4(0.0, 0.0, 0.0, 0.0), then it just does nothing... while I was expecting it to hide the part of the source image where the black rectangle appears in my test case.

    Is there any obvious reason why it's not working ? Am I wrong in assuming the shader changes the pixel of the source image ?

    Thanks !

    1 Reply Last reply
    0
    • P Offline
      P Offline
      plaristote
      wrote on 21 Nov 2021, 00:32 last edited by
      #2

      Ok, I figured it out !

      The shader does not change the Image, it just draws something else on the shader item's position.

      The solution was pretty darn simple: make the Image invisible and let the shadereffect item handle all the rendering part.

      1 Reply Last reply
      1

      2/2

      21 Nov 2021, 00:32

      • Login

      • Login or register to search.
      2 out of 2
      • First post
        2/2
        Last post
      0
      • Categories
      • Recent
      • Tags
      • Popular
      • Users
      • Groups
      • Search
      • Get Qt Extensions
      • Unsolved