2

我正在使用 OpenGL ES 2.0 创建以下场景:

在整个屏幕上绘制背景图像,并在其上方绘制另一个淡入淡出的叠加图像(alpha 变化)

我还需要使用“ Screen blend”来混合叠加层和背景纹理。

randomAlpha所以我创建了一个混合两种纹理的着色器,我认为我可以使用一个统一的(不改变!

我知道有一个“Alpha Blend”可以用来混合叠加层和背景纹理,但问题是我希望最终叠加层(在不透明度更改后)将背景与“屏幕混合”而不是“阿尔法混合”

这就是我的片段着色器主要方法的样子:

 void main()
 {
     mediump vec4 background = texture2D(backgroundTexture, backgroundCoords);
     mediump vec4 overlay = texture2D(overlayTexture, overlayCoords);

     overlay.a = randomAlpha;

     // add overlay to background (using screen blend)
     mediump vec4 whiteColor = vec4(1.0);
     gl_FragColor = whiteColor - ((whiteColor - overlay) * (whiteColor - background));

  } 

显然我在这里遗漏了一些重要的东西。
我怎样才能改变纹理的不透明度?如何创建淡入淡出效果?

4

1 回答 1

3

就像您已经想到的那样,这只是混合的问题。

您缺少的是,当您想将纹理混合在一起rgb时更改值时,您需要重新计算通道。alpha

void main()
{
    mediump vec4 background = texture2D(backgroundTexture, backgroundCoords);
    mediump vec4 overlay = texture2D(overlayTexture, overlayCoords);

    overlay.a = randomAlpha;
    background.a = 1.0 - overlay.a;

    gl_FragColor = vec4(background.rgb * background.a + overlay.rgb * overlay.a, 1.0);
}

这是上面代码的简化版本,上面的代码只是更容易理解和阅读。

void main()
{
    mediump vec4 background = texture2D(backgroundTexture, backgroundCoords);
    mediump vec4 overlay = texture2D(overlayTexture, overlayCoords);

    overlay.rgb *= randomAlpha;
    background.rgb *= 1.0 - randomAlpha;

    gl_FragColor = vec4(background.rgb + overlay.rgb, 1.0);
}
于 2013-10-17T08:48:22.717 回答