的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); 
}