API

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);
optionvaluedefault 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