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/examples/learningNotes/lesson_12/LookAtBlendedTriangles.html

繪製透明立方體

須要注意的是，透明的圖像繪製時，不能開啓深度測試，開啓深度測試，不管是否透明，靠後的顏色都會丟失；

若是已經開啓了深度測試（用於繪製不透明的圖像），還能夠調用depthMask來臨時開啓和關閉深度測試，調用 gl.depthMask(false); 能夠關閉深度測試；

另外，繪製透明立方體時，若是須要顯示背面，就關閉剔除模式，須要不要顯示背面就開啓剔除模式並設定爲剔除背面；

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