
## Tiled Ground

A tiled ground is created differently to a ground mesh. It still lies in the xz plane. The bottom left corner of the tiled ground is given by the values for xmin and zmin and the top right corner by xmax and zmax. 
The tiled ground is subdivided into tile regions: across into w tiles and up into h tiles. In the same way every tile can be further subdivided into w by h sections. The creation of a tiled ground relies on the use of _MultiMaterials_.

## MeshBuilder

Usage:

```javascript
var tiledGround = BABYLON.MeshBuilder.CreateTiledGround("tiled ground", options, scene);
```

| option       | value                                                                                                         | default value  |
| ------------ | ------------------------------------------------------------------------------------------------------------- | -------------- |
| xmin         | _(number)_ map min x coordinate value                                                                         | -1             |
| zmin         | _(number)_ map min z coordinate value                                                                         | -1             |
| xmax         | _(number)_ map max x coordinate value                                                                         | 1              |
| zmin         | _(number)_ map max z coordinate value                                                                         | 1              |
| subdivisions | _object_ _( \{w: number, h: number\} )_ number of subdivisions (tiles) on the height and the width of the map | \{w: 6, h: 6\} |
| precision    | _( \{w: number, h: number\} )_ number of subdivisions on the height and the width of each tile                | \{w: 2, h: 2\} |
| updatable    | _(boolean)_ true if the mesh is updatable                                                                     | false          |

### Steps to Create Tiling

- Create Tiled Ground
- Create materials needed for each tile
- Create multi material and push each material onto its subMaterials array
- Set the multi material as the material for the Tiled Ground
- Set the subMeshes property of the Tiled Ground to an empty array
- Create and set values for these variables

```javascript
const verticesCount = tiledGround.getTotalVertices();
const tileIndicesLength = tiledGround.getIndices().length / (subdivisions.w * subdivisions.h);
```

- Fill the subMeshes array of the Tiled Ground using

```javascript
let base = 0;
for (let row = 0; row < grid.h; row++) {
  for (let col = 0; col < grid.w; col++) {
    new BABYLON.SubMesh(row % 2 ^ col % 2, 0, verticesCount, base, tileIndicesLength, tiledGround);
    base += tileIndicesLength;
  }
}
```

### Examples

Chess Board: <Playground id="#8VDULN" title="Create a Chess Board" description="Simple example of creating a chess board."/>

Using these two materials

![grass](/img/how_to/Materials/grass.png) ![rock](/img/how_to/Materials/rock.png)

<Playground id="#8VDULN#1" title="Create a Chess Board With Grass And Rock" description="Simple example of creating a chess board with grass and rock textures."/>

Forming a large scale map using open source map tiles: <Playground id="#1XBLWB#822" title="Create a Large Scale Map" description="Simple example of creating a large scale map using open source map tiles."/>

## Mesh

Usage :

```javascript
const tiledGround = BABYLON.MeshBuilder.CreateTiledGround("Tiled Ground", {xmin, zmin, xmax, zmax, subdivisions, precision}, scene);
```



## Text

The created mesh will be 3D object created as an extrusion of a given text. It will have its origin at the center of the text.

## Prerequesite

The `MeshBuilder.CreateText` is leveraging our ExtrudePolygon feature which requires you to have **Earcut library available**. Whilst an Earcut script is pre-loaded in the Playground you will have to add a reference to such a script in your own projects. One is available at [CDN](https://unpkg.com/earcut@2.1.1/dist/earcut.min.js) or via a [npm package](https://github.com/mapbox/earcut#install).

## MeshBuilder

Usage :

```javascript
const fontData = await (await fetch("./fonts/Droid Sans_Regular.json")).json(); // Providing you have a font data file at that location
const text = BABYLON.MeshBuilder.CreateText(
  "myText",
  "Hello World !! @ #$ % é",
  fontData,
  {
    size: 16,
    resolution: 64,
    depth: 10,
  },
  scene,
);
```

| options property | value                                                | default value |
| ---------------- | ---------------------------------------------------- | ------------- |
| size             | _(number)_ size of each letter                       | 50            |
| resolution       | _(number)_ number of points used when tracing curves | 8             |
| depth            | _(number)_ extrusion depth (on Y axis)               | 1.0           |
| sideOrientation  | _(number)_ side orientation                          | DOUBLESIDE    |

### Generating font data

To be able to trace and extrude the mesh, you have to provide font data information.
Babylon.js is supporting the fantastic work done by Gero3 on http://gero3.github.io/facetype.js/

Simply go to this site and generate the json description file for the font you want to use.

We are also offering already exported fonts on assets.babylonjs.com:

- https://assets.babylonjs.com/fonts/Droid Sans_Bold.json (http://www.droidfonts.com/)
- https://assets.babylonjs.com/fonts/Droid Sans_Regular.json (http://www.droidfonts.com/)
- https://assets.babylonjs.com/fonts/Kenney Future Regular.json (https://www.kenney.nl/assets/kenney-fonts)

### Examples

Hello world: <Playground id="#6I2RMN#2" title="Create a 3d text" description="Simple example of creating a 3d text." image="/img/playgroundsAndNMEs/createText.jpg"/>

### Controlling letters texture mapping and colors

You can use a specific parameter to set the way the UVs and colors are attached on the new mesh:

```javascript
var myText = BABYLON.MeshBuilder.CreateText("myText", "HELLO WORLD", fontData, {
        size: 16,
        resolution: 64,
        depth: 10,
        faceUV: [
            new BABYLON.Vector4(0, 0, 1, 1),
            new BABYLON.Vector4(0, 0, 1, 1),
            new BABYLON.Vector4(0, 0, 1, 1),
        ];
    });
```

The faceUV array defines an array of Vector4 elements used to set different texture coordinates to the front, top and back faces respectively.
You can do the same for colors with faceColors.

But you may want to go further and control the texture coordinates or colors per letter. To do so you can use the following code:

```javascript
const letterCount = 10;
    const step = 1 / letterCount;
    var myText = BABYLON.MeshBuilder.CreateText("myText", "HELLO WORLD", fontData, {
        size: 16,
        resolution: 64,
        depth: 10,
        perLetterFaceUV: (index) => {
            const startX = index * step;
            return [
                new BABYLON.Vector4(startX, 0, startX + step, 1),
                new BABYLON.Vector4(startX, 0, startX + step, 1),
                new BABYLON.Vector4(startX, 0, startX + step, 1),
            ];
        }
    });
```

The perLetterFaceUV (and its sister perLetterFaceColors) is a callback used to provide the data per letter instead of per mesh.

<Playground id="#8S9WRP" title="Create a 3d text" description="Example of creating a 3d text with per letter UV coordinates"/>



## Introduction

In this tutorial, our goal is to understand height maps, a method used to generate realistic terrain. 
Height-maps are easy to use, customizable yet produce impressive terrain:

>  What we are going to try and achieve

![HeightMap](/img/how_to/HeightMap/14.png)

## How to do this?

### How height-maps work

Understanding height maps is the main objective of this tutorial. A height map is simply a gray-scale texture. Each pixel in the texture maps onto the height of a point on a plane, thus the name height-map. The whiter the pixel the higher the displacement, the darker the lesser the displacement. From the variations of gray within the texture we can map out a terrain. For this example we shall use the following texture: 

![HeightMap3](/img/how_to/HeightMap/worldHeightMap.jpg)

> To help you generate height-map textures (like the one above), you can use software such as [Terragen](https://planetside.co.uk/free-downloads/terragen-4-free-download/), or [Picogen ](https://picogen.org/downloads.php.html)(free).

### Javascript code

Now let’s see this powerful function named `CreateGroundFromHeightMap`:

```javascript
// Create a material with our land texture.
let groundMaterial = new BABYLON.StandardMaterial("ground", scene);
groundMaterial.diffuseTexture = new BABYLON.Texture("Earth__land.jpg", scene);

// Use CreateGroundFromHeightMap to create a height map of 20 units by 20
// And a height of to
// units, with 250 subdivisions in each of the `x` and `z` directions, for a
// total of 62,500 divisions.
const ground = BABYLON.MeshBuilder.CreateGroundFromHeightMap("gdhm", "textures/heightMap.png", {
    width: 20, height: 20, subdivisions: 250, maxHeight: 10, minHeight: 2
});

// Bind our material to our mesh
ground.material = groundMaterial;
```

The parameters passed are:

- **name**: The name of the resulting mesh
- **Height-map texture**: The URL of the height-map texture.
- **options**: The options for producing the height-map.
- **scene**: The scene to append the resulting mesh
- **updatable**: Boolean to specify if the mesh should be updatable.
- **successCallback**: Callback that resolves to the successfully produced height-map terrain.

The following are options, third parameter, used to construct the height-mapped plane:

* **width**: The width of the plane
* **height**: The height of the plane
* **minHeight**: Lowest point on the plane
* **maxHeight**: Highest point on the plane
* **subdivisions**: How detailed should our height-mapped plane be. Higher for higher poly count and therefore better visual quality. As seen below:
* ![HeightMap4](/img/how_to/HeightMap/14-2.png)

----

> Now we can see a 3d representation of the earth's surface on a plane!

![HeightMap4](/img/how_to/HeightMap/14-3.png)

Another example showing basic lighting, height-maps and a [skybox](/features/featuresDeepDive/environment/environment_introduction) in use!

![HeightMap5](/img/how_to/HeightMap/14-4.png)

### Tips.

If a height-map negatively impacts performance try reducing the subdivisions to reduce the number of polygons on the mesh. For further documentation go to the [CreateGroundFromHeightMesh](https://doc.babylonjs.com/typedoc/modules/BABYLON#CreateGroundFromHeightMap-2) API reference.

#### Playground examples.

<Playground id="#95PXRY" title="Height Map Example" description="Simple example of using a height map."/>
