WebGL半透明物體的繪制

WebGL 中當透明和半透明物體共存時，相關設置不正確的話，物體表面會出現破碎雜亂的斷面，非常影響效果，我們接着就來解決這個問題。
完成的展示Demo請看: 半透明物體和透明物體共存

α 混合

讓物體實現半透明效果需要用到顏色的α分量。該功能被稱為a混合(alpha blending) 或 混合 blending，WebGL已經內置該功能，但需要開啟，如果只設置了顏色的第四個分量 α 是看不到透明效果的，這第四分量α其實和 css 樣式的 rgba / hsla 顏色模式 中的 α 是一樣的，或者類似 opacity 屬性。必須要執行下面兩個步驟才能看到透明效果:

1. 開啟混合功能：gl.enable(gl.BLEND)。
2. 指定混合函數：gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA)。

gl.blendFunc(src_factor, dst_factor)

a混合函數，指定如如何混合兩者的顏色，權重因子的類型多種多樣，參數：

• src_factor: 指定源顏色在混合顏色的權重因子，如下表所示
• dst_factor: 指定目標顏色在混合后顏色的權重因子，如下表所示

// 混合顏色計算公式： 
<混合后的顏色> = <源顏色> * src_factor + <目標顏色> * dst_factor

// 一般半透明效果常用如下形式
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA)

權重因子列表

(Rs,Gs,Bs,As) 表示源顏色各分量， (Rd,Gd,Bd,Ad) 表示目標顏色的各分量

常量	R分量的系數	G分量的系數	B分量的系數
gl.ZERO	0.0	0.0	0.0
gl.ONE	1.0	1.0	1.0
gl.SRC_COLOR	Rs	Gs	Bs
gl.ONE_MINUS_SRC_COLOR	1-Rs	1-Gs	1-Bs
gl.DST_COLOR	Rd	Gd	Bd
gl.ONE_MINUS_DST_COLOR	1-Rd	1-Gd	1-Bd
gl.SRC_ALPHA	As	As	As
gl.ONE_MINUS_SRC_ALPHA	1-As	1-As	1-As
gl.DST_ALPHA	Ad	Ad	Ad
gl.ONE_MINUS_DST_ALPHA	1-Ad	1-Ad	1-Ad
gl.SRC_ALPHA_SATUREATE	min(As,Ad)	min(As,Ad)	min(As,Ad)

透明和不透明物體共存

實現 a 混合最簡單的方式是屏蔽掉隱藏面消除功能，即去掉 gl.enable(gl.DEPTH_TEST)，但關閉隱藏面消除功能是一個粗暴的解決方案，並不能滿足實際需求。其實可通過某些機制，同時實現隱藏面消除和半透明效果，步驟如下：

//1.開啟隱藏面消除功能:
gl.enable(gl.DEPTH_TEST)。

//2.繪制所有不透明的物體(a == 1.0)

//3.鎖定深度緩沖區的寫入操作，使之只讀 (深度緩沖區用於隱藏面消除):
gl.depthMask(false);

//4.繪制所有半透明的物體 a < 1.0，注意將物體按深度排序，a 最小最先繪制

//5.釋放深度緩沖區，使之可讀可寫: 
gl.depthMask(true)

gl.depthMask(mask)

鎖定或釋放深度緩沖區的寫入操作

mask: 鎖定深度緩沖區的寫入操作 false，釋放 true

實現效果

我們寫個Demo來實際演示效果，比如我要繪制8個物體，其中前面4個是非透明的物體，即 α 分量值則為1，剩余物體的 α 分量分別從 0.1至0.4不等。

for (var i = 0; i < 8; i++) {
    let color = randomColor();
    color[3] = i > 3 ? (i - 3)/10 :1;// 透明物體 α 分量小於1，非透明物體則等於1
    
    Polygons.push({
        x: random(-9,9),
        y: random(0, 6),
        z: random(-5,5),
        color: color
    });
}

如果是繪制的物體隊列是無序的，則必須手動排序。但我這里建立圖形時已經排好序，前4個為不透明物體，剩余是透明物體，所以可直接按順序繪制，針對是否為透明物體，分別設置緩沖區寫入和隱藏面刪除功能。

if(i < 4){ // 非透明物體
    gl.depthMask(true);
    gl.disable(gl.BLEND);
} else { //透明物體
    gl.depthMask(false);
    gl.enable(gl.BLEND);
    gl.blendFunc( gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA );
}
drawBufferInfo(gl, vao);

最終完成效果請看：半透明物體和透明物體共存