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
Une Cagnotte reversée à la fondation OpenStreetMap a été organisée par Makina Corpus lors du Paris Open Source Summit ! Une Cagnotte reversée à la fondation OpenStreetMap a été organisée par Makina Corpus lors du Paris Open Source Summit ! 28/01/2020

Les 10 et 11 décembre derniers, Makina Corpus était présente à la 5ème édition du Paris Open ...

Recherche et développement d’indicateurs pour l’aménagement d’un territoire Recherche et développement d’indicateurs pour l’aménagement d’un territoire 14/01/2020

Nous explorons l’intérêt de calculer automatiquement des indicateurs d’aménagement du ...

Index géographique : avant le géocodage, le gazetteer 08/10/2019

Le géocodage nécessite au préalable d’indexer et de structurer les données. C’est le rôle ...

Makina Corpus participe à la conférence mondiale sur OpenStreetMap Makina Corpus participe à la conférence mondiale sur OpenStreetMap 09/09/2019

Du 21 au 23 septembre se tient à Heidelberg, en Allemagne, la douzième conférence annuelle sur ...

Créer une carte avec Umap Créer une carte avec Umap 03/07/2019

[ Tuto ] créer une carte utilisant OpenStreetMap et y ajouter ou importer des données, puis ...

Nos formations
Formation Leaflet