之前鋪墊了許多，今天可以來分享點純乾貨了。
bk.line3d = function (points,colors)
bk.line3d.prototype.computedata = function()
if (i > 0)
var idx = 3 * i;
var i2 = i * 2;
offset[i2 + 0] = 5;
offset[i2 + 1] = -5;
}var end = count - 1;
for(i = 0;i < 6 ;i ++)
for(i = 0;i < indicescount ;i ++)else
}this.position = position;
this.positionnext = positionnext;
this.positionprev = positionprev;
this.color = color;
this.offset = offset;
this.indices = indices;
};
**首先定義了乙個類，該類建構函式可以傳入端點陣列；在該類上定義了乙個方法 computedata，用來計算頂點陣列，每個頂點包括上文所述的4個資訊，另外增加了乙個顏色資訊。
讀者，可以結合第二篇的思路和上面的**來來理解，此處不再詳述 **的細節。
另外乙個比較重要的**是頂點著色器中，通過傳入的這些頂點資訊來計算最終的頂點座標，**如下：
var linevs = `attribute
vec3 aposition;
attribute
vec3 apositionpre;
attribute
vec3 apositionnext;
attribute
float aoffset;
attribute
vec3 acolor;
varying
vec3 vcolor;
uniform
mat4 uworldviewprojection;
uniform
vec4 uviewport;
uniform
float unear;
uniform
mat4 uviewmatrix;
uniform
mat4 uprojectmatrix;
vec4 clipnear(vec4 p1,vec4 p2)
void main()else
}vec2 prevscreen = (prevproj.xy / abs(prevproj.w) + 1.0) * 0.5 * uviewport.zw;
vec2 currscreen = (currproj.xy / abs(currproj.w) + 1.0) * 0.5 * uviewport.zw;
vec2 nextscreen = (nextproj.xy / abs(nextproj.w) + 1.0) * 0.5 * uviewport.zw;
vec2 dir;
float len = aoffset;
if(aposition == apositionpre)else
if(aposition == apositionnext)else
dir = vec2(-dir.y,dir.x) * len;
currscreen += dir;
currproj.xy = (currscreen / uviewport.zw - 0.5) * 2.0 * abs(currproj.w);
vec4 pos = uprojectmatrix * uviewmatrix * vec4(aposition,1.0);
vcolor = acolor;
gl_position = currproj;
}`;
計算的原理，也可以參考第二篇的論述，此處需要注意的是，為了能夠計算頂點在螢幕上的最終位置，需要把canvans的尺寸大小傳遞給著色器（uniform 變數 uviewport），同樣為了計算裁剪，需要把鏡頭的near值傳遞給著色器（uniform 變數 unear），而變數uworldviewprojection表示模型檢視透視變換的矩陣，熟悉webgl的同學一定清楚。
如果你對webgl 感興趣，可以了解下我們用webgl開發的3d機房專案：
html5，不只是看上去很美（第二彈：打造最美3d機房）
關於這個話題就先分享到這裡了，如果大家對其它方面與興趣的，我們也可以一起來**。
WebGL 繪製Line的bug 三
bk.line3d function points,colors elseelse else if aposition apositionnext else vec2 dira normalize currscreen prevscreen vec2 dirb normalize nextscree...
WebGL 繪製Line的bug 二
以兩個端點組成的線段為例，繪製line的時候只用指定兩個端點，如果通過三角形來模擬一條線段，則至少需要兩個三角形，如下圖 這是兩個三角形模擬的線段。因此要繪製一條線段，則需要六個頂點，兩個三角形 當時從上圖中，可以看出有些頂點是共享，實際上只需要四個頂點，然後通過索引的方式繪製兩個三角形，相信熟悉w...
WebGL 繪製和變換
1.使用緩衝區物件向頂點著色器傳入多個頂點的資料，需要遵循以下五個步驟 1.1 建立緩衝區物件 gl.createbuffer 1.2 繫結緩衝區物件 gl.bindbuffer 1.3 將資料寫入緩衝區物件 gl.bufferdata 1.4 將緩衝區物件分配給乙個attribute變數 gl.v...