webgl實(shí)現(xiàn)物體描邊效果的方法介紹

前言

創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比應(yīng)縣網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式應(yīng)縣網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋應(yīng)縣地區(qū)。費(fèi)用合理售后完善，十載實(shí)體公司更值得信賴。

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

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

這種方法不用進(jìn)行法線與視線之間的計(jì)算，而是將物體每個(gè)點(diǎn)的x、y、z坐標(biāo)沿著該點(diǎn)的法線擴(kuò)大一定的距離并且添加描邊的顏色，然后在繪制原來的物體覆蓋到上面，這樣便實(shí)現(xiàn)了描邊的效果。

這里將原物體覆蓋到描邊物體上面就有兩種實(shí)現(xiàn)的方式：

1.先關(guān)閉深度檢測，然后繪制描邊物體，開啟深度檢測，繪制原物體。這樣由于繪制描邊物體時(shí)深度檢測被關(guān)閉了，原物體就會(huì)覆蓋在描邊物體上繪制從而實(shí)現(xiàn)描邊效果。缺點(diǎn)：當(dāng)兩個(gè)物體重合時(shí)會(huì)出現(xiàn)重合位置沒有描邊的情況，這是由于第二次繪制的東西覆蓋到了第一次描邊的物體上，所以先畫的邊自然就會(huì)被遮擋啦~

2.不關(guān)閉深度檢測，開啟背面剪裁，繪制描邊物體時(shí)將卷繞方向置為順時(shí)針方向（默認(rèn)是逆時(shí)針），在進(jìn)行繪制，繪制完成之后將卷繞方向設(shè)置回順時(shí)針方向。這樣背面剪裁的開啟使得描邊物體只能繪制出它的背面，這樣便實(shí)現(xiàn)了描邊效果，而且由于沒有關(guān)閉深度測試，該物體的描邊效果會(huì)根據(jù)其位置決定是否遮擋。

  //繪制一幀畫面的方法
  function drawFrame()
  {   
   //若還沒有加載完則不繪制
   if(!ooTri || !mbTri) {return;}
   
   //清除著色緩沖與深度緩沖
   gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 
   
   //保護(hù)現(xiàn)場
   ms.pushMatrix();   
   //繞Y軸旋轉(zhuǎn)
   ms.rotate(currentAngle,0,1,0);
//方法1
//   gl.disable(gl.DEPTH_TEST);      //啟用深度緩沖寫入
//   mbTri.drawSelf(ms);//繪制描邊物體
//   gl.enable(gl.DEPTH_TEST);      //關(guān)閉深度緩沖寫入
//   ooTri.drawSelf(ms);//繪制原物體
//方法2
   gl.enable(gl.CULL_FACE);      //開啟剪裁
   gl.cullFace(gl.BACK);       //剪裁背面
   gl.frontFace(gl.CW);       //繪制順序?yàn)轫槙r(shí)針
   mbTri.drawSelf(ms);//繪制描邊物體
   gl.frontFace(gl.CCW);       //繪制順序?yàn)槟鏁r(shí)針
   ooTri.drawSelf(ms);//繪制原物體


   //恢復(fù)現(xiàn)場
   ms.popMatrix();
   
   //修改旋轉(zhuǎn)角度
   currentAngle += incAngle;
   if (currentAngle > 360)
   {
    currentAngle -= 360; 
   }   
  } 
  其著色器代碼如下：
uniform mat4 uMVPMatrix;       //總變換矩陣
attribute vec3 aPosition;         //頂點(diǎn)位置
attribute vec3 aNormal;         //頂點(diǎn)法向量
void main(){
 vec3 position=aPosition;      //獲取此頂點(diǎn)位置
 position.xyz+=aNormal*0.4;    //將頂點(diǎn)位置沿法線方向擠出
 gl_Position = uMVPMatrix * vec4(position.xyz,1);//根據(jù)總變換矩陣計(jì)算此次繪制此頂點(diǎn)位置
}
<#BREAK_BN#>
precision mediump float;        //設(shè)置浮點(diǎn)默認(rèn)精度

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

其實(shí)這兩種描邊方法還是有著一些區(qū)別（第二種對(duì)于復(fù)雜物體會(huì)產(chǎn)生類似包裹的效果）具體效果還得根據(jù)具體的場景來決定。

PS:這里還要注意一點(diǎn)，WebGL是個(gè)狀態(tài)機(jī)。我們可以這么理解，假設(shè)WebGL中的屬性P的值為1，你在某一次操作中，把P的值設(shè)置成了2，那么在你下一次設(shè)置P的值之前，P的值永遠(yuǎn)是2。這一點(diǎn)很重要！

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

webgl實(shí)現(xiàn)物體描邊效果的方法介紹

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)創(chuàng)新互聯(lián)的支持。

網(wǎng)頁名稱：webgl實(shí)現(xiàn)物體描邊效果的方法介紹
分享URL：http://muchs.cn/article18/jcphgp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、商城網(wǎng)站、靜態(tài)網(wǎng)站、關(guān)鍵詞優(yōu)化、小程序開發(fā)、企業(yè)網(wǎng)站制作

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容