在三維圖形學中，霧化用來描述遠處的物體看上去較為模糊的現象。
示例一：霧化效果
比終點更遠的點完全霧化了，即完全看不到東西，某一點的霧化的程度可以定義為霧化因子
《霧化因子》 = (《終點》 - 《當前點與視點間的距離》) / (《終點》 - 《起點》)這裡
《起點》 <= 《當前點與視點間的距離》 <= 《終點》
如果霧化因子為1.0，表示該點完全沒有霧化，可以很清晰的看到此處的物體，如果為0.0，就表示該點完全霧化了，此處的物體完全看不見
在片元著色器中根據霧化因子，計算片元的顏色
《片元顏色》 = 《物體表面的顏色》 * 《霧化因子》 + 《霧的顏色》 * (1 - 《霧化因子》)
頂點著色器
attribute vec4 a_position;
attribute vec4 a_color;
uniform mat4 u_mvpmatrix;
uniform mat4 u_modelmatrix;
uniform vec4 u_eye;
varying vec4 v_color;
varying float v_dist;
void
main()
precision mediump float
;uniform vec3 u_fogcolor;
uniform vec2 u_fogdist;
varying vec4 v_color;
varying float v_dist;
void
main()
w分量，也就是gl_position的w分量，實際上，這個w分量的值就是頂點的檢視座標的z分量乘以-1，在檢視座標系中，視點在原點，視線沿著z軸負方向，觀察者看到的物體其檢視座標系值z分量都是負的，而gl_position的w分量值正好是z分量值乘以-1，所以可以直接使用該值來近似頂點與視點的距離
頂點著色器修改如下
attribute vec4 a_position;
attribute vec4 a_color;
uniform mat4 u_mvpmatrix;
varying float v_dist;
void
main()
示例二：使用w分量
具體**可在 gitee上獲取
WebGL 示例 混合透明效果
顏色的中的 分量控制著顏色的透明度，在webgl實現透明效果需要用到 混合，因為webgl已經內建了該功能因此開啟即可 示例 透明混合 在進行 混合時，實際上webgl用到了兩個顏色，即源顏色和目標顏色，前者是待混合進去的顏色後者是待被混合進去的顏色 gl.blendfunc src factor,...
webgl 平面陰影效果
在特定的3d場景中，陰影效果有時還是顯得十分重要的，在一般的3d引擎當中設定陰影可以直接通過對物體設定屬性來實現，十分的方便，這裡我們就用webgl來實現一下平面效果。平面陰影是通過燈光將物體的陰影投射在乙個平面內，但是物體之間沒有陰影的疊加，也就是說a物體的陰影不會投射到b物體上，在本案例中我們主...
WebGL 示例 繪製圓形點
之前繪製的點都是正方形的，類似乙個畫素點，那怎麼才能把方點繪製成圓點，頂點著色器和片元著色器之間發生了光柵化過程，乙個頂點被光柵化為了多個片元，每乙個片元都會經過片元著色器處理，直接繪製就是方形的點，要繪製圓形的點就需要把多餘的片元給削去 將矩形削成圓形需要知道每個片元在光柵化過程中的座標，在片元著...