使用 ShaderEffectItem 的奇怪 alpha 混合结果答案

【问题标题】：Strange alpha blending results with ShaderEffectItem使用 ShaderEffectItem 的奇怪 alpha 混合结果
【发布时间】：2015-04-22 07:04:51
【问题描述】：

我正在尝试使用 ShaderEffectItem 在 QML 项目上应用简单的 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 绘制）：

但这实际上是显示出来的：

我做错了什么？

我正在使用 qmlviewer (Qt 4.8.2) 显示带有 -opengl 选项的 QML 文件，以启用着色器效果。

也许这与我几周前发现的this strange behavior with alpha blending on QGLFramebufferObjects 有关...

【问题讨论】：

标签： qt glsl qml alphablending

【解决方案1】：

尝试将片段着色器的主要功能修改为：

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

【讨论】：

是的，谢谢。刚刚意识到 Qt 正在使用预乘颜色。您可以将此添加到您的答案中，因为如果我们想应用 alpha 蒙版，我们必须乘以所有颜色分量而不仅仅是 alpha 值。