
# 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 the lowest.
This simple height map

![height map](/img/getstarted/villageheightmap.png)  
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.

![untextured valley](/img/getstarted/valley1.png)  
In this image the camera has been pulled further out and the vertical height exaggerated.

```javascript
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.

<Playground id="#KBS9I5#39" title="Basic Height Map" description="Create terrain from a plane with a height map." image="/img/playgroundsAndNMEs/gettingStartedDistantHills1.jpg"/>

We can add textures in the usual way.

![textured valley](/img/getstarted/valley2.png)  

<Playground id="#KBS9I5#40" title="Height Map With Texture" description="Add a texture to your terrain." image="/img/playgroundsAndNMEs/gettingStartedDistantHills2.jpg"/>

Finally we give the village ground a similar, but clearer texture, to that of the large ground.

```javascript
//Create Village ground
const 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 ground
const 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
```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.jpg"/>

We add back the dwellings 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.jpg"/>

Then we can add back the car 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.jpg"/>

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.jpg" width="100" height="100" alt="some clouds"/>|<img src="/img/getstarted/skybox_nx.jpg" width="100" height="100" alt="more clouds"/>|<img src="/img/getstarted/skybox_py.jpg" width="100" height="100" alt="the sun overhead"/>|<img src="/img/getstarted/skybox_ny.jpg" width="100" height="100" alt="solid gray"/>|<img src="/img/getstarted/skybox_pz.jpg" width="100" height="100" alt="more clouds"/>|<img src="/img/getstarted/skybox_nz.jpg" 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.jpg"/><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 will always face the camera.

We are using this image 
![palm tree](/img/getstarted/palmtree.png)
for out tree sprite and we set up a sprite manager for it.

```javascript
const spriteManagerTrees = new BABYLON.SpriteManager("treesManager", "url to tree image", 2000, {width: 512, height: 1024}, scene);
```

The parameters are a name for the manager, the url of the image, the maximum number of sprites, 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.jpg"/>

You can also use a collection of images in a sprite map to produce an animation.

![ufo map](/img/getstarted/ufo.png)

The above map consists of cell frames of the same size, 5 across and 4 down. This time the width and height given in the manager is the width and height of one cell.

```javascript
const spriteManagerUFO = new BABYLON.SpriteManager("UFOManager","url to ufo image", 1, {width: 128, height: 76});
```

The animation for a sprite is set by giving the first and last cell to be used, whether it loops (true) or not and 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.jpg"/>

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 using a skybox, texture, creating a ground with 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 will be true if a box bounding mesh1 would overlap with a box bounding mesh2. Each mesh has a built-in bounding box which lies close to the surface of the mesh that is used in checking the intersection of the meshes.

![dudebox](/img/getstarted/dudebox.png) ![carbox](/img/getstarted/carbox.png)

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 its 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 are both in the danger zone. In our case because of the way the _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 box bounding 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.jpg"/>

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.jpg"/>

This repeated animation looks a bit out off place. Even if we revert back to the character walking around the village the repetition of the car not only looks a bit silly it is also annoying. Let's improve the environment a little so that the car can appear to be driving through the village. We will place the village in a valley with distant hills created from a height map and put a road in for the car to travel along. While we are doing that let's add a sky and some distant trees.


Getting Started - Chapter 5 - A Better Environment

A Better Environment

Coming next

Getting Started - Chapter 5 - Distant Hills

Learn to add some distant hills to your scene.

Getting Started - Chapter 5 - Skies Above

Learn to add a skybox to your scene.

Getting Started - Chapter 5 - Sprite Trees

Learn to add 2D sprites to your scene.