GLSL 效果示例
蚂蚁线选框：让虚线连续绕过四个角
虚线沿矩形周长前进，转角处相位连续。
在线示例
修改右侧代码，左侧预览会实时更新。
观察什么
虚线沿矩形周长前进，转角处相位连续。
实现原理
沿四条边累计弧长，虚线相位使用同一个周长坐标，所以拐角不会重新开始一段图案。
找到控制效果的代码
vec2 q=abs(p);vec2 halfSize=vec2(.65,.4);float d=box(p,halfSize);float t=q.y>halfSize.y-aa?(p.y>0.?p.x+halfSize.x:3.*halfSize.x+2.*halfSize.y-p.x):(p.x>0.?2.*halfSize.x+halfSize.y-p.y:4.*halfSize.x+3.*halfSize.y+p.y);float dash=step(.5,fract(t*(8.+u_parameter*15.)-u_time));c=mix(c,mix(vec3(.1),vec3(1.),dash),1.-smoothstep(.012,.012+aa,abs(d)));
动手修改
把 dash 中的相位项 -u_time 改为 -u_time*2.。黑白虚线会以两倍速度绕矩形运动，矩形尺寸与虚线数量保持不变。
调试与成本
分段计算的周长坐标 t 先连接四条边，再由 fract 生成图案。把 halfSize=vec2(.65,.4) 改成 vec2(.4,.4)，可在正方形上检查转角是否连续，虚线运动不需要历史纹理。