
# Getting Started - 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 areas are the lowest.
This simple height map

![height map](/img/getstarted/villageheightmap.webp)  
has a large black area in the middle to host the village. The white areas create the hills, and the gray ones create ways out of the valley for roads.

![untextured valley](/img/getstarted/valley1.webp)  
In this image the camera has been pulled further out and the vertical height exaggerated.

```javascript
const largeGround = BABYLON.MeshBuilder.CreateGroundFromHeightMap("largeGround", "https://assets.babylonjs.com/environments/villageheightmap.png" /* 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 there are, the finer the gradation for height calculation. The two properties minHeight and maxHeight determine the vertical heights for the black and white areas respectively, and gray areas are scaled accordingly.

<Playground id="#KBS9I5#39" title="Basic Height Map" description="Create terrain from a plane with a height map." image="/img/playgroundsAndNMEs/gettingStartedDistantHills1.webp"/>

We can add textures in the usual way.

![textured valley](/img/getstarted/valley2.webp)  

<Playground id="#KBS9I5#40" title="Height Map With Texture" description="Add a texture to your terrain." image="/img/playgroundsAndNMEs/gettingStartedDistantHills2.webp"/>

Finally, we give the village ground a texture similar to that of the large ground, but clearer.

```javascript
//Create Village ground
const groundMat = new BABYLON.StandardMaterial("groundMat");
groundMat.diffuseTexture = new BABYLON.Texture("https://assets.babylonjs.com/environments/villagegreen.png");
groundMat.diffuseTexture.hasAlpha = true;

const ground = BABYLON.MeshBuilder.CreateGround("ground", {width:24, height:24});
ground.material = groundMat;

//large ground
const largeGroundMat = new BABYLON.StandardMaterial("largeGroundMat");
largeGroundMat.diffuseTexture = new BABYLON.Texture("https://assets.babylonjs.com/environments/valleygrass.png");

const largeGround = BABYLON.MeshBuilder.CreateGroundFromHeightMap("largeGround", "https://assets.babylonjs.com/environments/villageheightmap.png" /* url to height map */, 
    {width:150, height:150, subdivisions: 20, minHeight:0, maxHeight: 4});
largeGround.material = largeGroundMat;
largeGround.position.y = -0.01;
```

This line
```javascript
largeGround.position.y = -0.01;
```
ensures the two grounds do not fight and cause flickering.

<Playground id="#KBS9I5#85" title="Layering Textures" description="Add a clearer texture to the area within the village." image="/img/playgroundsAndNMEs/gettingStartedDistantHills3.webp"/>

We add the dwellings back and create a file to import.

<Playground id="#KBS9I5#86" title="Adding The Dwellings" description="Add the dwellings back into the village scene." image="/img/playgroundsAndNMEs/gettingStartedDistantHills4.webp"/>

Then we can add the car back, but this time passing through the village.

<Playground id="#KBS9I5#87" title="Adding The Car" description="Add the animating car back into the village scene." image="/img/playgroundsAndNMEs/gettingStartedDistantHills5.webp"/>

Let's now further improve the environment by adding a sky.



# Getting Started - Skies Above

We can simulate the appearance of a sky by applying six suitable images to the insides of a large [skybox](/features/featuresDeepDive/environment/skybox) cube. (Images are a lot easier and faster to render than 3D objects, and just as good for far-distant scenery.)

Skybox images are usually loaded with [CubeTexture](/typedoc/classes/babylon.cubetexture). CubeTexture's constructor takes a base URL and (by default) appends "\_px.jpg", "\_nx.jpg", "\_py.jpg", "\_ny.jpg", "\_pz.jpg", and "\_nz.jpg" to load the +x, -x, +y, -y, +z, and -z facing sides of the cube.

|<img src="/img/getstarted/skybox_px.webp" width="100" height="100" alt="some clouds"/>|<img src="/img/getstarted/skybox_nx.webp" width="100" height="100" alt="more clouds"/>|<img src="/img/getstarted/skybox_py.webp" width="100" height="100" alt="the sun overhead"/>|<img src="/img/getstarted/skybox_ny.webp" width="100" height="100" alt="solid gray"/>|<img src="/img/getstarted/skybox_pz.webp" width="100" height="100" alt="more clouds"/>|<img src="/img/getstarted/skybox_nz.webp" width="100" height="100" alt="more clouds"/>|
|:---:|:---:|:---:|:---:|:---:|:---:|
|skybox\_px.jpg|skybox\_nx.jpg|skybox\_py.jpg|skybox\_ny.jpg|skybox\_pz.jpg|skybox\_nz.jpg|
<br/>

Cube textures must be applied using [reflectionTexture](/features/featuresDeepDive/materials/using/reflectionTexture) even though the skybox is not a reflection map. Setting [coordinatesMode](/typedoc/classes/babylon.texture#coordinatesmode) to SKYBOX\_MODE paints the texture directly on the cube rather than simulating reflections.

```javascript
const skybox = BABYLON.MeshBuilder.CreateBox("skyBox", {size:150}, scene);
const skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
skyboxMaterial.backFaceCulling = false;
skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("textures/skybox", scene);
skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
skybox.material = skyboxMaterial;
```

We also restrict the camera so that it cannot move below ground level.

```javascript
camera.upperBetaLimit = Math.PI / 2.2;
```

<Playground id="#KBS9I5#88" title="Adding a Skybox" description="Add a skybox to your scene." image="/img/playgroundsAndNMEs/gettingStartedSkyBox.webp"/><br/>
<br/>

After making a sky, the next environmental improvement is to [grow some trees](/features/introductionToFeatures/chap5/trees).



# Getting Started - Working With Code

## Sprite Trees
We are going to plant a couple of woods in our world, each containing 500 trees. To maintain rendering speed, we are going to use sprites. These are two-dimensional images that always face the camera.

We are using this image 
![palm tree](/img/getstarted/palmtree.webp)
for our tree sprite, and we set up a sprite manager for it.

```javascript
const spriteManagerTrees = new BABYLON.SpriteManager("treesManager", "textures/palm.png" /* url to sprite */, 2000, {width: 512, height: 1024}, scene);
```

The parameters are a name for the manager, the URL of the image, the maximum number of sprites, and an object specifying the width and height of the sprite. In this case, it is the width and height of the image.

```javascript
for (let i = 0; i < 500; i++) {
    const tree = new BABYLON.Sprite("tree", spriteManagerTrees);
    tree.position.x = Math.random() * (-30);
    tree.position.z = Math.random() * 20 + 8;
    tree.position.y = 0.5;
}

for (let i = 0; i < 500; i++) {
    const tree = new BABYLON.Sprite("tree", spriteManagerTrees);
    tree.position.x = Math.random() * (25) + 7;
    tree.position.z = Math.random() * -35  + 8;
    tree.position.y = 0.5;
}
```

<Playground id="#KBS9I5#89" title="Adding Sprites" description="Add sprite trees to your scene." image="/img/playgroundsAndNMEs/gettingStartedSpriteTrees1.webp"/>

You can also use a collection of images in a sprite map to produce an animation.

![ufo map](/img/getstarted/ufo.webp)

The above map consists of cell frames of the same size, five across and four down. This time, the width and height given in the manager are the width and height of one cell.

```javascript
const spriteManagerUFO = new BABYLON.SpriteManager("UFOManager", "https://assets.babylonjs.com/environments/ufo.png" /* url to sprite */, 1, {width: 128, height: 76});
```

The animation for a sprite is set by giving the first and last cells to be used, whether it loops (`true`) or not, and the time between cell frames.
```javascript
const ufo = new BABYLON.Sprite("ufo", spriteManagerUFO);
ufo.playAnimation(0, 16, true, 125);
```

<Playground id="#KBS9I5#90" title="Animating Sprites" description="Add an animated UFO to your scene." image="/img/playgroundsAndNMEs/gettingStartedSpriteTrees2.webp"/>

Now we are going to use some more features to produce a working fountain.



## A Better Environment

Our village world is a bit flat and has no atmosphere. Let's add some grass, distant hills, sky, and trees, all easily done with Babylon.js by using a skybox, textures, a ground created from a height map, and sprites.


# Getting Started - Avoiding a Car Crash

## Avoiding a Car Crash

The simplest way of seeing if two meshes are in contact is to use the _intersectsMesh_ method, as in

```javascript
mesh1.intersectsMesh(mesh2);
```

which returns true if the bounding box of mesh1 overlaps the bounding box of mesh2. Each mesh has a built-in bounding box that lies close to the surface of the mesh and is used when checking for intersections.

![dudebox](/img/getstarted/dudebox.webp) ![carbox](/img/getstarted/carbox.webp)

Since the character's walk and the car's journey are not phased together, there will be a time when they are in the same place. However, it is not possible to predict when the character, taking a long walk around the village, and the car, on its short journey, might intersect. In order to demonstrate the _intersectsMesh_ method, we will make the character walk backwards and forwards across the stopping place of the car.

In our case, we want the character to stop moving if the car is in a "hit" zone and the character is not. It would, after all, be dangerous for the character to stop if they were both in the danger zone. Also, because of the way _Dude_ is constructed, we need to use one of its children to check intersection. Basically, _Dude_ is just a holder node for the head, torso, legs, and arms, and the bounding box around it is too small to be effective in this case.

<Playground id="#KBS9I5#83" title="Basic Collision Detection" description="Detect when a car collides with a box and stop the character's animation." image="/img/playgroundsAndNMEs/gettingStartedCollisions1.webp"/>

Now make the hit box invisible.

<Playground id="#KBS9I5#84" title="Basic Collision Detection Invisible Box" description="Detect when a car collides with an invisible box and stop the character's animation." image="/img/playgroundsAndNMEs/gettingStartedCollisions2.webp"/>

This repeated animation looks a bit out of place. Even if we revert to the character walking around the village, the repeated motion of the car not only looks a bit silly, it is also annoying. Let's improve the environment a little so that the car appears to be driving through the village. We will place the village in a valley with distant hills created from a height map and add a road for the car to travel along. While we are doing that, let's also add a sky and some distant trees.


Getting Started - Chapter 5 - A Better Environment

A Better Environment

Coming next

Getting Started - Chapter 5 - Skies Above

Learn to add a skybox to your scene.

Getting Started - Chapter 5 - Distant Hills

Learn to add some distant hills to your scene.

Getting Started - Chapter 5 - Sprite Trees

Learn to add 2D sprites to your scene.