Animated navigation path with GreasedLine

Tutorials and tips
1

Hi my buddies!

Some of you already know that I started to work on this

The MeshLine (new name GreasedLine) is still not in production but good enough for some hobby projects already.

Here is an example of an animated navigation path using GreasedLine. Just mark the starting point on the navmesh with SHIFT+Left click and the target point with CTRL+Left click and the animated navpath will be drawn between the two positions.

Example of the line drawing the navpath from floor 1 to floor 3 using stairs:

image
image1197×639 101 KB

Try it out in the PG:

I wrote some support functions to properly stretch the UVs through the line:

            const lineLength = getLineLength(pathPoints) // get the full length
            const subLines = getSubLines(pathPoints) // get lines from one point to the next one
            const points = segmentize(subLines, 0.4) // create segments each 0.4 long
            const repeat = new BABYLON.Vector2((lineLength / 140) * 80, 1) // calc how many time the texture will be repeated along the whole line, you may adjust these values to fit your texture

Drawing the line is as easy as:

            this._navigationPathLine = LineBuilder.CreateGreasedLine(NAVIGATION_PATH_NAME, scene, {
                color: BABYLON.Color3.FromHexString('#ff4a00'),
                points,
                lineWidth: 35,
                alphaTest: 0.1,
                visibility: 0.9,
                repeat,
                useAlphaMap: true,
                alphaMap: this._navPathLineTexture
            })

Animating the UVs:

            if (this._navigationPathLine) {
                const uvOffset = new BABYLON.Vector2(0, 0)
                if (this._navPathObservable) {
                    scene.onBeforeRenderObservable.remove(this._navPathObservable)
                }
                this._navPathObservable = scene.onBeforeRenderObservable.add(() => {
                    uvOffset.x -= 0.001 * scene.getAnimationRatio()
                    this._navigationPathLine!.setParameters({ uvOffset })
                })
            }
        }

I hope, I can continue to work on GreasedLine ASAP and finish it finally!

Enjoy!

R.

:vulcan_salute:

9 Likes
BabylonJS MeshLine - a port of THREE.MeshLine
2

What are the best tools to create a navigation mesh from GLB?

3

It depends on the source model. With good geometry you can do some magic in your 3d software and use boolean operators to cut out the walls from the floor, but mainly manual work is required.

1 Like
4

Very nice @roland . I’ve been playing with something like this but using thin instance tubes and hemisphere line segment caps. I think yours would be much more efficient and performant for more complicated paths though.

1 Like
5

I was thinking about using tubes too before I got my hands on the THREE.MeshLine source code :ninja:

There is a specific feature which comes with GreasedLine. The line looks the same from any angle so the texture is always facing the camera and the width of the line stays the same regardless of the rotation.

2 Likes
6

three.js Some functions in js are really easy to use. Can they be added to the Babylon version

7

Would be great to list the one you are speaking about :slight_smile: ?

1 Like