Creating A Tiled Ground

Tiled Ground

A tiled ground is created differently to a ground mesh. It still lies in the xz plane. The bottom left corner of 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 be 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:

var tiledGround = BABYLON.MeshBuilder.CreateTiledGround("tiled ground", options, scene);

option	value	default value
option xmin	value (number) map min x coordinate value	default value -1
option zmin	value (number) map min z coordinate value	default value -1
option xmax	value (number) map max x coordinate value	default value 1
option zmin	value (number) map max z coordinate value	default value 1
option subdivisions	value object ( {w: number, h: number} ) number of subdivisions (tiles) on the height and the width of the map	default value {w: 6, h: 6}
option precision	value ( {w: number, h: number} ) number of subdivisions on the height and the width of each tile	default value {w: 2, h: 2}
option updatable	value (boolean) true if the mesh is updatable	default value 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

const verticesCount = tiledGround.getTotalVertices();
const tileIndicesLength = tiledGround.getIndices().length / (subdivisions.w * subdivisions.h);

Fill the subMeshes array of the Tiled Ground using

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: Create a Chess Board

Using these two materials

grass rock

Create a Chess Board With Grass And Rock

Forming a large scale map using open source map tiles: Create a Large Scale Map

Mesh

Usage :

const tiledGround = BABYLON.Mesh.CreateTiledGround("Tiled Ground", xmin, zmin, xmax, zmax, subdivisions, precision, scene);
const tiledGround = BABYLON.Mesh.CreateTiledGround("Tiled Ground", xmin, zmin, xmax, zmax, subdivisions, precision, scene, updatable); //one optional parameter after scene