溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
前言
終于把手頭的事結束了，可以有時間來研究研究技術~作為一名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
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
