摘要：那是因?yàn)椋€條的光柵化過程和多邊形的光柵化過程并不是完全一致的。這將會導(dǎo)致一些本該被隱藏的線段，未被遮擋。原理我們知道，一般對象都是由三角形組成的。其中涉及到和的相關(guān)介紹，筆者將會在后續(xù)的文章中介紹。

如果要把一個(gè)對象的線框繪制出來，一般的方法是先繪制實(shí)體對象，然后通過gl.LINES的模式再繪制一遍模型，此時(shí)模型的線框就會被繪制出來。

此方法需要繪制兩遍對象，因此會造成性能的損失。

使用此種方式繪制線框的時(shí)候，深度值偏移是必要的。那是因?yàn)?，線條的光柵化過程和多邊形的光柵化過程并不是完全一致的。這就導(dǎo)致繪制一個(gè)多邊形的邊和繪制多邊形本身，相同位置的片元，其深度值可能并不一樣。

線段和多邊形的光柵化不完全一致，為了避免z-fighting，也需要一個(gè)深度偏移。
但是，添加一個(gè)偏移并不能完美的解決問題。 這將會導(dǎo)致一些本該被隱藏的線段，未被遮擋。

使用gl.LINES的另外一個(gè)問題是，在WebGL中，存在一個(gè)bug，就是線寬只能設(shè)置為1。請參考以下文章：

https://www.jianshu.com/p/cee... 繪制Line的bug（一）

因此本文將會介紹一種方法，可以在一個(gè)pass內(nèi)繪制對象及其線框。

我們知道，一般對象都是由三角形組成的。而要顯示的線框，正好是三角形的邊，如果在繪制的時(shí)候，給三角形的邊一個(gè)不同的顏色，便可以實(shí)現(xiàn)在對象上面繪制線框的效果。
那么現(xiàn)在的問題是，如何確定三角形的邊呢？

要確定三角形的變，可以使用重心坐標(biāo)系。有關(guān)重心坐標(biāo)的的說明，可以參考：
https://zh.wikipedia.org/wiki...
對于三角形而言，重心坐標(biāo)可以這樣定義：
三角形所在平面上的任意一點(diǎn)P（笛卡爾坐標(biāo)），可以通過三角形的三個(gè)頂點(diǎn)A、B、C（笛卡爾坐標(biāo)）來表示：
P = Ax + By + C * Z，其中（x、y、z）便是重心坐標(biāo)。由此可以看出P點(diǎn)其實(shí)是A、B、C點(diǎn)加權(quán)之和。
如下圖所示，A點(diǎn)的重心坐標(biāo)是(1,0,0),B點(diǎn)的重心坐標(biāo)是（0，1，0），C點(diǎn)的重心坐標(biāo)是（0，0，1）

由上面的講解 和圖片展示可以得知，重心坐標(biāo)（x，y，z）中任何一個(gè)值為0的點(diǎn)，都在三角形的邊上。不過在實(shí)際的圖形渲染中，邊的寬度不可能是0，而應(yīng)該是一個(gè)大于0的值，所以一般可以指定一個(gè)要繪制的線寬width，如果任何一個(gè)點(diǎn)的重心坐標(biāo)（x，y，z）中的人一個(gè)分量的值小于這個(gè)線寬width，可以認(rèn)為在邊上。

基于上面說的原理，首先需要定義頂點(diǎn)的重心坐標(biāo)，對于一個(gè)三角形來說，可以把三個(gè)頂點(diǎn)的中心坐標(biāo)分別指定為(1,0,0)、(0,1,0)、(0,1,0)即可。而對于一個(gè)四邊形，有四個(gè)頂點(diǎn) 0，1，2，3，而繪制的時(shí)候使用索引 0,1,2, 2,1,3來繪制，此時(shí)可以把重心坐標(biāo)定義如下：

  var barycentric = [
        1,0,0,  0,1,0, 0,0, 1,  1,0,0,
   ];

然后，在著頂點(diǎn)色器中定義對應(yīng)的attribute變量，由于重心坐標(biāo)最終需要傳遞到片元著色器中，所以還需要對應(yīng)的varying變量：

      attribute vec3 aBarycentric;
     ...
     varying vec3 vBarycentric;
     void main(){
         ...
         vBarycentric = aBarycentric;
     }

然后，在片元著色器中判斷，如果vBarycentric的任意一個(gè)分量的值小于指定的寬度值,則顏色為指定的線框顏色：

if(any(lessThan(vBarycentric, vec3(0.02)))){
          gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
        }
        else{
            gl_FragColor = color;
        }

通過上面代碼，最終繪制的立方體效果如下：

從上面的立方體繪制的效果圖可以看出，線框的鋸齒很嚴(yán)重，而且線的寬度不是一致的。這是因?yàn)?，之前的判斷是基于三角形表面的，通過光柵化之后，由于線條的角度等原因，最終在屏幕上面的寬度就變得不一致了。

要線寬的判斷基于屏幕，需要使用到一個(gè)方法fwidth。該方法需要WebGL 引入一個(gè)擴(kuò)展之后才能使用。該擴(kuò)展是：OES_standard_derivatives。
首先使用WebGL的getExtension方法獲取該擴(kuò)展，代碼如下：

gl.getExtension("OES_standard_derivatives");

然后在shader中啟用這個(gè)擴(kuò)展，代碼如下：

#extension GL_OES_standard_derivatives : enable

然后通過fwidth函數(shù)，把vBarycentric的值縮放到 vBarycentric在屏幕變化的范圍之內(nèi)，代碼如下：

 vec3 d = fwidth(vBarycentric);
 vec3 a3 = smoothstep(vec3(0.0), d*2.0, vBarycentric);

fwidth表示一個(gè)變量在屏幕空間的x軸變化dFdx + y軸變化dFdx之和。 其中涉及到dFdx、dFdy和fwidth的相關(guān)介紹，筆者將會在后續(xù)的文章中介紹。
在獲取了基于屏幕像素空間的的重心坐標(biāo)a3之后，變可以通過通過該變量來進(jìn)行判斷，并繪制出指定寬度的線框：

gl_FragColor.rgb = mix(vec3(0.0,0.0,0.0), vec3(1.0), min(min(a3.x, a3.y), a3.z));

通過改良之后的繪制效果如下，可以看出明細(xì)效果改進(jìn)了很多：

前面我們看到的都是三角形的線框，有的時(shí)候，我們希望獲取四邊形的線框，應(yīng)該怎么處理呢？ 其實(shí)此時(shí)，只需要調(diào)整下頂點(diǎn)的重心坐標(biāo)即可，在前文中，一個(gè)四邊形的四個(gè)頂點(diǎn)的重心坐標(biāo)如下：

  var barycentric = [
        1,0,0,  0,1,0, 0,0, 1,  1,0,0,
   ];

如果把四邊形的四個(gè)頂點(diǎn)的重心坐標(biāo)調(diào)整如下：

  var barycentric = [
       1,0,0,  1,1,0, 0,0, 1,  0,0,0,  //前
    ];

便可以達(dá)到效果，最終繪制的效果如下圖所示：

英偉達(dá)也提出過繪制線框的解決方案，參考下面鏈接：
https://developer.download.nvidia.com/SDK/10/direct3d/Source/SolidWireframe/Doc/SolidWireframe.pdf
不過該方案是基于Geometry Shader技術(shù)來實(shí)現(xiàn)的，而該技術(shù)在WebGL并未實(shí)現(xiàn)，所以該方案不能很好的移植到到WebGL。

如果獲取完整源代碼，請關(guān)注公眾號。