Getting Started - Chapter 5 - Distant Hills

Distant Hills

We want to set the village in a valley. It would be possible to create hills from meshes, however there is another way to add vertical height to a ground mesh. This is achieved using a height map which uses shades of gray to determine the height of the ground. White areas are the highest parts and black the lowest. This simple height map

has a large black area in the middle to host the village, the white areas create the hills and the gray ones ways out of the valley for roads.

In this image the camera has been pulled further out and the vertical height exaggerated.

`const largeGround = BABYLON.MeshBuilder.CreateGroundFromHeightMap("largeGround", "url to height map",     {width:150, height:150, subdivisions: 20, minHeight:0, maxHeight: 10});`

The subdivisions property of options splits the ground into 20 x 20 = 400 sections. The more subdivisions the finer gradation for height calculation. The two properties minHeight and maxHeight determine the vertical heights for the black and white areas respectively, gray areas scaled accordingly.

Basic Height Map

We can add textures in the usual way.

Height Map With Texture

Finally we give the village ground a similar, but clearer texture, to that of the large ground.

```//Create Village groundconst groundMat = new BABYLON.StandardMaterial("groundMat");groundMat.diffuseTexture = new BABYLON.Texture("url to ground texture");groundMat.diffuseTexture.hasAlpha = true;
const ground = BABYLON.MeshBuilder.CreateGround("ground", {width:24, height:24});ground.material = groundMat;
//large groundconst largeGroundMat = new BABYLON.StandardMaterial("largeGroundMat");largeGroundMat.diffuseTexture = new BABYLON.Texture("url to large ground texture");
const largeGround = BABYLON.MeshBuilder.CreateGroundFromHeightMap("largeGround", "url to heightmap",     {width:150, height:150, subdivisions: 20, minHeight:0, maxHeight: 4});largeGround.material = largeGroundMat;largeGround.position.y = -0.01;```

This line

`largeGround.position.y = -0.01;`

ensures the two grounds do not fight and cause flickering.

Layering Textures

We add back the dwellings and create a file to import