# Movement lines dashed Animation

https://jsfiddle.net/prisoner849/ofcdgtz8/

How to get dotted line animation like this, please?

You would need a custom shader for this. Using Node Material Editor can be a great option. Adding @PirateJC

Hey sorry for the delayed response!

@sebavan is absolutely right. The Node Material is the way to go here!

I threw this together very quickly, but it should illustrate the idea fairly well:
https://nme.babylonjs.com/#HPTHCD

Essentially, what Iâ€™ve done here is use a meshâ€™s UV space to create a moving dotted line affect. I start with the U value to create a line using greater than and less than math. I added a slider that you can play with to vary the width of the line. Then I use the V value to create an adjustable sine wave and multiply itâ€™s output against the line. That creates the moving dotted line affect.

In the example you gave, you had different lengths for different â€śdashesâ€ť of the line. This can absolutely be achieved by modifying the sine wave to something more complicatedâ€¦likely the summation of multiple sine waves together.

Anyways I hope thatâ€™s helpful! Babylonâ€™s Node Material is unbelievably powerful!!!

2 Likes

One thing I noticed about @nmezhangxiâ€™s link is that the dotted lines are the same thickness on screen regardless of how close or far the camera is - can we get this effect in NME?

1 Like

Yes absolutely! That said it would get a bit more advanced. Essentially youâ€™ll need to understand the cameraâ€™s distance from the object that has the NME attached to it. Youâ€™d use the camera distance as a modifier of the shader. So the thickness of the line would actually change based on the distance to camera.

This is absolutely doable but would require a connection to the node material through the actual Babylon.js scene code.

I would go about this by creating an observable when the camera zoom changes. When that observable is called, it would pass the cameraâ€™s distance to the object to the node material.

Thatâ€™s how Iâ€™d explore doing at least.

1 Like