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