我找到了一些被问过的地方，但我还没有找到一个好的答案 .
问题：我想要渲染到纹理，然后我想将渲染的纹理绘制到屏幕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％：
So, a breakdown of what I want to know:
-
我将混合模式设置为： X ？
-
我将场景渲染为纹理 . (Maybe I have to render with a few blend modes or multiple times?)
-
我将混合模式设置为： Y ？
-
我将纹理渲染到现有场景的屏幕上 . (Maybe I need a different shader? Maybe I need to render the texture a few times?)
期望的行为是，在该步骤结束时，最终的像素结果与我刚刚执行此操作相同：
-
我将混合模式设置为：（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 SETUP / 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);
}
4 回答
基于我运行的一些计算和模拟，我提出了两个相似的解决方案，似乎可以解决这个问题 . 一个使用预乘颜色和单个（单独）混合功能，另一个使用没有预乘颜色，但需要在此过程中多次更改混合功能 .
选项1：单混合功能，预乘
这种方法在整个过程中使用单一混合函数 . 混合功能是：
它需要预乘的颜色，这意味着如果您的输入颜色通常为
(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期望预乘的颜色进入混合函数 .为了说明这是有效的，让's go through an example where 3 layers are rendered. I' ll对
r和a组件进行所有计算 .g和b的计算将等同于r的计算 . 我们将按以下顺序渲染三个图层：对于参考计算，我们将这3个层与标准
GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA混合函数混合 . 我们不需要在这里跟踪生成的alpha，因为在混合函数中没有使用DST_ALPHA，我们还没有使用预乘的颜色：所以最后一个术语是我们最终结果的目标 . 现在，我们将第2层和第3层渲染为FBO . 稍后我们将第1层渲染到帧缓冲区中，然后将FBO混合在其上 . 目标是获得相同的结果 .
从现在开始，我们将应用开头列出的混合函数，并使用预乘的颜色 . 我们还需要计算alphas，因为
DST_ALPHA用于混合函数 . 首先，我们将第2层和第3层渲染到FBO中：现在我们渲染到主帧缓冲区 . 因为我们不会再次计算
r组件：现在我们将FBO的内容混合在一起 . 所以我们在FBO中为"after layer 3"计算的是我们的源颜色/ alpha，
a1 * r1是目标颜色，GL_ONE, GL_ONE_MINUS_SRC_ALPHA仍然是混合函数 . FBO中的颜色已经预先相乘，因此在混合FBO内容时，着色器中不会有预乘：将上一个术语与我们上面为标准混合情况计算的参考值进行比较，您可以看出它完全相同 .
这个类似问题的答案在混合函数的
GL_ONE_MINUS_DST_ALPHA, GL_ONE部分有更多背景：OpenGL ReadPixels (Screenshot) Alpha .我实现了我的目标 . 现在，让我与互联网分享这些信息，因为它无处可寻 .
创建你的帧缓冲（blindframebuffer等）
将帧缓冲区清除为0,0,0,0
正确设置视口 . 这是我在问题中理所当然的所有基本内容，但想包含在这里 .
现在，通常使用glBlendFunc（GL_SRC_ALPHA，GL_ONE_MINUS_SRC_ALPHA）将场景渲染到帧缓冲区 . 确保场景已排序（就像您通常那样 . ）
现在绑定包含的片段着色器 . 这将通过混合函数撤消对图像颜色值造成的损害 .
使用glBlendFunc（GL_SRC_ALPHA，GL_ONE_MINUS_SRC_ALPHA）将纹理渲染到屏幕
使用常规着色器返回正常渲染 .
我在问题中包含的代码基本上没有被触及，除了我确保在我执行“preDraw”功能时绑定下面列出的着色器，这是我自己的小框架，但基本上是“绘制到屏幕”呼唤我渲染的纹理 .
我称之为“无混色”着色器 .
为什么我要做textureColor / = sqrt（textureColor.a）？因为原始颜色如下所示：
resultR = r * a，resultG = g * a，resultB = b * a，resultA = a * a
现在，如果我们要撤消，我们需要弄清楚它是什么 . 最简单的方法是在这里解决“a”：
resultA = a * a
如果a在原始渲染时为.25，我们有：
resultA = .25 * .25
要么：
结果A = 0.0625
当纹理被绘制到屏幕时，我们不再有“a”了 . 我们知道结果是什么，它是纹理的alpha通道 . 所以我们可以将sqrt（resultA）恢复到.25 . 现在有了这个值，我们可以分为撤消乘法：
textureColor / = SQRT（textureColor.a）;
这解决了一切，取消混合！
*编辑：嗯......至少有点儿 . 有一个很小的不准确性，在这种情况下，我可以通过渲染一个与帧缓冲区清晰颜色不同的清晰颜色来显示它 . 一些alpha信息似乎丢失了，可能是在rgb Channels 中 . 这对我来说仍然足够好，但是我想在退出之前跟进显示不准确的屏幕截图 . 如果有人有解决方案，请提供！
我已经开了一笔赏金，让这个答案达到规范的100％正确的解决方案 . 现在，如果我在现有透明度上渲染更多部分透明对象，则透明度的累积方式与右侧不同，导致最终纹理的亮度超出右侧所示 . 同样，当在非黑色背景上渲染时，很明显现有解决方案的结果略有不同，如上所示 .
在所有情况下，适当的解决方案都是相同的 . 我现有的解决方案无法在着色器校正中考虑目标混合，只考虑源alpha .
为了在一次通过中执行此操作，您需要支持单独的颜色和Alpha混合功能 . 首先渲染具有存储在alpha通道中的前景贡献的纹理（即1 =完全不透明，0 =完全透明）和RGB颜色通道中的预乘源颜色值 . 要创建此纹理，请执行以下操作：
将纹理清除为RGBA = [0,0,0,0]
将颜色通道混合设置为src_color * src_alpha dst_color *（1-src_alpha）
将alpha通道混合设置为src_alpha *（1-dst_alpha）dst_alpha
将场景渲染到纹理
要设置2）和3）指定的模式，您可以执行以下操作：
glBlendFuncSeparate(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA, GL_ONE_MINUS_DST_ALPHA, GL_ONE)和glBlendEquation(GL_FUNC_ADD)接下来，通过将颜色混合设置为：src_color dst_color *（1-src_alpha），即
glBlendFunc(GL_ONE, GL_ONE_MINUS_SRC_ALPHA)和glBlendEquation(GL_FUNC_ADD)，将此纹理渲染到场景中您的问题比OpenGL或个人计算机或任何活人更老 . 你试图将两个图像混合在一起，使它看起来像根本没有混合 . 印刷机面临这个确切的问题 . 当墨水施加到纸张上时，结果是墨水颜色和纸张颜色之间的混合 .
解决方案与OpenGL中的解决方案相同 . 您必须更改源图像才能控制最终结果 . 这很容易弄清楚你是否检查了用于混合的数学 .
对于R，G，B中的每一个，得到的颜色是
(old * (1-opacity)) + (new * opacity). 基本场景和您想要模拟的场景是在不透明度A处将颜色直接绘制到最终后台缓冲区上 .例如，不透明度为50％，绿色通道为
0xFF. 结果应该是黑色背景上的0x7F（包括不可避免的舍入误差） . 您可能无法假设背景为黑色，因此期望绿色通道在0x7F和0xFF之间变化 .你真的渲染到纹理，然后将纹理重新渲染到后缓冲区 . 事实证明"vague suggestions to use 'premultiplied alpha'"是正确的 . 虽然您的解决方案是使用着色器在最后一步中混合先前的混合操作，但标准解决方案是将原始源纹理的颜色与Alpha通道（也称为预乘alpha）相乘 . 在堆叠中间纹理时，RGB通道被混合而不乘以Alpha . 将纹理渲染到后缓冲区时，将混合RGB通道而不乘以Alpha . 因此，您可以整齐地避免多重乘法问题 .
请consult these resources以便更好地理解 . 我和其他大多数人在DirectX中更熟悉这种技术，因此您可能必须搜索适当的OGL标志 .