WebGL學習筆記（十一）：混合和透明

到目前為止我們繪制了不少模型，用到了不少顏色，顏色中有四個分量（RGBA），其中的A分量表示透明度，這個分量目前為止我們還沒有真正的用到；

A分量，表示的是當前的透明度，如果設定為 0.5 就會半透明，可以看到半透明的模型，也可以看見模型后面的東西；

開啟混合

要實現透明，需要開啟混合，會使用到下面的兩個方法：

// 開啟混合
gl.enable(gl.BLEND);
// 設定混合效果
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

源因子和目標因子是可以通過gl.blendFunc函數來進行設置的

gl.blendFunc有兩個參數，前者表示源因子，后者表示目標因子。這兩個參數可以是多種值，下面介紹比較常用的幾種。

• gl.ZERO：表示使用0.0作為因子，實際上相當於不使用這種顏色參與混合運算。
• gl.ONE：表示使用1.0作為因子，實際上相當於完全的使用了這種顏色參與混合運算。
• gl.SRC_ALPHA：表示使用源顏色的alpha值來作為因子。
• gl.DST_ALPHA：表示使用目標顏色的alpha值來作為因子。
• gl.ONE_MINUS_SRC_ALPHA：表示用1.0減去源顏色的alpha值來作為因子。
• gl.ONE_MINUS_DST_ALPHA：表示用1.0減去目標顏色的alpha值來作為因子。

舉例來說

• 如果設置了gl.blendFunc(gl.ONE, gl.ZERO);，則表示完全使用源顏色，完全不使用目標顏色，因此畫面效果和不使用混合的時候一致（當然效率可能會低一點點）。如果沒有設置源因子和目標因子，則默認情況就是這樣的設置。
• 如果設置了gl.blendFunc(gl.ZERO, gl.ONE);，則表示完全不使用源顏色，因此無論你想畫什么，最后都不會被畫上去了。（但這並不是說這樣設置就沒有用，有些時候可能有特殊用途）
• 如 果設置了gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);，則表示源顏色乘以自身的alpha 值，目標顏色乘以1.0減去源顏色的alpha值，這樣一來，源顏色的alpha值越大，則產生的新顏色中源顏色所占比例就越大，而目標顏色所占比例則減 小。這種情況下，我們可以簡單的將源顏色的alpha值理解為“不透明度”。這也是混合時最常用的方式。
• 如果設置了gl.blendFunc(gl.ONE, gl.ONE);，則表示完全使用源顏色和目標顏色，最終的顏色實際上就是兩種顏色的簡單相加。例如紅色(1, 0, 0)和綠色(0, 1, 0)相加得到(1, 1, 0)，結果為黃色。

注意：所謂源顏色和目標顏色，是跟繪制的順序有關的。假如先繪制了一個紅色的物體，再在其上繪制綠色的物體。則綠色是源顏色，紅色是目標顏色。如果順序反過來，則紅色就是源顏色，綠色才是目標顏色。在繪制時，應該注意順序，使得繪制的源顏色與設置的源因子對應，目標顏色與設置的目標因子對應。

繪制半透明三角形

核心代碼如下：

// 開啟混合
gl.enable(gl.BLEND);
// 設定混合模式為透明模式
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

示例請點擊：https://hammerc.github.io/dou3d-ts/learning/learningNotes/lesson_12/LookAtBlendedTriangles.html

繪制透明立方體

需要注意的是，透明的圖像繪制時，不能開啟深度測試，開啟深度測試，無論是否透明，靠后的顏色都會丟失；

如果已經開啟了深度測試（用於繪制不透明的圖像），還可以調用depthMask來臨時開啟和關閉深度測試，調用 gl.depthMask(false); 可以關閉深度測試；

另外，繪制透明立方體時，如果需要顯示背面，就關閉剔除模式，需要不要顯示背面就開啟剔除模式並設定為剔除背面；

示例請點擊：https://hammerc.github.io/dou3d-ts/learning/learningNotes/lesson_12/BlendedCube.html