Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. Game Development
  4. QML Fragment shader acting strangely with Gradient background
Forum Updated to NodeBB v4.3 + New Features

QML Fragment shader acting strangely with Gradient background

Scheduled Pinned Locked Moved Game Development
6 Posts 2 Posters 4.3k Views 1 Watching
  • 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.
  • C Offline
    C Offline
    coyotte508
    wrote on last edited by
    #1

    Hello. This is my first time posting a thread on Qt's forum, I'm also a beginner with shaders.

    I have the following shader:

        @fragmentShader: "
            uniform highp sampler2D sourceTexture;
            varying highp vec2 qt_TexCoord;
    
            void main (void)
            {
                vec4 c = texture2D(sourceTexture, qt_TexCoord);
                gl_FragColor = vec4(c.rgb, c.a);
            }
        "@
    

    Basically, it does nothing, it was just in order to test... The image is rendered correctly, pixel by pixel.

    This simple line:

    @gl_FragColor = vec4(1.0f, 0.f, 0.f, 0.f);@

    Should give me invisible colors, right? because it gives me half transparent red as long as I don't have uniform white as the background...

    Minimal code in "this post":http://developer.qt.nokia.com/forums/viewreply/56175/

    1 Reply Last reply
    0
    • M Offline
      M Offline
      minimoog77
      wrote on last edited by
      #2

      Transparency also depends of parent QML item transparency. I don't know if this is related to QML fragment shader.

      And transparency also depends of order of the rendering.

      1 Reply Last reply
      0
      • C Offline
        C Offline
        coyotte508
        wrote on last edited by
        #3

        You seem to be right -- a minimal code doesn't reproduce the problem. I'll try using the same background as in my app, and when i have a minimal code reproducing the problem, i'll post it.

        Edit: alright, here is the minimal code:

        @import QtQuick 1.0
        import Qt.labs.shaders 1.0

        Rectangle {
        width: 360
        height: 360

        gradient: Gradient {
            GradientStop {
                position: 0
                color: "#8f9da8"
            }
        
            GradientStop {
                position: 0.190
                color: "#80b5ca"
            }
        
            GradientStop {
                position: 0.480
                color: "#db9b40"
            }
        
            GradientStop {
                position: 1
                color: "#91772f"
            }
        }
        
        id: root;
        
        Text {
            text: qsTr("Hello World")
            anchors.centerIn: parent
        }
        
        Image {
            id: image
            source: "../images/qtlogo.png"
            width: 80;
            height: 80;
            x: 40;
            y: 40;
        }
        
        ShaderEffectItem {
            property real alpha: 0.5
        
            ShaderEffectSource {
                id: sourceImage
                hideSource: true
                sourceItem: image
                live: true
            }
        
            function grab() {
                sourceImage.grab();
            }
        
            x: image.x
            y: image.y
            width: image.width
            height: image.height
        
            property variant sourceTexture: sourceImage
        
            property color blendColor: "red"
        
            vertexShader: "
                uniform highp mat4 qt_ModelViewProjectionMatrix;
                attribute highp vec4 qt_Vertex;
                attribute highp vec2 qt_MultiTexCoord0;
        
                varying highp vec2 qt_TexCoord;
        
                void main(void)
                {
                    qt_TexCoord = qt_MultiTexCoord0;
                    gl_Position =  qt_ModelViewProjectionMatrix * qt_Vertex;
                }
            "
        
            fragmentShader: "
                uniform highp sampler2D sourceTexture;
                uniform lowp float alpha;
                uniform lowp vec4 blendColor;
                varying highp vec2 qt_TexCoord;
        
                void main (void)
                {
                    vec4 c = texture2D(sourceTexture, qt_TexCoord);
        
                    gl_FragColor = vec4(c.rgb*(1-alpha) + blendColor.rgb*alpha, c.a);
                }
            "
        }
        

        }@

        The problem only happens when the background is not pure white. Normally, by running the code above, you'll see a red rectangle even where it's supposed to be transparent. If you use "black" as blendcolor, however, no problems. I tested with an image as a background, same problem.

        I've also uploaded a zip with the project (8 kB): http://www.mediafire.com/?htjwebacpuzaem8

        Please let me know what I'm doing wrong?

        1 Reply Last reply
        0
        • C Offline
          C Offline
          coyotte508
          wrote on last edited by
          #4

          Alright I think I figured it out.

          It seems that when I specify an alpha of 0, it adds the color components to the background. That's why when the background is white, there's no problems, as the color components are already maxed out.

          So a hack I found is doing :

          @gl_FragColor = vec4((c.rgb*(1-alpha) + blendColor.rgb*alpha)*c.a, c.a);@

          I multiply the color component by the alpha component, that way when alpha = 0, the rgb is 0 and nothing is added to the color components of the background, thus they stay the same.

          I'm relatively new to shaders so I can't tell if this is something to be expected or a weird behavior - definitely seems the latter, so please tell me if this is not a bug before I post a bug report tomorrow.

          1 Reply Last reply
          0
          • M Offline
            M Offline
            minimoog77
            wrote on last edited by
            #5

            I don't how QML fragment shader works with alpha blending (maybe they are using some strange blend equation) so I don't know if it's weird behaviour.

            Anyway, just report the bug. Definitely it's strange thing.

            1 Reply Last reply
            0
            • C Offline
              C Offline
              coyotte508
              wrote on last edited by
              #6

              Alright, bug report posted "here":https://bugreports.qt.nokia.com/browse/QTCOMPONENTS-1074

              1 Reply Last reply
              0

              • Login

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