How to implement a shader with light flow effect along a specific path (tube mesh)

Similar effect like this:

Known solution with texture animation: Babylon.js Playground,
but i also want a shader solution.

If you want to do it as a shader when you generate the tube or the mesh that you are using make sure you stash vertex data for the percentage of where those vertices are along that path. The first ones should have 0 the end having 1 and all the other points in between have their respective values.

Then on the vertex shader create a varying that passes that position value to your fragment shader. On the fragment shader increment a time uniform and set your meshes alpha as

If(vPointPositon < time){alpha = distance(vPointPositon, time)}

Or something close to that. Sorry this is just off the top of my head. Hope that makes sense.

1 Like

I would animate UV in the vertex shader. something like:

vUV = uv;
vUV.y = time;
1 Like

It seems the vertex data is the point, i will try it later, thx :slight_smile:

1 Like

Thx for your reply :slight_smile:

1 Like

Honestly offsetting a uv would be smarter.

What is the real effect you are going for?

I found an example which i really want, like this: Azure Global Infrastructure
But this example is also a texture animation solution.

yeah that looks like just a uv offset on a sprite animation or something.

Ok, i will consider the uv offset suggestion, thx a lot :grinning_face_with_smiling_eyes:

1 Like


嗯 正在研究中


Would be amazing if you could keep the post in english for the community to benefit from the answers :slight_smile: Google translate is good but I wish it would be embedded in the forum :slight_smile:


ok :grin:

1 Like