September 18, 2011

coyotte508 coyotte508
Lab Rat
12 posts

QML Fragment shader acting strangely with Gradient background

 

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:

  1. fragmentShader: "
  2.            uniform highp sampler2D sourceTexture;
  3.            varying highp vec2 qt_TexCoord;
  4.  
  5.            void main (void)
  6.            {
  7.                vec4 c = texture2D(sourceTexture, qt_TexCoord);
  8.                gl_FragColor = vec4(c.rgb, c.a);
  9.            }
  10.        "
Basically, it does nothing, it was just in order to test… The image is rendered correctly, pixel by pixel.

This simple line:

  1. 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 [developer.qt.nokia.com]

5 replies

September 18, 2011

minimoog77 minimoog77
Lab Rat
130 posts

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.

September 18, 2011

coyotte508 coyotte508
Lab Rat
12 posts

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:

  1. import QtQuick 1.0
  2. import Qt.labs.shaders 1.0
  3.  
  4. Rectangle {
  5.     width: 360
  6.     height: 360
  7.  
  8.     gradient: Gradient {
  9.         GradientStop {
  10.             position: 0
  11.             color: "#8f9da8"
  12.         }
  13.  
  14.         GradientStop {
  15.             position: 0.190
  16.             color: "#80b5ca"
  17.         }
  18.  
  19.         GradientStop {
  20.             position: 0.480
  21.             color: "#db9b40"
  22.         }
  23.  
  24.         GradientStop {
  25.             position: 1
  26.             color: "#91772f"
  27.         }
  28.     }
  29.  
  30.     id: root;
  31.  
  32.     Text {
  33.         text: qsTr("Hello World")
  34.         anchors.centerIn: parent
  35.     }
  36.  
  37.     Image {
  38.         id: image
  39.         source: "../images/qtlogo.png"
  40.         width: 80;
  41.         height: 80;
  42.         x: 40;
  43.         y: 40;
  44.     }
  45.  
  46.     ShaderEffectItem {
  47.         property real alpha: 0.5
  48.  
  49.         ShaderEffectSource {
  50.             id: sourceImage
  51.             hideSource: true
  52.             sourceItem: image
  53.             live: true
  54.         }
  55.  
  56.         function grab() {
  57.             sourceImage.grab();
  58.         }
  59.  
  60.         x: image.x
  61.         y: image.y
  62.         width: image.width
  63.         height: image.height
  64.  
  65.         property variant sourceTexture: sourceImage
  66.  
  67.         property color blendColor: "red"
  68.  
  69.         vertexShader: "
  70.            uniform highp mat4 qt_ModelViewProjectionMatrix;
  71.            attribute highp vec4 qt_Vertex;
  72.            attribute highp vec2 qt_MultiTexCoord0;
  73.  
  74.            varying highp vec2 qt_TexCoord;
  75.  
  76.            void main(void)
  77.            {
  78.                qt_TexCoord = qt_MultiTexCoord0;
  79.                gl_Position =  qt_ModelViewProjectionMatrix * qt_Vertex;
  80.            }
  81.        "
  82.  
  83.         fragmentShader: "
  84.            uniform highp sampler2D sourceTexture;
  85.            uniform lowp float alpha;
  86.            uniform lowp vec4 blendColor;
  87.            varying highp vec2 qt_TexCoord;
  88.  
  89.            void main (void)
  90.            {
  91.                vec4 c = texture2D(sourceTexture, qt_TexCoord);
  92.  
  93.                gl_FragColor = vec4(c.rgb*(1-alpha) + blendColor.rgb*alpha, c.a);
  94.            }
  95.        "
  96.     }
  97. }

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?

September 18, 2011

coyotte508 coyotte508
Lab Rat
12 posts

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 :

  1. 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.

September 19, 2011

minimoog77 minimoog77
Lab Rat
130 posts

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.

September 19, 2011

coyotte508 coyotte508
Lab Rat
12 posts

Alright, bug report posted here [bugreports.qt.nokia.com]

 
  ‹‹ Qt Scenegraph ?      How do I keep Highscores at qml app. ››

You must log in to post a reply. Not a member yet? Register here!