WebGL - 示例 α 混合透明效果

顏色的中的α分量控制着顏色的透明度，在webgl實現透明效果需要用到α混合，因爲webgl已經內置了該功能因此開啓即可

示例：透明混合

開啓混合

• 開啓混合功能 - gl.enable(gl.BLEND)
• 指定混合函數 - gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA)

混合函數

在進行α混合時，實際上webgl用到了兩個顏色，即 源顏色和 目標顏色，前者是 待混合進去的顏色後者是 待被混合進去的顏色

gl.blendFunc(src_factor, dst_factor)

混合後的顏色計算如下：

<混合後的顏色> = <源顏色> * src_factor + <目標顏色> * dst_factor

參數：

• src_factor:指定源顏色在混合後顏色中的權重因子
• dst_factor:指定目標顏色在混合顏色中的權重因子

有一種常用的混合方式 加法混合，加法混合會使被混合的區域更加明亮，通常被用來實現爆炸的關照效果，或者遊戲中需要引起玩家注意的任務物品 <gl.bendFunc(GL_SRC_ALPHA, GL_ONE)>

物體透明

需要實現物體的透明效果，只需要開啓混合然後關閉深度檢測就可以了

// 開啓混合
gl.enable(gl.BLEND);
// 設置混合函數
gl.blendFunc(gl.SRC_ALPHA,gl.ONE_MINUS_SRC_ALPHA);

但是場景中的物體不一定全部都是透明的，並且物體與物體間的深度關係也需要處理，因此不能全部關閉深度檢測；

webgl可以通過某種機制，同時實現隱藏面消除和半透明效果

1. 開啓隱藏面消除功能 – gl.enable(gl.DEPTH_TEST)
2. 繪製所有不透明的物體(α爲0)
3. 鎖定用於進行隱藏面消除的深度緩衝區的獨寫操作，使之只讀 gl.depthMask(false)
4. 繪製所有半透明的物體（α小於0）,注意它們應當按照深度排序，然後從後向前繪製
5. 釋放深度緩衝區，使之可讀可寫 gl.depthMask(true)

gl.depthMask()方法用來鎖定和釋放深度緩衝區

隱藏面消除原理

深度緩衝區存儲了每個像素的z座標值，（歸一化爲0.0到1.0之間），假設場景中有兩個前後重疊的三角形A和B；

首先，在繪製三角形A的時候，將他們的每個片元的z值寫入深度緩衝區，然後在繪製三角形B的時候，將B中與A重疊的片元和深度緩衝區中的對應像素的z值左比較；

如果深度緩衝區的z值小，就說明三角形A在前面，那麼B的千元就被捨棄discard了，不會寫入顏色緩衝區；

如果深度緩衝區中的z值大，就說明三角形B在前面，會把B的片元寫入顏色緩衝區，將之前的A的顏色覆蓋掉，這樣當繪製完成時，顏色緩衝區中的所有像素都是最前面的片元；以上這些操作都是在片元層面上進行的；