webgl 實現物體描邊效果

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

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

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

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

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

//繪製一幀畫面的方法

functiondrawframe()
//清除著色緩衝與深度緩衝
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)
}

uniform mat4 umvpmatrix;                            //總變換矩陣

attribute  vec3 aposition;                                   //頂點位置
attribute vec3 anormal;                                   //頂點法向量
void main()
precision mediump float;                              //設定浮點預設精度
void main()

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

描邊 深度 webgl實現物體描邊效果的方法介紹

前言終於把手頭的事結束了，可以有時間來研究研究技術 作為一名3d開發人員，僅僅使用現有的引擎來開發專案不免有些浮於表面，多研究研究底層的實現更利於對3d開發整體的把控 於是我決定最近開始研究webgl一些特效的實現，希望能在秋招前對底層有更深入的理解。這種方法不用進行法線與視線之間的計算，而是將物體...

unity實現描邊效果

這裡總結了幾種在unity實現描邊效果的方法，首先準備乙個模型匯入在unity中，使用預設shader，上傳一張原始圖，以便後面實現功能效果的對比 一 邊緣光，這裡參照官方的乙個su ceshader example，rim lighting 1.在unity建立乙個su ceshader，命名ri...

文字描邊 如何在網頁裡實現文字描邊效果

文字描邊 想要在網頁裡實現文字描邊效果，在以前只能使用photoshop等來實現，但現在只需要乙個text stroke屬性，即可輕鬆做到文字描邊，漸變文字描邊，甚至文字描邊。01 語法text stroke text stroke是乙個復合屬性，由text stroke width和text st...