最近一个BABYLONJS项目上要做光线流动的效果，因为以前不怎么接触WebGL特效相关的内容，所以在网上找了一些相关的内容。
已有案例
1. ThreeJS实现案例
具体的实现方式是不断修改顶点的颜色。优点就是简单，具有可编辑性。缺点就是线条需要自己手工布置，不能使用现有模型。数量一多，可能对性能有影响
2. BABYLONJS社区的案例
这个没具体的给出案例，但是原理是一样的，通过改变uv值实现纹理流动。优点也是简单，性能也会好一点，可以直接作用在模型上。缺点就是编辑性较差，改变颜色或者渐变幅度，间距什么的都需要调整材质。
段落引用综合网上已经实现的案例来看，都不是很符合个人的预期。于是动用起我的半吊子shader能力做出了一个基于BABYLONJS.ShaderMaterial的光线流动效果。
成果
如何实现
原理还是很简单的，就是修改UV，只不过这里的光线效果是用glsl写出来的，所以颜色、宽度、渐变效果都可控。其中的难点在于渐变光线的制作和原始纹理处理。
这里可以先创建一个原始纹理
vec4 texture = texture(u_texture, uv);
让后确定光线的范围，使用a，b参数控制方向，c控制间距，w控制宽度
float a = 1.;
float b = 0.;
float c = 0.;
float ap = abs(a*uv.x + b*uv.y + c);
float rangeCol = 1. - smoothstep(w-.055,w+.055, ap);
最后拼接在一起就好了
gl_FragColor = texture*(1.-rangeCol) + rangeCol;
但这只是创建了光线，还没有流动起来，这个时候只要给定一个时间参数不断用uv减去你想移动的方向即可。
当然具体的实现需要根据需求来变动调整的。
这样做出来的流动效果，最后还可以加上bloom，让泛光跟随光线，效果就非常好了