Webgl 如何实现具有轨迹效果的移动线

在下面的演示中画这样的线有什么想法？绘制带有尾随效果的单线可能很简单。但这些路线也在改变方向

---

您可以传入线的UV坐标，或生成一个坐标，然后使用该坐标为线着色。通过时间滚动类似的内容

const gl=document.querySelector（“canvas”）.getContext（“webgl”）；
常数vs=`
属性向量4位置；
属性浮点u；
可变浮动v_；
void main（）{
gl_位置=位置；
v_=u；
}
`;
常数fs=`
精密中泵浮子；
可变浮动v_；
均匀浮动时间；
void main（）{
绿色浮动=分形（v_+时间）；
gl_FragColor=vec4（0，绿色，0，1）；
}
`;
//编译着色器、链接程序、查找窗体
const programInfo=twgl.createProgramInfo（gl[vs，fs]）；
//制作一些行（调用gl.createBuffer、gl.bindBuffer、gl.bufferData
//（对于每个阵列）
const bufferInfo=twgl.createBufferInfoFromArrays（gl{
职位：{
NUM组件：2，
数据：[
-.5, -.5, 
.7, -.3,
.7, -.3,
-.1,  .8,
-.1,  .8,
-.8,  .2,
],
},
u:{
NUM组件：1，
数据：[
0，1，//这些数字定义了多少次
0，2，//模式对每个线段重复
0, 3,  
],
},
});
函数渲染（时间）{
时间*=0.001；//秒
总图视口（0，0，总图画布宽度，总图画布高度）；
gl.clearColor（0,0,0,1）；
总账清除（总账颜色缓冲位）；
总账使用程序（programInfo.program）；
//调用gl.bindBuffer、gl.enableVertexAttributeArray、gl.VertexAttributePointer
twgl.setBuffersAndAttributes（总帐、程序信息、缓冲信息）；
//调用gl.uniformXXX
twgl.setUniforms（programInfo，{time:-time}）；
//调用gl.DrawArray或gl.drawElements
twgl.drawBufferInfo（总帐，bufferInfo，总帐行）；
请求动画帧（渲染）；
}
请求动画帧（渲染）
body{背景：#444；}
我明白了。输入数据包含多条线段。颜色会随着时间的推移而褪色。