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