Creating A Tiled Ground

Tiled Ground

A tiled ground is created differently from 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. Creating a tiled ground relies on the use of MultiMaterials.

MeshBuilder

Usage:

import { MeshBuilder } from "@babylonjs/core/Meshes/meshBuilder";
var tiledGround = MeshBuilder.CreateTiledGround("tiled ground", options, scene);

Steps to Create Tiling

• Create Tiled Ground
• Create materials needed for each tile
• Create a 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

import { SubMesh } from "@babylonjs/core/Meshes/subMesh";
let base = 0;
for (let row = 0; row < grid.h; row++) {
    for (let col = 0; col < grid.w; col++) {
        new SubMesh(row % 2 ^ col % 2, 0, verticesCount, base, tileIndicesLength, tiledGround);
        base += tileIndicesLength;
    }
}

Examples

Chess Board: Create a Chess Board

Using these two materials:

Expand Expand

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

Mesh

Usage :

import { MeshBuilder } from "@babylonjs/core/Meshes/meshBuilder";
const tiledGround = MeshBuilder.CreateTiledGround("Tiled Ground", { xmin, zmin, xmax, zmax, subdivisions, precision }, scene);