webgl——實現物體描邊效果

        終於把手頭的事結束了，可以有時間來研究研究技術~作爲一名3D開發人員，僅僅使用現有的引擎來開發項目不免有些浮於表面，多研究研究底層的實現更利於對3D開發整體的把控~於是我決定最近開始研究webgl一些特效的實現，希望能在秋招前對底層有更深入的理解。

        在webgl中實現描邊的效果有很多種方式，比如我寫卡通風格着色器那篇文章講到的（將視線投影到每個點的法線上，這個值越小越說明這個點靠近邊緣），所以接下來介紹實現的另一種方式：法線延展法。

        這種方法不用進行法線與視線之間的計算，而是將物體每個點的x、y、z座標沿着該點的法線擴大一定的距離並且添加描邊的顏色，然後在繪製原來的物體覆蓋到上面，這樣便實現了描邊的效果。

        這裏將原物體覆蓋到描邊物體上面就有兩種實現的方式：

        1.先關閉深度檢測，然後繪製描邊物體，開啓深度檢測，繪製原物體。這樣由於繪製描邊物體時深度檢測被關閉了，原物體就會覆蓋在描邊物體上繪製從而實現描邊效果。缺點：當兩個物體重合時會出現重合位置沒有描邊的情況，這是由於第二次繪製的東西覆蓋到了第一次描邊的物體上，所以先畫的邊自然就會被遮擋啦~

        2.不關閉深度檢測，開啓背面剪裁，繪製描邊物體時將卷繞方向置爲順時針方向（默認是逆時針），在進行繪製，繪製完成之後將卷繞方向設置回順時針方向。這樣背面剪裁的開啓使得描邊物體只能繪製出它的背面，這樣便實現了描邊效果，而且由於沒有關閉深度測試，該物體的描邊效果會根據其位置決定是否遮擋。

        //繪製一幀畫面的方法
       function drawFrame()
       {          
           //若還沒有加載完則不繪製
           if(!ooTri || !mbTri) {return;}
           
           //清除着色緩衝與深度緩衝
           gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);  
           
           //保護現場
           ms.pushMatrix();         
           //繞Y軸旋轉
           ms.rotate(currentAngle,0,1,0);
//方法1
//            gl.disable(gl.DEPTH_TEST);                     //啓用深度緩衝寫入
//            mbTri.drawSelf(ms);//繪製描邊物體
//            gl.enable(gl.DEPTH_TEST);                      //關閉深度緩衝寫入
//            ooTri.drawSelf(ms);//繪製原物體
//方法2
            gl.enable(gl.CULL_FACE);                        //開啓剪裁
            gl.cullFace(gl.BACK);                          //剪裁背面
            gl.frontFace(gl.CW);                           //繪製順序爲順時針
            mbTri.drawSelf(ms);//繪製描邊物體
            gl.frontFace(gl.CCW);                          //繪製順序爲逆時針
            ooTri.drawSelf(ms);//繪製原物體


            //恢復現場
            ms.popMatrix();
          
            //修改旋轉角度
           currentAngle += incAngle;
           if (currentAngle > 360)
           {
              currentAngle -= 360;   
           }         
       }   

        其着色器代碼如下：

uniform mat4 uMVPMatrix;                            //總變換矩陣
attribute  vec3 aPosition;                                   //頂點位置
attribute vec3 aNormal;                                   //頂點法向量
void main(){
    vec3 position=aPosition;                     //獲取此頂點位置
    position.xyz+=aNormal*0.4;                //將頂點位置沿法線方向擠出
    gl_Position = uMVPMatrix * vec4(position.xyz,1);//根據總變換矩陣計算此次繪製此頂點位置
}
<#BREAK_BN#>
precision mediump float;                              //設置浮點默認精度

void main(){
    gl_FragColor = vec4(0.0,1.0,0.0,0.0);                    //給此片元顏色值
}

        其實這兩種描邊方法還是有着一些區別（第二種對於複雜物體會產生類似包裹的效果）具體效果還得根據具體的場景來決定。

        PS:這裏還要注意一點，WebGL是個狀態機。我們可以這麼理解，假設WebGL中的屬性P的值爲1，你在某一次操作中，把P的值設置成了2，那麼在你下一次設置P的值之前，P的值永遠是2。這一點很重要！

Github地址：https://github.com/StringKun/WebGL-object-of-stroke