valepu Posted September 16, 2015 Share Posted September 16, 2015 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! Quote Link to comment Share on other sites More sharing options...
Convergence Posted September 16, 2015 Share Posted September 16, 2015 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. Quote Link to comment Share on other sites More sharing options...
valepu Posted September 16, 2015 Author Share Posted September 16, 2015 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? Wingnut 1 Quote Link to comment Share on other sites More sharing options...
valepu Posted September 16, 2015 Author Share Posted September 16, 2015 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 Wingnut 1 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.