How to create a ribbon following a heightmap?

I’m trying to make a race game on a hilly landscape and have a ground that I created from a heightmap. Now I want to display the side of the track on this ground, a bit like kerbstones, so I think I need to use a left and a right ribbon for this. I have no idea though, how to make a ribbon exactly ‘follow’ the ground.

Examples I examined use texture painting to display the track, but this is not what I want, because in the future I’d like to add some volume to the ribbon as well, to be more like real kerbstones.

Any ideas on how to do that?

Try this: https://playground.babylonjs.com/#TN7XWX#34

https://doc.babylonjs.com/features/featuresDeepDive/mesh/creation/param/greased_line/greased_line_ribbon

Thank you. The problem with this example though, is that the GreasedLine follows a 1-dimensional centerPathPoints array, while in my game the ribbon should follow the 3D terrain, since the height coordinate of the left side of the ribbon could be different from the right side on a sloped terrain.

No it isn’t. Look at this example:

You can use these as well:

BABYLON.CreateGroundFromHeightMap()   
BABYLON.CreateGroundFromHeightMapVertexData()
1 Like

Is the track part of the ground texture? How do you know where the track is? Put differently, what data do you have about the track?

Good question :slight_smile: I think it will be an array of coordinates, for which I get the y-coordinate for each x and z with getHeightAtCoordinates from the ground, created with CreateGroundFromHeightmap. I realize now that this is just a line, and it needs width too, so maybe 2 arrays for the left side of the track, and the right side.

I think a GreasedLine is really the way to go, but I find it very hard to understand how to use it.

Look at this example. The white lines represents the paths which will be used to draw the ribbon style line. The gray ribbon is the line itself:

One more PG:

1 Like