How to draw navigatoin path lines with animation

Questions
1

Hello folks!

I have a list of points that form a path and I would like to apply some texture and an animation to it.

I was inspired by this example from the docs:
https://playground.babylonjs.com/#F2M8GA#5

I want to achieve a similar look and feel but for some reason it doesn’t work with the points I have:
https://playground.babylonjs.com/#UGFXTX

In the example from the docs it looks like the distance between the points is always the same. In my case the distance changes if the path forms a curve or not which makes the animation weird. Any ideas how to achieve the animation (uScale) for all the points?

Thank you in advance!

2

Can you try to pre-process the point list and add intermediate points if distance between 2 is > to a threshold?

2 Likes
3

Hello!
As @Cedric wrote:
You have to make sure that the distances between the points are the same. The part of the line between two points is called a line segment in the world of GreasedLine. To ensure uniform line segment lengths you can use the GreasedLineTools.SegmentizeLineBySegmentLength function.

However your points are very very close to each other so at first it’s better to remove some of them. Then you can call the mentioned function which will cut the line into segments with uniform lengths.

https://doc.babylonjs.com/typedoc/classes/BABYLON.GreasedLineTools#SegmentizeLineBySegmentLength

Working PG:

:vulcan_salute:

EDIT: 400 hours later :smiley: I think your PG should work as well and maybe the UVs are not correctly calculated. I’ll check it.

3 Likes
4

@roland Thanks for the explanation and for the working PG.

You can still see the difference between the curve and the straight line but I guess it’s a matter of playing a little bit with the numbers, for example:

const vecPoints = BABYLON.GreasedLineTools.SegmentizeLineBySegmentLength(
        newPoints,
        0.0015 // instead of 0.01
    )

and

texture.uScale = 50; // instead of 10

Thanks again. I’m waiting for your findings regarding UVs calculations.

1 Like
5

Finally the fix is here :stuck_out_tongue:

2 Likes
6

Before:

image
image1578×754 45.1 KB

After:

image
image1484×552 36.8 KB