一文詳解 OpenGL ES 紋理顏色混合

xiaxveliang發表於2021-12-15

在OpenGL中繪製的時候，有時候想使新畫的顏色和已經有的顏色按照一定的方式進行混合。例如：想使物體擁有半透明的效果，或者繪製疊加光亮的效果，這時候就需要用到OpenGLES混合。
Z軸深度由深到淺分別為：石頭牆、綠色矩形、藍色雲彩
如上圖所示，為石頭牆、綠色矩形、藍色雲彩 三個矩形混合後的展示效果。三個矩形（Z軸深度由深到淺）分別為，石頭牆、綠色矩形、藍色雲彩。

一、混合API

在OpenGLES中若使用混合，需要用到API函式方法(Java)：
void glBlendFunc( int srcfactor, int destfactor );

(1) 其OpenGL函式原型為：
void glBlendFunc(GLenum srcfactor, GLenum destfactor);

(2) 其功能為：
控制新畫上來的顏色 (source values, RGBA) 和 已經在幀緩衝區中的顏色 (destination values, RGBA) 的混合時源與目標 在最終顏色通道中所佔的比例。

(3) 方法引數

  • srcfactor：代表源因子，即新畫上來的顏色。
    該引數由九個列舉型被接受使用：
    GL_ZERO,
    GL_ONE,
    GL_DST_COLOR,
    GL_ONE_MINUS_DST_COLOR,
    GL_SRC_ALPHA,
    GL_ONE_MINUS_SRC_ALPHA,
    GL_DST_ALPHA,
    GL_ONE_MINUS_DST_ALPHA,
    GL_SRC_ALPHA_SATURATE.
  • destfactor：代表的是目標因子，即已經在幀緩衝區中的顏色。
    該引數由八個列舉型被接受使用：
    GL_ZERO,
    GL_ONE,
    GL_SRC_COLOR,
    GL_ONE_MINUS_SRC_COLOR,
    GL_SRC_ALPHA,
    GL_ONE_MINUS_SRC_ALPHA,
    GL_DST_ALPHA,
    GL_ONE_MINUS_DST_ALPHA

二、引數含義

  • 舉個例子
  • 引數含義

2.1 舉個例子

我們先看一個常用混合引數搭配：

// 最常用的混合因子搭配方式
// 即源因子為 GL_SRC_ALPHA 目標因子為 GL_ONE_MINUS_SRC_ALPHA 
glBlendFunc(GL30.GL_SRC_ALPHA, GL30.GL_ONE_MINUS_SRC_ALPHA);

以上引數搭配方式假設：

  • (Sr, Sg, Sb, Sa)代表源顏色src(要繪製的顏色)；
  • (Dr, Dg, Db, Da)代表目標顏色Dest(緩衝區中顏色)
    如果源因子的不透明度為0.2(透明度0.8)，alpha值的最大值為1，那麼源與目標混合後的最終顏色值為：
// 最終顏色值為：0.2*S+0.8*D
// OpenGL ES 最終顏色計算結果如下:
(0.2*Sr+(1-0.2)*Dr , 0.2*Sg+(1-0.2)*Dg , 0.2*Sb+(1-0.2)*Db,0.2*Sa+(1-0.2)*Da)

啟用混合與紋理矩形繪製順序程式碼舉例：

// 開啟混合  
gl.glEnable(GL10.GL_BLEND);  
// 指定混合比例
gl.glBlendFunc(GL10.GL_SRC_ALPHA, GL10.GL_ONE_MINUS_SRC_ALPHA);  
  
// 繪製石頭牆紋理矩形
gl.glPushMatrix();  
gl.glTranslatef(-0.8f, -0.8f, -0.02f);  
wallRect.drawSelf(gl, tex_wall);  
gl.glPopMatrix();  
  
// 繪製綠色紋理矩形
gl.glPushMatrix();  
gl.glTranslatef(0, 0, -0.01f);  
greenRect.drawSelf(gl, tex_green);  
gl.glPopMatrix();  
  
// 繪製藍色雲彩紋理矩形
gl.glPushMatrix();  
gl.glTranslatef(0.8f, 0.8f, 0f);  
cloudRect.drawSelf(gl, tex_cloud);  
gl.glPopMatrix();`

2.2 引數含義

有了上邊的例子，我們再回來看各個引數因子。

假設：

  • (Sr, Sg, Sb, Sa)代表源顏色src(要繪製的顏色)；
  • (Dr, Dg, Db, Da)代表目標顏色Dest(緩衝區中顏色)；
  • (Kr, Kg, Kb, Ka)代表緩衝區中各個通道R, G, B, A的最大值。

那麼各個引數因子所代表的值如下表所示：

混合因子 各顏色通道色彩比例值
GL_ZERO (0,0,0,0)
GL_ONE (1,1,1,1)
GL_SRC_COLOR (Sr/Kr, Sg/Kg, Sb/Kb, Sa/Ka)
GL_DST_COLOR (Dr/Kr, Dg/Kg, Db/Kb, Da/Ka)
GL_ONE_MINUS_SRC_COLOR (1,1,1,1) - (Sr/Kr,Sg/Kg,Sb/Kb,Sa/Ka)
GL_ONE_MINUS_DST_COLOR (1,1,1,1) - (Dr/Kr,Dg/Kg,Db/Kb,Da/Ka)
GL_SRC_ALPHA ( Sa/Ka, Sa/Ka, Sa/Ka, Sa/Ka )
GL_ONE_MINUS_SRC_ALPHA (1,1,1,1) - (Sa/Ka,Sa/Ka,Sa/Ka,Sa/Ka)
GL_DST_ALPHA ( Da/Ka, Da/Ka, Da/Ka, Da/Ka )
GL_ONE_MINUS_DST_ALPHA (1,1,1,1) - (Da/Ka,Da/Ka,Da/Ka,Da/Ka)
GL_SRC_ALPHA_SATURATE (min(Sa, Ka, Da)/Ka,min(Sa, Ka, Da)/Ka,min(Sa, Ka, Da)/Ka,1)

三、 幾種常用混合方式效果

下邊以三張紋理圖片在不同混合因子設定下的效果圖，對幾種常見的混合效果進行舉例說明。

  • 其中 離攝像機最遠的為一張 Alpha=1.0 的石頭牆紋理圖;
  • 其次 為一張 Alpha=0.6 的藍色雲彩紋理圖；
  • 最後離攝像機最近的為一張 Alpha=0.4的綠色紋理圖。

3.1 混合(GL_ONE, GL_ZERO)

源顏色（最後繪製的綠色矩形）引數因子為GL_ONE，目標色（緩衝區中顏色）引數因子為GL_ZERO。

這種引數因子組合混合比例 (1.0, 0.0)：

  • 源顏色（最後繪製的綠色矩形）覆蓋目標色（緩衝區中顏色）；
  • 目標色（緩衝區中顏色）不起作用，

其執行效果如下圖所示：
混合方式(GL_ONE, GL_ZERO)

3.2 混合(GL_ONE, GL_ONE)

源顏色（最後繪製的綠色矩形）與 目標色（緩衝區中顏色）均為GL_ONE。

這種引數因子組合混合比例 (1.0, 1.0)：

  • 源顏色（最後繪製的綠色矩形）與 目標色（緩衝區中顏色）在混合時，源與目標的色彩通道顏色所佔的比例相同。

其執行效果如下圖所示：
混合方式(GL_ONE, GL_ONE)

仔細觀察以上效果圖，可以看到三張圖片疊加部分，幾乎為白色。

3.3 混合(GL_ONE, GL_ONE_MINUS_DST_ALPHA)

源顏色（最後繪製的綠色矩形）引數因子為 GL_ONE，目標色（緩衝區中顏色）引數因子為 GL_ONE_MINUS_DST_ALPHA。

這種引數因子組合混合比例 (1.0, 1.0-Da/Ka)：

  • 源顏色（最後繪製的綠色矩形）與目標色（緩衝區中顏色），在混合時取源顏色與 (1- Da/Ka)比例進行混合。

其執行效果如下圖所示：
混合方式(GL_ONE, GL_ONE_MINUS_DST_ALPHA)

觀察以上效果圖：可以看到最上邊綠色矩形佔最終混合顏色的比例較高。
三張紋理繪製時：

  • 前兩張紋理混合時：源顏色為藍色雲彩紋理矩形，目標顏色為石頭牆紋理矩形。
    由於混合比例為 (1.0, 1.0-Da/Ka)，混合後的最終顏色只顯示藍色雲彩紋理矩形（石頭牆紋理的ALPHA=1.0，最終石頭牆顏色所佔的比例 1.0-1.0=0.0，比例為0）。
  • 其次綠色紋理矩形與緩衝區中顏色進行混合：源顏色為綠色紋理矩形，目標顏色為緩衝區中顏色。
    混合後的最終顏色基本只顯示綠色紋理矩形（藍色雲彩紋理矩形的ALPHA=0.6，(1-0.6)雲紋理與綠色矩形混合後，幾乎看不到雲紋理的顏色）。

3.4 混合 (GL_SRC_ALPHA, GL_ONE)

源顏色（最後繪製的綠色矩形）引數因子為 GL_SRC_ALPHA，目標色（緩衝區中顏色）引數因子為 GL_ONE。

這種引數因子組合混合比例 (Sa/Ka, 1.0)：

  • 源顏色（最後繪製的綠色矩形）與目標色（緩衝區中顏色），在混合時以源顏色值乘以Sa/Ka與目標顏色值相加。

其執行效果如下圖所示：
混合方式 (GL_SRC_ALPHA, GL_ONE)

觀察以上效果圖，可以看出目標牆面與雲紋理混合後牆面紋理顏色值所佔比例較高，三個紋理圖片疊加部分有些畫素點為白色。

3.5 混合 (GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA)

這種方式是最常用的混合方式，源顏色（最後繪製的綠色矩形）引數因子為 GL_SRC_ALPHA，目標色（緩衝區中顏色）引數因子為 GL_ONE_MINUS_SRC_ALPHA。

這種引數因子組合混合比例 (Sa/Ka, 1.0-Sa/Ka)：

  • 源顏色（最後繪製的綠色矩形）與 目標色（緩衝區中顏色）在混合時，取源顏色的 (Sa/Ka) 與目標顏色 (1.0-Sa/Ka) 相加計算最終的顏色值。

其執行效果如下圖所示：
混合方式 (GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA)

附案例程式碼

案例原始碼下載地址：
https://download.csdn.net/download/aiwusheng/64038379

= THE END =

歡迎關注我的公眾號

相關文章