Hi.
I’m generating a terrain from heightmap and was wondering what is the best way to divide the terrain in sections and assign some specific data to each section ?
An example usage would be when terrain sections belong to different players, acting like kingdoms. These sections would have a no standard shape, it depends by the terrain conformation.
Any suggestion ?
Thanks.
Found an example of what i would like but made with unity:
I think that is a mesh over the terrain, right ?
A lot will depend on how you are going to determine the sections or territories. Am making the following up as I go along so no guarantee it would work.
In your favourite drawing package open the heightmap. Overlay a new layer on top of the map. On the overlay draw lines how you want the territories to be. Save the overlay as a separate file. Open the territories image and for each territory create a separate file that draws the outline of each territory on an image the size of the map with the territory in the correct position.
In Babylon.js for each territory image read the pixel position of the outline of the territory to determine the x, y coordinates of the outline and use ground.getHeightFromCoordinates(x, y) for the z coordinate. Using these points you can the use Create Parametric Shapes - Babylon.js Documentation to draw a lines mesh that will fit your territory on your ground.
Only one possibility but might work🤔
Hi.
Thanks for the suggestion.
I don’t understand exactly what you mean. Do you mean create an image with the lines representing each section ?
I saw online some used bitmaps to do this. Something like this:
Each section has its color.
Do you think is possible to do a similar thing with babylon ?
It is easy enough to superimpose colored sections onto your map, https://www.babylonjs-playground.com/#MJ6YSM#82, the difficulty is recognizing each section as a separate area and highlighting the current section. How do you intend to store the boundaries of each section?
No idea yet.
I think using a bitmap is possible to associate data with specific pixel color. So i use the bitmap only for initial mapping of data but not as a texture. I wonder how to get the borders of that.
Have spent a while coming up with a prototype. Really it is no more than a proof of concept and would require a lot of development work.
https://musing-joliot-0f7a2f.netlify.com/sections
Move pointer over map.
Could not use a playground because browsers do not like context.getImageData from an external site
Basic process
Generate map in a paint app
Record red, green blue color values for each section (un comment line 85 is one way to get these)
Select each section and paste each section onto a transparent image in correct place, eg
Make sure you save each image with transparency intact.
In Babylon.js
Form two version of terrain one slightly above other. Using a dynamicTexture (so can read pixels) apply map to bottom terrain.
Set up textures for each transparency file using section image files
Use map image to read pixel color, for given pixel color change texture for top terrain.
List is quite a lot of work for just 6 sections would need to find some way of coding to do the image work for many sections. However it shows it is possible.
Improvements from anyone very welcome.
3 Likes
Really nice.
Thank you. 
Worked out how to have PG version, easier for anybody to experiment with Babylon.js Playground
1 Like