Reduce render time for a tiled map in ThreeJS

Question

I'm working on a WebGL game using Three.js, its been a few days and I found my first issue, render time on big maps.

The game runs great, there are even some AI mobs that run around randomly like crazy, the problem comes when the game has to display many tiles at once (being many around 900 (30x30) on my Computer), if I zoom in the game runs at 60 solid FPS, here's the game demo so you can watch it in action.

http://kuxtal.oruga.biz/

You can move around with the classic WASD or arrow keys and zoom in and out with the MouseWheel.

Right now I'm creating a map like this (The project's code name is Kuxtal):

I have a singleton called Kuxtal, from which all the magic happens, I create a Kuxtal.Instance, which holds the renderer, scene, camera, and some functions to work with them.

Then I create a Kuxtal.Map, to which I pass the width & height as parameters and it runs:

for (var i = 0; i < this.width; i++) { // map.width
    for (var j = 0; j < this.height; j++) { // map.height
        var type = Math.ceil(Math.random() * 3); // 1-Grass 2-Dirt 3-Something else
        var tile = new Kuxtal.Tile(type, i, j);

        this.tiles.push(tile);
    }
}

This is my Kuxtal.Tile Class:

Kuxtal.Tile = function(type, x, z) {
    this.type = type;
    this.x = x;
    this.y = Math.random(); // A random elevation between 0 and 1 les me see the grid and looks nice
    this.z = z;

    this.sprite = new THREE.Mesh(new THREE.CubeGeometry(Kuxtal.TILE_SIZE, 1, Kuxtal.TILE_SIZE), new THREE.MeshPhongMaterial({color: 0xFFFFFF, map: Kuxtal.getTexture("grass")}));
    this.sprite.position.set(SELF.x * Kuxtal.TILE_SIZE, SELF.y, SELF.z * Kuxtal.TILE_SIZE);
    this.sprite.receiveShadow = true;= THREE.RepeatWrapping;
}

And the tiles are added to the scene on this Kuxtal.Instance.loadMap(map) function:

map.tiles.forEach(function(tile) {
    SELF.scene.add(tile.sprite);
});

Any suggestions on how to improve the performance?

Answer 1

great performance saving comes from caching geometries and materials.

In your case, create CubeGeometry and MeshPhongMaterial objects only once and then use them when creating tiles - each tile will be separate Mesh but all pointing to same instance of material and geometry objects.

Then do the same for all resources that can be reused - models, textures etc. Always think about what can you reuse and whether you really need to create a new object instance.

and btw - don't call those tile's meshes 'sprites' - it can be confusing as THREE.JS already has a type called Sprite.