Question

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

在整个屏幕上绘制背景图像，在其上方绘制另一个淡入淡出的叠加图像（alpha更改）

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

所以我创建了一个混合两个纹理的着色器，我认为我可以使用制服（randomAlpha）随时间更改叠加纹理alpha并创建淡入淡出动画，但以下代码不会诀窍，叠加纹理不透明度不会改变！

我知道我可以使用“Alpha Blend”来混合叠加层和背景纹理，但问题是我希望最终叠加层（在不透明度更改后）将背景与“Screen Blend”混合不是“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));

  }

显然我在这里遗漏了一些重要的事情。
如何更改纹理的不透明度？如何创建淡入淡出效果？

Answer 1

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

当您想要将纹理混合到一起时更改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);
}

OpenGL ES 2.0，如何为纹理的不透明度设置动画

1 个答案: