基于BABYLONJS的光线流动效果

最近一个BABYLONJS项目上要做光线流动的效果,因为以前不怎么接触WebGL特效相关的内容,所以在网上找了一些相关的内容。

已有案例

1. ThreeJS实现案例

three_demo

具体的实现方式是不断修改顶点的颜色。优点就是简单,具有可编辑性。缺点就是线条需要自己手工布置,不能使用现有模型。数量一多,可能对性能有影响

2. BABYLONJS社区的案例

babylon_forum

这个没具体的给出案例,但是原理是一样的,通过改变uv值实现纹理流动。优点也是简单,性能也会好一点,可以直接作用在模型上。缺点就是编辑性较差,改变颜色或者渐变幅度,间距什么的都需要调整材质。


段落引用综合网上已经实现的案例来看,都不是很符合个人的预期。于是动用起我的半吊子shader能力做出了一个基于BABYLONJS.ShaderMaterial的光线流动效果。

成果

FlowLight

如何实现

原理还是很简单的,就是修改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,让泛光跟随光线,效果就非常好了

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×