
# 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.



# 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 - Chapter 5 - Skies Above

Further reading

Skyboxes

Learn how to add a skybox to your Babylon.js scene.