WebGL 示例 混合透明效果

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

示例：透明混合

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

gl.blendfunc(src_factor, dst_factor)

混合後的顏色計算如下：

《混合後的顏色》 = 《源顏色》 * src_factor + 《目標顏色》 * dst_factor

引數：

有一種常用的混合方式加法混合，加法混合會使被混合的區域更加明亮，通常被用來實現**的關照效果，或者遊戲中需要引起玩家注意的任務物品

// 開啟混合

gl.enable
(gl.
blend);
// 設定混合函式
gl.blendfunc
(gl.
src_alpha
,gl.
one_minus_src_alpha
);

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

開啟隱藏面消除功能 –gl.enable(gl.depth_test)繪製所有不透明的物體(α為0)

鎖定用於進行隱藏面消除的深度緩衝區的獨寫操作，使之唯讀gl.depthmask(false)繪製所有半透明的物體（α小於0）,注意它們應當按照深度排序，然後從後向前繪製

釋放深度緩衝區，使之可讀可寫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的顏色覆蓋掉，這樣當繪製完成時，顏色緩衝區中的所有畫素都是最前面的片元；以上這些操作都是在片元層面上進行的；

WebGL 示例 新增霧化效果

在三維圖形學中，霧化用來描述遠處的物體看上去較為模糊的現象。示例一 霧化效果 比終點更遠的點完全霧化了，即完全看不到東西，某一點的霧化的程度可以定義為霧化因子 霧化因子 終點 當前點與視點間的距離 終點 起點 這裡 起點 當前點與視點間的距離 終點 如果霧化因子為1.0，表示該點完全沒有霧化，可以很...

webgl 混合與模板測試

今天研究了乙個混合與模板測試相結合的案例，這裡做以總結。案例中乙個籃球在地板上不斷彈起並且落下，這裡主要涉及到了兩項技術 混合與模板測試。首先籃球在地板上反射出來的映象籃球就是通過混合技術實現的，為了讓映象體在運動脫離地板時消失，實現真實的效果，還需要加入模板測試。首先介紹他們的繪製順序 1.開啟模...

webgl 平面陰影效果

在特定的3d場景中，陰影效果有時還是顯得十分重要的，在一般的3d引擎當中設定陰影可以直接通過對物體設定屬性來實現，十分的方便，這裡我們就用webgl來實現一下平面效果。平面陰影是通過燈光將物體的陰影投射在乙個平面內，但是物體之間沒有陰影的疊加，也就是說a物體的陰影不會投射到b物體上，在本案例中我們主...