WebGL Draw line Bug (iii)

The last one has been described when simulating lines through a polygon, the vertex data for each vertex includes: endpoint coordinates, offsets, previous endpoint coordinates, and the last endpoint coordinates, of course, if we are drawing by index, we also include indexed arrays, The following code creates the above related data by passing a group of end points for a set of lines:
?```
Bk. Line3d = function (points,colors) {
??? this.points = Points;
??? this.colors = colors;
}

Bk.Line3D.prototype.computeData = function () {
? ? ? var len = this.points.length;
? ? ? var count = Len 3 2;??
? ? ? var position = new Float32array (count);
? ? ? var Positionprev =? New Float32array (count);
? ? ? var positionnext = new Float32array (count);
? ? ? var color = new Float32array (count);

??? var offset = new Float32array (len 2);
??? var Indicescount = 3 2 (len-1);
??? var ind ICES = new Uint16array (indicescount);
??? var triangleoffset = 0,vertexoffset = 0;
??? for (var i = 0; i < len; i + +) {
?????? var i3 = i 3 * 2;
?????? var point = this.points[ I];
?????? Position[i3 + 0] = Point.x;
?????? Position[i3 + 1] = Point.y;
?????? Position[i3 + 2] = point.z;
?????? Position[i3 + 3] = Point.x;
?????? Position[i3 + 4] = Point.y;
?????? Position[i3 + 5] = point.z;

? ? ? ? ? ? var r = (i + 1)/Len;
? ? ? ? ? ? var g = Math.random ();
? ? ? ? ? ? var B = Math.random ();
? ? ? ? ? ? g = r;
? ? ? ? ? ? b = 0;
? ? ? ? ? ? R = 1-r;
? ? ? ? ? ? Color[i3 + 0] = R;
? ? ? ? ? ? Color[i3 + 1] = g;
? ? ? ? ? ? Color[i3 + 2] = b;
? ? ? ? ? ? Color[i3 + 3] = R;
? ? ? ? ? ? Color[i3 + 4] = g;
? ? ? ? ? ? Color[i3 + 5] = b;

??????? if (I < count-1) {
? ? ? ? ? ? ? ? ? ? var i3p = i3 + 6;
? ? ? ? ? ? ? ? ? ? positionnext[i3p + 0] = Point.x;
? ? ? ? ? ? ? ? ? ? positionnext[i3p + 1] = Point.y;
? ? ? ? ? ? ? ? ? ? POSITIONNEXT[I3P + 2] = point.z;

? ? ? ? ? ? ? ? ? ? POSITIONNEXT[I3P + 3] = Point.x;
? ? ? ? ? ? ? ? ? ? POSITIONNEXT[I3P + 4] = Point.y;
? ? ? ? ? ? ? ? ? ? POSITIONNEXT[I3P + 5] = point.z;
? ? ? ? ? ? ? ? }
??????? if (i > 0) {
? ? ? ? ? ? ? ? ? ? var i3n = i3-6;
? ? ? ? ? ? ? ? ? ? positionprev[i3n + 0] = Point.x;
? ? ? ? ? ? ? ? ? ? Positionprev[i3n + 1] = Point.y;
? ? ? ? ? ? ? ? ? ? Positionprev[i3n + 2] = point.z;

? ? ? ? ? ? ? ? ? ? Positionprev[i3n + 3] = Point.x;
? ? ? ? ? ? ? ? ? ? Positionprev[i3n + 4] = Point.y;
? ? ? ? ? ? ? ? ? ? Positionprev[i3n + 5] = point.z;
? ? ? ? ? ? ?}

??????? 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 + +) {
? ? ? ? ? Positionnext[i] = positionnext[i + 6];
? ? ? ? ? Positionprev[end-i] = positionprev[end-i-6];
? ? ? }
? ? ? for (i = 0;i < Indicescount; i + +) {
? ? ? ? ? if (i% 2 = = 0) {
??????? Indices[triangleoffset + +) = i;
??????? Indices[triangleoffset + +) = i + 1;
??????? Indices[triangleoffset + +) = i + 2;
? ? ? ? ? }else{
??????? Indices[triangleoffset + +) = i + 1;
??????? Indices[triangleoffset + +) = i;
??????? Indices[triangleoffset + +) = i + 2;
? ? ? ? ? }
? ? ? }

? ? ? 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) {
?? ??? float n = (p1.w-unear)/(P1.W-P2.W);
?? ??? ? Return Vec4 (Mix (p1.xy,p2.xy,n),-unear,unear);
?? ?}

?? ? void Main () {
?? ??? ?
?? ??? ? vec4 prevproj = UworldviewprojectionVEC4 (Apositionpre, 1.0);
?? ??? ? vec4 currproj = UworldviewprojectionVEC4 (aposition, 1.0);
??????? vec4 nextproj = Uworldviewprojectionvec4 (Apositionnext, 1.0);
??????? if (CURRPROJ.W < 0.0) {
?? ??? ? ? if (PREVPROJ.W < 0.0) {
?? ??? ??? ? currproj = Clipnear (currproj, nextproj);
?? ??? ? ? }else {
?? ??? ??? ? currproj = Clipnear (currproj, prevproj);
?? ??? ? ? }
?? ??? ?}
?? ??? VEC2 Prevscreen = (Prevproj.xy/abs (PREVPROJ.W) + 1.0)0.5UVIEWPORT.ZW;
?? ??? VEC2 Currscreen = (Currproj.xy/abs (CURRPROJ.W) + 1.0)0.5UVIEWPORT.ZW;
?? ??? VEC2 Nextscreen = (Nextproj.xy/abs (NEXTPROJ.W) + 1.0)0.5UVIEWPORT.ZW;
?? ??? ? vec2 dir;
?? ??? ? float len = Aoffset;
?? ??? ? if (aposition = = Apositionpre) {
?? ??? ??? ? dir = normalize (Nextscreen-currscreen);
?? ??? ?} else if (aposition = = Apositionnext) {
?? ??? ??? ? dir = normalize (Currscreen-prevscreen);
?? ??? ?} 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.0ABS (CURRPROJ.W);
?? ??? ? vec4 pos = UprojectmatrixUviewmatrix * VEC4 (aposition,1.0);
?? ??? ? vcolor = Acolor;
?? ??? ? gl_position = Currproj;
?? ?}
`;

计算的原理，也可以参考第二篇的论述，此处需要注意的是，为了能够计算顶点在屏幕上的最终位置，需要把canvans的尺寸大小传递给着色器（uniform 变量 uViewport），同样为了计算裁剪，需要把镜头的near值传递给着色器（uniform 变量 uNear），而变量uWorldViewProjection表示模型视图透视变换的矩阵，熟悉WebGL的同学一定清楚。请关注公众号。ITman彪叔公众号

WebGL Draw line Bug (iii)