c++ Opengl渲染纹理与部分透明度(半透明度)然后渲染到屏幕

我找到了一些被问过的地方,但我还没有找到一个好的答案.

问题:我想渲染到纹理,然后我想将渲染的纹理绘制到屏幕IDENTICALLY,如果我跳过渲染到纹理步骤并且只是直接渲染到屏幕,它将如何显示.我目前正在使用混合模式glBlendFunc(GL_SRC_ALPHA,GL_ONE_MINUS_SRC_ALPHA).我也有glBlendFuncSeparate来玩.

我希望能够将部分透明的重叠项呈现给此纹理.我知道混合函数当前正在弄乱基于Alpha的RGB值.我已经看到一些模糊的建议使用“预乘alpha”,但描述的含义很差.我在photoshop中制作png文件,我知道他们有一个半透明的位,你不能像TGA一样独立编辑alpha通道.如果需要,我可以切换到TGA,虽然PNG更方便.

现在,为了这个问题,我们假设我们没有使用图像,而是使用带有alpha的全彩色四边形.

一旦我将场景渲染到纹理,我需要将该纹理渲染到另一个场景,并且我需要将纹理再次呈现为部分透明度.事情就是崩溃的地方.在之前的混合步骤中,我明确地改变了基于Alpha的RGB值,如果Alpha为0或1,那么它再次正常工作,但如果它在中间,则结果是那些部分半透明像素进一步变暗.

玩混合模式我运气很少.我能做的最好就是渲染纹理:

glBlendFuncSeparate(GL_ONE,GL_ONE_MINUS_SRC_ALPHA,GL_ONE,GL_ONE);

我发现使用glBlendFunc(GL_SRC_ALPHA,GL_ONE_MINUS_SRC_ALPHA)多次渲染将近似正确的颜色(除非事情重叠).但这并不完美(正如你在下图中看到的那样,绿色/红色/蓝色框重叠的部分变得更暗,或者累积了alpha.(编辑:如果我在渲染中进行多次绘制以筛选部分而且仅渲染一次纹理,alpha累积问题消失,它确实有效,但为什么?!我不想要向屏幕渲染数百次相同的纹理,以使其正确积累)

以下是一些详细说明问题的图像(多个渲染过程使用基本混合(GL_SRC_ALPHA,GL_ONE_MINUS_SRC_ALPHA),并且它们在纹理渲染步骤中渲染多次.右边的3个框渲染为100%红色,绿色或蓝色(0-255)但蓝色的阿尔法值为50%,红色的阿尔法值为25%,绿色的阿尔法值为75%:

那么,我想知道的细分:

>我将混合模式设置为:X?
>我将场景渲染为纹理. (也许我必须使用一些混合模式或多次渲染?)
>我将混合模式设置为:Y?
>我将纹理渲染到现有场景的屏幕上. (也许我需要一个不同的着色器?也许我需要渲染纹理几次?)

期望的行为是,在该步骤结束时,最终的像素结果与我刚刚执行此操作相同:

>我将我的混合模式设置为:(GL_SRC_ALPHA,GL_ONE_MINUS_SRC_ALPHA)
>我将我的场景渲染到屏幕上.

而且,为了完整性,这里有一些我的原始天真尝试的代码(只是定期混合):

    //RENDER TO TEXTURE.
    void Clipped::refreshTexture(bool a_forceRefresh) {
        if(a_forceRefresh || dirtyTexture){
            auto pointAABB = basicAABB();
            auto textureSize = castSize<int>(pointAABB.size());
            clippedTexture = DynamicTextureDefinition::make("", textureSize, {0.0f, 0.0f, 0.0f, 0.0f});
            dirtyTexture = false;
            texture(clippedTexture->makeHandle(Point<int>(), textureSize));
            framebuffer = renderer->makeFramebuffer(castPoint<int>(pointAABB.minPoint), textureSize, clippedTexture->textureId());
            {
                renderer->setBlendFunction(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
                SCOPE_EXIT{renderer->defaultBlendFunction(); };

                renderer->modelviewMatrix().push();
                SCOPE_EXIT{renderer->modelviewMatrix().pop(); };
                renderer->modelviewMatrix().top().makeIdentity();

                framebuffer->start();
                SCOPE_EXIT{framebuffer->stop(); };

                const size_t renderPasses = 1; //Not sure?
                if(drawSorted){
                    for(size_t i = 0; i < renderPasses; ++i){
                        sortedRender();
                    }
                } else{
                    for(size_t i = 0; i < renderPasses; ++i){
                        unsortedRender();
                    }
                }
            }
            alertParent(VisualChange::make(shared_from_this()));
        }
    }

这是我用来设置场景的代码:

    bool Clipped::preDraw() {
        refreshTexture();

        pushMatrix();
        SCOPE_EXIT{popMatrix(); };

        renderer->setBlendFunction(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
        SCOPE_EXIT{renderer->defaultBlendFunction();};
        defaultDraw(GL_TRIANGLE_FAN);

        return false; //returning false blocks the default rendering steps for this node.
    }

以及渲染场景的代码:

test = MV::Scene::Rectangle::make(&renderer, MV::BoxAABB({0.0f, 0.0f}, {100.0f, 110.0f}), false);
test->texture(MV::FileTextureDefinition::make("Assets/Images/dogfox.png")->makeHandle());

box = std::shared_ptr<MV::TextBox>(new MV::TextBox(&textLibrary, MV::size(110.0f, 106.0f)));
box->setText(UTF_CHAR_STR("ABCDE FGHIJKLM NOPQRS TUVWXYZ"));
box->scene()->make<MV::Scene::Rectangle>(MV::size(65.0f, 36.0f))->color({0, 0, 1, .5})->position({80.0f, 10.0f})->setSortDepth(100);
box->scene()->make<MV::Scene::Rectangle>(MV::size(65.0f, 36.0f))->color({1, 0, 0, .25})->position({80.0f, 40.0f})->setSortDepth(101);
box->scene()->make<MV::Scene::Rectangle>(MV::size(65.0f, 36.0f))->color({0, 1, 0, .75})->position({80.0f, 70.0f})->setSortDepth(102);
test->make<MV::Scene::Rectangle>(MV::size(65.0f, 36.0f))->color({.0, 0, 1, .5})->position({110.0f, 10.0f})->setSortDepth(100);
test->make<MV::Scene::Rectangle>(MV::size(65.0f, 36.0f))->color({1, 0, 0, .25})->position({110.0f, 40.0f})->setSortDepth(101);
test->make<MV::Scene::Rectangle>(MV::size(65.0f, 36.0f))->color({.0, 1, 0, .75})->position({110.0f, 70.0f})->setSortDepth(102);

这是我的屏幕画:

renderer.clearScreen();
test->draw(); //this is drawn directly to the screen.
box->scene()->draw(); //everything in here is in a clipped node with a render texture.
renderer.updateScreen();

*编辑:FRAMEBUFFER设置/ TEARDOWN代码:

void glExtensionFramebufferObject::startUsingFramebuffer(std::shared_ptr<Framebuffer> a_framebuffer, bool a_push){
    savedClearColor = renderer->backgroundColor();
    renderer->backgroundColor({0.0, 0.0, 0.0, 0.0});

    require(initialized, ResourceException("StartUsingFramebuffer failed because the extension could not be loaded"));
    if(a_push){
        activeFramebuffers.push_back(a_framebuffer);
    }

    glBindFramebuffer(GL_FRAMEBUFFER, a_framebuffer->framebuffer);
    glFramebufferTexture2D(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_TEXTURE_2D, a_framebuffer->texture, 0);
    glBindRenderbuffer(GL_RENDERBUFFER, a_framebuffer->renderbuffer);
    glRenderbufferStorage(GL_RENDERBUFFER, GL_DEPTH_COMPONENT24, roundUpPowerOfTwo(a_framebuffer->frameSize.width), roundUpPowerOfTwo(a_framebuffer->frameSize.height));

    glViewport(a_framebuffer->framePosition.x, a_framebuffer->framePosition.y, a_framebuffer->frameSize.width, a_framebuffer->frameSize.height);
    renderer->projectionMatrix().push().makeOrtho(0, static_cast<MatrixValue>(a_framebuffer->frameSize.width), 0, static_cast<MatrixValue>(a_framebuffer->frameSize.height), -128.0f, 128.0f);

    GLenum buffers[] = {GL_COLOR_ATTACHMENT0};
    //pglDrawBuffersEXT(1, buffers);


    renderer->clearScreen();
}

void glExtensionFramebufferObject::stopUsingFramebuffer(){
    require(initialized, ResourceException("StopUsingFramebuffer failed because the extension could not be loaded"));
    activeFramebuffers.pop_back();
    if(!activeFramebuffers.empty()){
        startUsingFramebuffer(activeFramebuffers.back(), false);
    } else {
        glBindFramebuffer(GL_FRAMEBUFFER, 0);
        glBindRenderbuffer(GL_RENDERBUFFER, 0);

        glViewport(0, 0, renderer->window().width(), renderer->window().height());
        renderer->projectionMatrix().pop();
        renderer->backgroundColor(savedClearColor);
    }
}

我清晰的屏幕代码:

void Draw2D::clearScreen(){
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT | GL_STENCIL_BUFFER_BIT);
}
最佳答案
基于我运行的一些计算和模拟,我想出了两个相似的解决方案似乎可以解决这个问题.一个使用预乘的颜色与单个(单独的)混合功能相结合,另一个使用没有预乘的颜色,但需要在此过程中多次更改混合功能.

选项1:单混合功能,预乘

这种方法适用于整个过程中的单一混合功能.混合功能是:

glBlendFuncSeparate(GL_ONE, GL_ONE_MINUS_SRC_ALPHA,
                    GL_ONE_MINUS_DST_ALPHA, GL_ONE);

它需要预乘的颜色,这意味着如果您的输入颜色通常是(r,g,b,a),则使用(r * a,g * a,b * a,a)代替.您可以在片段着色器中执行预乘.

顺序是:

>将混合函数设置为(GL_ONE,GL_ONE_MINUS_SRC_ALPHA,GL_ONE_MINUS_DST_ALPHA,GL_ONE).
>将渲染目标设置为FBO.
>使用预乘颜色渲染要渲染到FBO的图层.
>将渲染目标设置为默认帧缓冲区.
>使用预乘颜色在FBO内容下方渲染所需的图层.
>渲染FBO附件,不应用预乘,因为FBO中的颜色已经预乘.
>使用预乘颜色在FBO内容之上渲染所需的图层.

选项2:切换混合功能,无预乘

这种方法不需要为任何步骤预先乘以颜色.缺点是在此过程中必须将混合功能切换几次.

>将混合函数设置为(GL_SRC_ALPHA,GL_ONE_MINUS_SRC_ALPHA,GL_ONE_MINUS_DST_ALPHA,GL_ONE).
>将渲染目标设置为FBO.
>渲染要渲染到FBO的图层.
>将渲染目标设置为默认帧缓冲区.
>(可选)将混合函数设置为(GL_SRC_ALPHA,GL_ONE_MINUS_SRC_ALPHA).
>在FBO内容下面渲染您想要的图层.
>将混合函数设置为(GL_ONE,GL_ONE_MINUS_SRC_ALPHA).
>渲染FBO附件.
>将混合函数设置为(GL_SRC_ALPHA,GL_ONE_MINUS_SRC_ALPHA).
>在FBO内容之上渲染所需的图层.

解释和证明

我认为选项1更好,可能更有效,因为它不需要在渲染过程中切换混合功能.所以下面的详细解释是针对选项1的.选项2的数学运算几乎完全相同.唯一真正的区别是选项2使用GL_SOURCE_ALPHA作为混合函数的第一项以在必要时执行预乘,其中选项1期望预乘的颜色进入混合函数.

为了说明这是有效的,让我们来看一个渲染3层的例子.我将对r和组件进行所有计算. g和b的计算将等于r的计算.我们将按以下顺序渲染三个图层:

(r1, a1)  pre-multiplied: (r1 * a1, a1)
(r2, a2)  pre-multiplied: (r2 * a2, a2)
(r3, a3)  pre-multiplied: (r3 * a3, a3)

对于参考计算,我们将这3个层与标准GL_SRC_ALPHA,GL_ONE_MINUS_SRC_ALPHA混合函数混合.我们不需要在此处跟踪生成的alpha,因为DST_ALPHA未在混合函数中使用,我们还没有使用预乘的颜色:

after layer 1: (a1 * r1)
after layer 2: (a2 * r2 + (1.0 - a2) * a1 * r1)
after layer 3: (a3 * r3 + (1.0 - a3) * (a2 * r2 + (1.0 - a2) * a1 * r1)) =
               (a3 * r3 + (1.0 - a3) * a2 * r2 + (1.0 - a3) * (1.0 - a2) * a1 * r1)

所以最后一个术语是我们最终结果的目标.现在,我们将第2层和第3层渲染为FBO.稍后我们将第1层渲染到帧缓冲区中,然后将FBO混合到它上面.目标是获得相同的结果.

从现在开始,我们将应用开头列出的混合函数,并使用预乘颜色.我们还需要计算alpha,因为DST_ALPHA用于混合函数.首先,我们将第2层和第3层渲染到FBO中:

after layer 2: (a2 * r2, a2)
after layer 3: (a3 * r3 + (1.0 - a3) * a2 * r2, (1.0 - a2) * a3 + a2)

现在我们渲染到主帧缓冲区.由于我们不关心生成的alpha,我只会再次计算r分量:

after layer 1: (a1 * r1)

现在我们将FBO的内容混合在一起.所以我们在FBO中为“after layer 3”计算的是我们的源颜色/ alpha,a1 * r1是目标颜色,GL_ONE,GL_ONE_MINUS_SRC_ALPHA仍然是混合函数. FBO中的颜色已经预先相乘,因此在混合FBO内容时,着色器中不会有预乘:

srcR = a3 * r3 + (1.0 - a3) * a2 * r2
srcA = (1.0 - a2) * a3 + a2
dstR = a1 * r1
ONE * srcR + ONE_MINUS_SRC_ALPHA * dstR
    = srcR + (1.0 - srcA) * dstR
    = a3 * r3 + (1.0 - a3) * a2 * r2 + (1.0 - ((1.0 - a2) * a3 + a2)) * a1 * r1
    = a3 * r3 + (1.0 - a3) * a2 * r2 + (1.0 - a3 + a2 * a3 - a2) * a1 * r1
    = a3 * r3 + (1.0 - a3) * a2 * r2 + (1.0 - a3) * (1.0 - a2) * a1 * r1

将最后一项与我们上面为标准混合情况计算的参考值进行比较,您可以看出它完全相同.

这个类似问题的答案在混合函数的GL_ONE_MINUS_DST_ALPHA,GL_ONE部分有更多背景:OpenGL ReadPixels (Screenshot) Alpha.

转载注明原文:c++ Opengl渲染纹理与部分透明度(半透明度)然后渲染到屏幕 - 代码日志