2012-10-31 63 views
3

我試圖在使用ShaderEffectItem的QML項目上應用簡單的alpha掩碼。使用ShaderEffectItem的奇怪的alpha混合結果

這裏是一個最小(非)工作示例:我有一個紅色到白色的漸變作爲背景,並且想要在它上面繪製一個綠色的200x200正方形。這個正方形的alpha蒙版應該在左邊爲0.0,右邊爲1.0,所以在左邊應該是透明的。

import QtQuick 1.1 
import Qt.labs.shaders 1.0 

Rectangle { 
    width: 300 
    height: 300 

    id: wrapper 

    gradient: Gradient { 
     GradientStop { position: 0.0; color: "red" } 
     GradientStop { position: 1.0; color: "white" } 
    } 

    Rectangle { 
     id: square 
     anchors.centerIn: parent 
     width: 200 
     height: 200 
     color: "green" 
    } 

    ShaderEffectItem { 
     anchors.centerIn: parent 
     width: 200 
     height: 200 

     property variant source: ShaderEffectSource { 
      sourceItem: square 
      hideSource: true 
     } 

     fragmentShader: " 
     varying vec2 qt_TexCoord0; 
     uniform sampler2D source; 
     void main(void) 
     { 
      vec4 sourceColor = texture2D(source, qt_TexCoord0); 
      float alpha = qt_TexCoord0.x; // = 0.0 at left, 1.0 at right border 
      sourceColor.a *= alpha;  // apply alpha mask 
      gl_FragColor = sourceColor; 
     } 
     " 
    } 
} 

我期待下面的輸出(帶有GIMP畫):

Expected result

但其實這是圖所示:

Actual result

我在做什麼錯?

我正在使用qmlviewer(Qt 4.8.2)顯示帶有-opengl選項的QML文件,以啓用着色器效果。

也許這是關係到this strange behavior with alpha blending on QGLFramebufferObjects我發現了一些星期前...

回答

7

嘗試修改片段着色器的主要功能:

void main(void) 
    { 
     gl_FragColor = texture2D(source, qt_TexCoord0).rgba*qt_TexCoord0.x; 
    } 
+4

呀,謝謝。剛剛意識到Qt正在使用預乘顏色。您可以將其添加到您的答案中,作爲我們必須乘以所有顏色分量的原因,而不是如果我們想要應用alpha蒙版,則不僅需要alpha值。 – leemes