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

Question

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

在整个屏幕上画一个背景图像和它上面绘制淡入和淡出的另一个叠加图像（ alpha变化）

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

所以我创建了一个混合两个纹理的着色器，我认为我可以使用统一的（randomAlpha）随着时间的推移改变覆盖纹理alpha并创建一个淡入淡出的动画，但下面的代码并没有做到这一点，叠加纹理不透明度不会改变！

我知道有一个“Alpha Blend”，我可以用它来混合叠加和背景纹理，但问题是我想要最后的叠加（在不透明度更改后）将背景与“Screen 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); 
}