ShaderEffectItem产生奇怪的Alpha混合结果 [英] Strange alpha blending results with ShaderEffectItem

问题描述

我正在尝试使用ShaderEffectItem在QML项上应用简单的alpha蒙版.

I'm trying to apply a simple alpha mask on a QML item using ShaderEffectItem.

这是一个最小的(非工作)示例:我有一个红色到白色的渐变作为背景，并想在其顶部绘制200x200的绿色正方形.该正方形的Alpha蒙版在左侧应为0.0，在右侧应为1.0，因此在左侧应为透明.

Here is a minimal (non-)working example: I have a red-to-white gradient as the background and want to draw a green 200x200 square on top of it. The alpha mask for this square should be 0.0 at the left and 1.0 at the right border, so it should be transparent at the left border.

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绘制):

I expected the following output (drawn with GIMP):

但这实际上是显示的:

我在做什么错了?

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

I'm using qmlviewer (Qt 4.8.2) to display the QML file with the -opengl option in order to enable the shader effect.

也许这与有关在QGLFramebufferObjects上进行Alpha混合的奇怪行为有关几周前我发现了...

Maybe this is related to this strange behavior with alpha blending on QGLFramebufferObjects I found some weeks ago...

推荐答案

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

Try modifying the main function of the fragment shader to :

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

这篇关于ShaderEffectItem产生奇怪的Alpha混合结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！