Tips on how to improve performance

[valepu]

Hello,

I am learning how to use Babylon.js and i made this scene http://mjzone.net/game/game.html by copy/pasting from different places, i ended up with something i am somehow satisfied with. The problem now is that when the camera is facing the field performance goes down the drain.

 

So i'd like to know what i could do in order to improve performance. 

I might have to warn you the code is actually a mess, as i'm just testing babylon and playing with it i didn't care much about organizing the code (probably there's even some code that needs to be deleted) so that might also cause performance issues.

 

I think the main culprit is this:

for (var j = 0; j < (dimensions.z/ cubeSize); j++) {        for (var i = 0; i < dimensions.x / cubeSize; i++) {                    var newCube = createCube(cubeSize);//cube.createInstance("cube" + "_" + i + "_" + j);         newCube.position.z = 2 -((dimensions.z) / 2) + (j * cubeSize);         newCube.position.x = 2 -((dimensions.x) / 2) + (i * cubeSize);         newCube.position.y = 2*cubeSize;         newCube.origPos=new BABYLON.Vector3(newCube.position.x, newCube.position.y, newCube.position.z);                     newCube.actionManager = new BABYLON.ActionManager(scene);            newCube.actionManager.registerAction(             new BABYLON.SetValueAction(BABYLON.ActionManager.OnPointerOverTrigger, newCube, "material.subMaterials.4.diffuseColor", blue, null)            );            newCube.actionManager.registerAction(               new BABYLON.SetValueAction(BABYLON.ActionManager.OnPointerOutTrigger, newCube, "material.subMaterials.4.diffuseColor", white, null)            );            newCube.actionManager.registerAction(               new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnLeftPickTrigger, function(thisCube){               dragon.destination = thisCube.position.clone();               dragon.currTile=thisCube;               thisCube.overTile=dragon;               dragon.destination.y=dragon.destination.y+getDimensions(thisCube).y;               }.bind(this, newCube), null)            );                        if(!(j==0 && i==0)){             cubes.push(newCube);            } else {             dragon.position.z = 2 -((dimensions.z) / 2) + (j * cubeSize);             dragon.position.x = 2 -((dimensions.x) / 2) + (i * cubeSize);             newCube.material.subMaterials[4].diffuseColor=BABYLON.Color3.Red();             dragon.currTile=newCube;           newCube.overTile=dragon;            }         groundAnimationCount++;        }    }

and this:

function setCubeMaterial(cube){	var cubeMaterial = new BABYLON.StandardMaterial("cube_0_0", scene);    cube.material=cubeMaterial;    cubeMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);    cubeMaterial.specularColor = new BABYLON.Color3(0, 0, 0);        var textureName="textures/ground/ground.jpg";    var f=new BABYLON.StandardMaterial("material0",scene);	f.diffuseTexture=new BABYLON.Texture(textureName, scene);	f.diffuseTexture.uScale = -1;	f.diffuseTexture.vScale=-1; 	var ba=new BABYLON.StandardMaterial("material1",scene);	ba.diffuseTexture=new BABYLON.Texture(textureName, scene);	ba.diffuseTexture.uScale = 1;	ba.diffuseTexture.vScale = 1;		var l=new BABYLON.StandardMaterial("material2",scene);	l.diffuseTexture=new BABYLON.Texture(textureName, scene);	l.diffuseTexture.wAng = 0.5*Math.PI;		var r=new BABYLON.StandardMaterial("material3",scene);	r.diffuseTexture=new BABYLON.Texture(textureName, scene);	r.diffuseTexture.wAng = 0.5*Math.PI;		var t=new BABYLON.StandardMaterial("material4",scene);	t.diffuseTexture=new BABYLON.Texture("textures/ground/grass.jpg", scene);	t.diffuseTexture.wAng = -0.5 * Math.PI;		var bo=new BABYLON.StandardMaterial("material5",scene);	bo.diffuseTexture=new BABYLON.Texture("textures/ground/ground_full.jpg", scene);	bo.diffuseTexture.wAng = 0.5 * Math.PI;	bo.diffuseTexture.uScale = 1;		//put into one	var multi=new BABYLON.MultiMaterial("cubetexture",scene);	multi.subMaterials.push(f);	multi.subMaterials.push(ba);	multi.subMaterials.push(l);	multi.subMaterials.push(r);	multi.subMaterials.push(t);	multi.subMaterials.push(bo);	//apply material	cube.subMeshes=[];	var verticesCount=cube.getTotalVertices();	cube.subMeshes.push(new BABYLON.SubMesh(0, 0, verticesCount, 0, 6, cube));	cube.subMeshes.push(new BABYLON.SubMesh(1, 1, verticesCount, 6, 6, cube));	cube.subMeshes.push(new BABYLON.SubMesh(2, 2, verticesCount, 12, 6, cube));	cube.subMeshes.push(new BABYLON.SubMesh(3, 3, verticesCount, 18, 6, cube));	cube.subMeshes.push(new BABYLON.SubMesh(4, 4, verticesCount, 24, 6, cube));	cube.subMeshes.push(new BABYLON.SubMesh(5, 5, verticesCount, 30, 6, cube));	cube.material=multi;	}

Which create the field, composed of 625 different cubes, each with its multi material and submeshes (i had to do this because i wanted to use a different texture for each side of the cube and change the top texture color on mouse over). When i started this test i had used instances and it worked fine (there were twice the cubes, twice as big but it ran smoothly) but in order to do the color change on mouse over I had to make a new cube and a new material for each cube (at least, it looked like so. Probably i could've just changed the top submesh).

On top of that all the cubes are animated (they go up and down) and textures are 256x256 with no mipmap.

 

Maybe I should find a minecraft-like project for babylon and study it

 

 

As said above, the code is a mess! I am actually ashamed of posting it but I wanted to sort this issue as soon as possible and i haven't got the time to polish it. If you think it's hard to read i'll try to fix it.

 

Any help will be appreciated, thanks! 

[Convergence]

I would try to find a way to make the createInstance() work, since it would save on a lot of draw calls (currently 4000+ draw calls!), new materials, etc. Perhaps only have one 'mouseover' cube, that gets positioned whereever the mouse is in lieu of the default one.

[valepu]

I would try to find a way to make the createInstance() work, since it would save on a lot of draw calls (currently 4000+ draw calls!), new materials, etc. Perhaps only have one 'mouseover' cube, that gets positioned whereever the mouse is in lieu of the default one.

 

That sounds like a nice idea, thanks!

Maybe I can use that as starting point. Since in the future i will need to change the color of other cubes, not just the one i have on (in a fashion similar to final fantasy tactics)

 

 

I was thinking that maybe the best solution would be to create planes and attach them on the cube faces (so, for the mouseover cube it would place a plane with the same texture of the top cube face with blue coloring). Do you think it would work? 

[valepu]

I made a blue plane that i set as child of the cube i have the mouse on and made the other cubes as instances, now it's quite smooth. Thanks for giving me a hint which led me to the solution