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

2021-10-25 12:57:04 字數 972 閱讀 5249

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

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

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

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

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

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

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

總結

webgl 實現物體描邊效果

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

描邊 深度 Outline描邊

描邊 使用兩個pass繪製兩遍模型,第一遍需要讓模型的每個頂點朝著法線方向外擴,然後使用cull front指令,剔除正面,只渲染背面。第二遍再做一遍普通的渲染,使之蓋住第一遍渲染的影象,就會產生描邊效果。材質面板 color 第二遍普通渲染模型混合顏色。main texture 第二遍普通渲染模型...

unity實現描邊效果

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