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