LibGDX - 使用着色器将纹理覆盖在另一个纹理之上

Question

我正在尝试混合从 FBO 获得的两种不同的纹理（场景和云）并将它们绘制在四边形上。

uniform sampler2D u_texture;
uniform sampler2D u_texture2;  
uniform vec2 u_res;

void main(void)
{   
vec2 texCoord = gl_FragCoord.xy / u_res.xy;

vec4 sceneColor = texture2D(u_texture, texCoord);
vec4 addColor = texture2D(u_texture2, texCoord);    

gl_FragColor = sceneColor+addColor;
} 

glBlendFunc 是

Gdx.gl20.glBlendFunc(GL20.GL_SRC_ALPHA, GL20.GL_ONE_MINUS_SRC_ALPHA);

我尝试了glBlendFunc 的所有组合，上面的组合是最好的组合。

创建 FBO：

fbClouds = new FrameBuffer(Format.RGBA8888, Gdx.graphics.getWidth(), Gdx.graphics.getHeight(), true);
fbScene = new FrameBuffer(Format.RGB565, Gdx.graphics.getWidth(), Gdx.graphics.getHeight(), true);
fbMix = new FrameBuffer(Format.RGB565, Gdx.graphics.getWidth(), Gdx.graphics.getHeight(), true);

创造云：

fbClouds.begin();
    Gdx.gl.glClearColor(0, 0, 0, 0); // to make it transparent
    Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT | GL20.GL_DEPTH_BUFFER_BIT);
    modelBatch.begin(cam);      
    for (Integer e : drawOrder) {
        if(isVisible(cam, clouds[e])){
            drawLightning(e, modelBatch);           
            modelBatch.render(clouds[e], cloudShader);
            modelBatch.flush();             
        }
    }
    modelBatch.end();
    fbClouds.end();

渲染代码：

Gdx.gl20.glDisable(GL20.GL_BLEND);
//Gdx.gl20.glEnable(GL20.GL_BLEND);
//Gdx.gl20.glBlendFunc(GL20.GL_SRC_ALPHA, GL20.GL_ONE_MINUS_SRC_ALPHA);
fbMix.begin();
    Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT | GL20.GL_DEPTH_BUFFER_BIT);

    mixShader.begin();
    fbScene.getColorBufferTexture().bind(1);
    mixShader.setUniformi("u_texture", 1);

    fbClouds.getColorBufferTexture().bind(0);
    mixShader.setUniformi("u_texture2", 0);

    mixShader.setUniformf("u_res", Gdx.graphics.getWidth(), Gdx.graphics.getHeight());

    quad.render(mixShader, GL20.GL_TRIANGLES);

    mixShader.end();
 fbMix.end();

所以，我得到了意想不到的结果（云完全是白色的，虽然它们应该是灰色的）：

如果我使用modelbatch 渲染云，结果应该是：

混合两种纹理而不失色的正确方法是什么？

Answer 1

用于将两个 FBO 绘制到屏幕上的混合功能应该是无关紧要的，因为它们没有任何显示，对吧？因此，在绘制 FBO 之前应关闭混合，否则会浪费 GPU 周期将 FBO 与清晰颜色混合。

它变成白色的原因是您在蓝色中添加了灰色，而没有先使蓝色变暗。通常，当您在屏幕上绘制透明对象时，会使用如下混合函数：GL_SRC_ALPHA、GL_ONE_MINUS_SRC_ALPHA。这意味着您将精灵的颜色乘以其透明度（有效地使透明颜色变暗）并将背景乘以精灵的 alpha 的倒数（从而使将添加到精灵的不透明像素的像素变暗，因此它们不会太明亮）。

在您的情况下，您想在片段着色器中模拟相同的东西，因为您试图在着色器中混合两个纹理，然后再将它们输出到屏幕。

因此，如果您的云 FBO 具有 Alpha 通道，您可以在片段着色器中执行此操作，然后您就可以开始了：

void main()
{   
    vec2 texCoord = gl_FragCoord.xy / u_res.xy;

    vec4 sceneColor = texture2D(u_texture, texCoord);
    vec4 addColor = texture2D(u_texture2, texCoord);    

    gl_FragColor = addColor*addColor.a + sceneColor*(1-addColor.a);
} 

但是，您的云的 FBO 没有 Alpha 通道，因此您需要进行一些更改。

您可以做的一件事是让您的 FBO 颜色纹理使用 RGBA4444，使其具有 Alpha 通道，然后仔细绘制云，以便它们也写入 Alpha 通道。这会有点复杂，因为您必须使用单独的混合功能，您可以分别为 RGB 和 A 通道选择两个不同的混合功能。我以前没有这样做过。虽然应该可以，但我之前什至没有尝试过这种方法，因为我认为 4 位颜色看起来很糟糕。

或者，如果您的云都是单色的，您可以将 Alpha 信息编码到其中一个颜色通道中。为此，您需要自定义用于将云绘制到 FBO 的片段着色器。它看起来像这样：

vec4 textureColor = texture2D(u_texture, v_texCoord);
gl_FragColor = vec4(textureColor.r * textureColor.a, textureColor.a, 0, textureColor.a);

它的作用是将云的单色放入 R 通道并预乘 alpha，并将 alpha 放入 G 通道。我们想要预乘 alpha，因此我们可以简单地将编码的云精灵添加到场景中。这是因为当您在已绘制的 sprite 中半透明的区域中在已绘制的 sprite 前面绘制一些东西时，您希望使 G 编码的 alpha 变亮以使最终 FBO 图像中的像素更加不透明。由于我们使用的是预乘 alpha，因此请使用混合函数 GL_ONE、GL_ONE_MINUS_SRC_ALPHA 绘制云。

（这是一个轻微的近似值，因为目标的 G 编码 alpha 被混合函数的第二部分变暗了一点，但我查看了数学，它似乎可以接受。近似值导致稍微更透明云。）

因此，如果您按原样将云 FBO 绘制到屏幕上，现在它看起来会像一堆黄色。我们只需对上面的片段着色器稍作调整即可使用编码数据：

void main()
{   
    vec2 texCoord = gl_FragCoord.xy / u_res.xy;

    vec4 sceneColor = texture2D(u_texture, texCoord);
    vec4 addColor = texture2D(u_texture2, texCoord);    

    gl_FragColor = vec4(addColor.r*addColor.g) + sceneColor*(1-addColor.g);
} 

如果你想给你的云染上纯灰色以外的东西，你可以添加一个统一的颜色：

void main()
{   
    vec2 texCoord = gl_FragCoord.xy / u_res.xy;

    vec4 sceneColor = texture2D(u_texture, texCoord);
    vec4 addColor = texture2D(u_texture2, texCoord);    

    gl_FragColor = u_cloudTint*vec4(addColor.r*addColor.g) + sceneColor*(1-addColor.g);
}