Creating a ring pulse in BabylonJS (Visual Effects, VFX) (Shaders Question)

I am trying to come up with a VFX shader for my website and I seem to have trouble with making it. Here is the effect I am trying to create
pulse_gif

Is there anyone who can help me or guide me in the right direction to making this? I used the CYOS (Create Your Own Shader) and the Node Material Editor. I understand the node material better but still not enough to recreate the pulse in the GIF.

Here is the link from NME that I started with:

If you can drop a comment on how to get this effect done. That would be helpful. Thank you

cc @PatrickRyan

1 Like

@jabulanikid, we did a tutorial a while ago which has a custom node material that does something similar. Here is the playground that shows a variety of motion behaviors for animating shapes and lines. The tutorial on YouTube is at Shader Fun with Polar Coordinates (youtube.com).

Let me know if this doesn’t quite answer your questions, but you should be able to use portions of the node material to mimic the effect you are targeting.

2 Likes

I can definitely do something with that. Thank you so much for sending that playground. I will go ahead and use that to recreate the effect in the GIF. That works.

2 Likes

I used torus to animate this kind of behaviour. Animated scale, opacity and glow

1 Like

Or a small shader can easily do the job as well:

2 Likes

Here is another implementation I found. This looks like it was a shadertoy port. So the ring pulse itself was found on shadertoy and converted to Babylon.JS shader code. https://playground.babylonjs.com/#LTS3EN#3

2 Likes