使用WebGL绘制流动虚线

上文中介绍了如何在片元着色器中绘制虚线，通过计算屏幕像素到折线的距离和屏幕像素投影到折线的长度可以绘制折线。

接下来尝试使用WebGL2在canvas中绘制流动的折线。

需解决的问题

顶点数据传输

shader中使用的折线顶点数据需要从外部传入，最开始考虑使用uniform vec2[]数组方式传入，但是GPU中数组上限太低，很容易就不够用了，而且数组个数声明必须使用常量，无法从外部传入数组个数，动态的构造数组。

因此，我采用纹理方式传入顶点数据，采用纹理方式存储顶点数据明显优于数组方式。而且WebGL2支持了更多类型的纹理格式，数据存储更方便。

目前先考虑2D的情况，即一个顶点包含x,y两个属性，一条折线包含多个顶点，一次可以绘制多条折线。即WebGL中对应的纹理可以采用RGB32F格式，纹理存储数据如下：

纹理	顶点
R	x
G	y
B	线段分割符，0，1

纹理中B通道存储折线的分割符，即最后一个折线的顶点的B通道存储为0，用于同下个折线断开。否则，所有顶点将连成一条折线。

画布

由于完全采用shader进行绘制，顶点仅需要构造两个三角形即可，覆盖当前的canvas即可

具体流程

准备画布

初始化WebGL此处不再赘述。vertexshader中传入的顶点数据，仅为canvas四个顶点即可，顶点及顶点索引如下：

const canvs_pts=new Float32Array([-1,-1,-1,1,1,1,1,-1
]);
const canvas_pts_idx=new Uint16Array([0,2,1,0,3,2
]);

通过in方式传入顶点，gl.drawElements绘制两个三角形即可。

构造纹理数据

定义如下的折线数据格式：

let testline_data=[[[30,100],[600,200],[700,300],[50,50]],[[40,410],[500,500],[600,700]]
];

折线包含顶点数组，一个顶点为一个两个要素的数组。可以同时绘制多条折线。

纹理数据可以理解为2D格式的数组，因此需要将顶点数据格式化为mxn格式的形式。数据存储以此为R\G\B。这里格式化顶点格式通过顶点数量开根号的方式得到列数，再计算总行数，多余的像素用0补齐。最终需要返回ArrayBufferView,和纹理对应的宽高。

function PatchLineData(lines){let points=[];for(let i=0;i<lines.length;i++){let lastpoint_idx=lines[i].length-1;for(let j=0;j<lastpoint_idx;j++){points.push(lines[i][j][0]);points.push(lines[i][j][1]);points.push(1);}points.push(lines[i][lastpoint_idx][0]);points.push(lines[i][lastpoint_idx][1]);points.push(0);//折线最后一个顶点的B存储为0，用于同其他折线断开}//数据补齐为nxn形式，多余的数据用0补充let pixel_count=points.length / 3;let pixel_col=Math.ceil(Math.sqrt(pixel_count));let pixel_row=Math.ceil(pixel_count/pixel_col);let additional_datacount=pixel_col*pixel_row-pixel_count;for(let i=0;i<additional_datacount;i++){points.push(0);points.push(0);points.push(0);}let line_data=new Float32Array(points);return {"linedata":line_data,"texturewidth":pixel_col,"textureheight":pixel_row};
}

使用纹理数据

纹理数据传入此处不再赘述。

vertexshader中仅接受顶点数据即可，无需其他数据，如下：

#version 300 es
in vec2 a_position;
void main(){gl_Position=vec4(a_position,0.0,1.0);
}

fragmentshader中需要做对应的修改，shadertoy中顶点数据为预先写好的，这里需要修改为通过纹理获取顶点数据，再计算对应的折线范围和投影距离。sdLine_t不做修改，仍旧计算距离场和投影距离。

新增方法getPixelCoord用来计算对应的纹理坐标位置，获取像素值通过texelFetch来获取，可以避免计算归一化的纹理坐标，直接使用行列来获取像素。

重点修改cDistance_t方法，通过for循环获取出入的顶点数据，并计算对应的显示范围。

#version 300 es
precision highp float;const float ELIPSE=0.5;uniform float LINEWIDTH;
uniform float dash_size;
uniform float iTime;
uniform sampler2D line_data;ivec2 texture_size;float sdLine_t(in vec2 p,in vec2 a, in vec2 b){vec2 pa=p-a,ba=b-a;float t=dot(pa,ba)/dot(ba,ba);float t_lxs=t*length(ba);float c=length(pa-ba*clamp(t,0.0,1.0));c=1.-smoothstep(LINEWIDTH,LINEWIDTH+ELIPSE,c);return c*mod(t_lxs-iTime*2.,dash_size)/dash_size;
}ivec2 getPixelCoord(int i){return ivec2(i/texture_size.x,int(mod(float(i),float(texture_size.x)))).yx;
}//计算纹理中每个顶点最终颜色
float cDistance_t( in vec2 v )
{//像素总数，WebGL2中可以通过textureSize方法直接获取纹理尺寸int pixelcount=texture_size.x*texture_size.y-1;float max_ini=0.0;//图片左下角为坐标原点for(int i=0;i<pixelcount;i+=1){//获取两个顶点计算显示范围ivec2 pixel_cur=getPixelCoord(i);ivec2 pixel_next=getPixelCoord(i+1);vec4 texel_cur=texelFetch(line_data,pixel_cur,0);vec4 texel_next=texelFetch(line_data,pixel_next,0);float t=sdLine_t(v,texel_cur.xy,texel_next.xy);//计算结果乘线段分隔符，用来打断当前折线和下一条折线t*=texel_cur.z;max_ini=max(max_ini,t);}return max_ini;
}out vec4 fragColor;void main(){texture_size=textureSize(line_data,0);float c_lxs=cDistance_t(gl_FragCoord.xy);fragColor=vec4(vec3(c_lxs),1.0);
}

TODO

反走样
组件化，预期以leaflet插件方式

PS：欢迎提问题。。。