WebGL 繪製Line的bug 三

bk.line3d = function (points,colors)elseelse else if(aposition == apositionnext)else {

vec2 dira = normalize(currscreen - prevscreen);

vec2 dirb = normalize(nextscreen - currscreen);

vec2 tanget = normalize(dira + dirb);

float miter = 1.0 / max(dot(tanget,dira),0.5);

len *= miter;

dir = tanget;

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 繪製Line的bug 三

之前鋪墊了許多，今天可以來分享點純乾貨了。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...

WebGL 繪製Line的bug 二

以兩個端點組成的線段為例，繪製line的時候只用指定兩個端點，如果通過三角形來模擬一條線段，則至少需要兩個三角形，如下圖 這是兩個三角形模擬的線段。因此要繪製一條線段，則需要六個頂點，兩個三角形 當時從上圖中，可以看出有些頂點是共享，實際上只需要四個頂點，然後通過索引的方式繪製兩個三角形，相信熟悉w...

WebGL 繪製和變換

1.使用緩衝區物件向頂點著色器傳入多個頂點的資料，需要遵循以下五個步驟 1.1 建立緩衝區物件 gl.createbuffer 1.2 繫結緩衝區物件 gl.bindbuffer 1.3 將資料寫入緩衝區物件 gl.bufferdata 1.4 將緩衝區物件分配給乙個attribute變數 gl.v...