I'm working since this morning on a little web project (you can find it here) : build a small voxel engine (with textures like Minecraft) with Babylon JS.
I made a small world (size 50 * 50), without blocks below other (just the first layer to walk).
I made a similar project with Java, how can i optimise my project ? Because it's lagging.
With Java, i had to :
- Disable the display of inner faces of cubes (I know "backFaceCulling = true;" but it's only working on blocks that haven't got one image per faces but one image for all faces).
- Disable the display of faces when a block is right next to it.
- Use VBO.
- Make a big object grass(composed by all my grass block than make multiple grass cube).
Do you know how can i do this 4 points ? (and oter way to optimize) ?
PS : All of my code source is in this main, do you wan't me to write it here ?
Ok so to make a cube, i've got in my img/block/ folder plg files or other folder. All named by an id (0, 1, 2 ...) If i's a folder, it's contain 6 jpg files (each faces of a block). So this is the code to do this :
function readAllCube(scene, tab, nb){
for(var cpt=0; cpt<=nb; cpt++){
tab.push(new BABYLON.StandardMaterial("cube"+cpt, scene));
tab[cpt].backFaceCulling = true;
switch(cpt){
case 2:
tab[cpt].reflectionTexture = new BABYLON.CubeTexture("img/block/"+cpt+"/"+cpt, scene);
tab[cpt].reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
break;
default:
tab[cpt].diffuseTexture = new BABYLON.Texture("img/block/"+cpt+".png", scene);
break;
}
}
}
So i'll have a tab of texture. But when my texture is made of multiple image, i don't know how to rdisable drawing into it (inner faces).
I allso don't find how to make a custom mesh, from all of my cube. I think it's faster to render 1 custom mesh than 625 blocks right ?
If i do that, maybe i think i'll be able to remove faces which are hidden by right next other blocks.
