Accueil / Blog / Métier / 2014 / How to make tiled grounds in BabylonJS

How to make tiled grounds in BabylonJS

Par Célian Garcia — publié 22/07/2014, édité le 23/07/2014
This topic explains how to make a grid of tiled textures, like a chess board or a map.
How to make tiled grounds in BabylonJS

OpenStreetMap and BabylonJS

BabylonJS is a Javascript/WebGL framework which allow to create 3D scenes in the browser with an incredible simplicity. For more information about it, you can read the wiki, or the github home page.

This topic explains how to set Multi-Material on a TiledGround Mesh to make a grid of tiled textures, like a chess board or a map. Read this comprehensive post about multi materials, written by David Catuhe, the main BabylonJS author.

Recently, I contributed a new type of mesh to Babylon.JS : the Tiled Ground. It is in fact a ground which have a precise number of subdivisions in his width and his height. It makes a grid of tiles, like the ones we can see in cartography backgrounds, for example.

I wrote this article to explain how to combine tiled grounds and multi materials to make a map or a chess board very easily, or whatever you can imagine to make with a grid of textures. Adepts of pixel art will be for sure interested too by this feature.

I used the Babylon Playground for each part of the topic so you can see directly below titles what you could expect, and the code related to.

Create a Tiled Ground

Firstly we have to create the tiled ground.

Here is the constructor :

var tiledGround = new BABYLON.Mesh.CreateTiledGround(name, xmin, zmin, xmax, zmax, subdivisions, precision, scene);

Description of parameters : 

  • name : the name of the mesh
  • xmin, zmin, xmax, zmax : extent values 
  • subdivisions : number of tiles (subdivisions.w : in width; subdivisions.h : in height)
  • precision : number of subdivisions in each tile (precision.w : in width; precision.h : in height)
  • scene : the scene which will contain the mesh
  • updatable : if the mesh is updatable or not

Without surprise, we can see a ground. What is important to know here is that the tiledGround vertex data is the same as the ground's one but with a different way to store indices, positions, and uvs. 

TiledGround MultiMaterial BabylonJS

Create multi material

The multi material Babylon's class allows us to apply a different material on each tile. Here is how we'll do.

We create some differents materials separately, here I chose a white and a black material, to make a chess board ;)

var whiteMaterial = new BABYLON.StandardMaterial("White", scene);
whiteMaterial.diffuseColor = new BABYLON.Color3(1, 1, 1);
var blackMaterial = new BABYLON.StandardMaterial("Black", scene);
blackMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);

We just have then to create a multi material from these materials, pushing them in the subMaterials property.

var multimat = new BABYLON.MultiMaterial("multi", scene);


Apply the multi material

There still the most important ! Apply the multi material to the tiled ground we created.

Firstly we set the material of tiled ground to be the multi material.

tiledGround.material = multimat;

Then  we have to set the subMeshes property of the tiledGround (by default, it contains only one subMesh which covers all the mesh).

To make it, we'll need 2 things :

  • the total number of vertices,
  • the number of indices in a tile which equals the total number of indices divided by the number of tiles.
var verticesCount = tiledGround.getTotalVertices();
var tileIndicesLength = tiledGround.getIndices().length / (subdivisions.w * subdivisions.h);

Finally here is the code to fill the subMeshes array in order to make a simple chess board : 

tiledGround.subMeshes = [];
var base = 0;
for (var row = 0; row < subdivisions.h; row++) {
    for (var col = 0; col < subdivisions.w; col++) {
        tiledGround.subMeshes.push(new BABYLON.SubMesh(row%2 ^ col%2, 0, verticesCount, base, tileIndicesLength, tiledGround));
        base += tileIndicesLength;

TiledGround MultiMaterial BabylonJS

A submesh is defined with:

  • The index of the material to use (this index is used to find the correct material Inside the subMaterials collection of a multi-material)
  • The index of the first vertex and the count of vertices used (To optimize things for collisions for instance)
  • Index of the first indice to use and indices count
  • The parent mesh 

 So  if we want to make another thing than a chess board, the only thing that will change is the first argument : the index of material.

 Now it's up to you to define your own materials and apply them with the material's index of each subMeshes !



  • Board Game 
As seen above a chess game could be created like this without any import of checked texture before.
  • Cartography

If you look at the link just above, you'll see that it is so simple to make a map, using OpenStreetMap tiles.

TiledGround MultiMaterial BabylonJS

Important Map Trick : When we want to create a map, we have to set the properties wrapU and wrapV of each texture like it :

material.diffuseTexture.wrapU = BABYLON.Texture.CLAMP_ADDRESSMODE;
material.diffuseTexture.wrapV = BABYLON.Texture.CLAMP_ADDRESSMODE;

It avoids some indesirable "jump" effects between textures.

  • Pixel art, fun etc...

 Unleash your creativity ! Here is an example with a space invaders character ;)

TiledGround MultiMaterial BabylonJS



Voir aussi
Représentation des modèles numériques de terrain sur le web : ombrage et 3D Représentation des modèles numériques de terrain sur le web : ombrage et 3D 11/02/2019

Les Modèles Numériques de Terrain sont des données représentant la forme du terrain. Sur une ...

Cartographie Web 3D - possibilités techniques en logiciels libres 08/01/2019

Au début, les cartes sur le web étaient planes. Puis, avec de plus en plus de données (imagerie ...

Retour State of the Map France 2018 Retour State of the Map France 2018 23/07/2018

L'équipe de Makina attendait avec impatience l'événement de l'année, State Of The Map 2018 à ...

Calcul d'itinéraires piétons avec OSRM Calcul d'itinéraires piétons avec OSRM 02/02/2018

Cet article présente différentes techniques utilisées dans le cadre du projet MoodWalkR pour ...

MoodWalkR: behind the scenes MoodWalkR: behind the scenes 30/09/2013

Understanding how MoodWalkR computes pedestrian routes.

Nos formations
Formation Leaflet