How to enclose the sides and bottom of a GroundFromHeightmap Mesh?

Questions
1

Hello there,

I’ve created a Ground Mesh from a HeightMap PNG file, which creates a nice Mesh with various Y positions on the top/surface.
However I can look partly under/through the terrain when I view with the camera from the side (e.g. from XY plane into Z direction).
I want to enclose the remaining 5 sides of the Mesh (like all but the already created top side of a Box Mesh).
Maybe I want to put a texture/color on each of these sides as well.

See the example image of a typical (model train :blush:) diorama where the sides of the ‘height map’ are solid (gray in this case):

image
image.jpg764×441 124 KB

  • What would be the best approach to take on this?

Q

2

This PG should be helpful:

https://www.babylonjs-playground.com/#WJPB9#10

6 Likes
3

Love that playground! :slight_smile:

Almost solved my question.

image

For square heightmaps the Ribbon on the sides works perfectly!

  • How to extend the playground function so that it also supports non-square Ground Mesh? E.g. so I can supply both a groundWidth and a groundDepth instead of only groundSize?

image

The cyan side in the 2nd picture is the ribbon created. It’s square instead of rectangular for this 2nd level.

The mountain cut-out in the middle of this level isn’t found in the ribbon side on the 2nd picture. See the red lines.

Q

4

https://www.babylonjs-playground.com/#WJPB9#22

4 Likes
5

Excellent! :star::star::star::star::star:

The updated function in your new playground works for both square and rectangular (heightmap) grounds! :partying_face:

(See the Curve #2 and Square Side #1 levels of my game to see the code in action.)

image

I’m starting to understand the logic in the code you’ve shared as well.

What can I say? Here’s a free train ticket to ride: :train2::ticket: :wink:

Thanks @adam you solved my question - and hopefully that helped other coders as well who work with heightmapped grounds.

Q

3 Likes