FPS drop

[shd101wyy]

Hi. I am new to Babylonjs and recently I am trying to make a game like minecraft for fun.

So I try to generate 30 * 50 chunks, like what is showed in the picture above. And the fps quickly drop to 4~5 after 30*50 = 1500 chunks are generated. So is there any way to improve the performance?

Do I need to merge meshes? If so how do I merge them.

 

Also.
I am using texture image like this from WebCraft
https://github.com/Overv/WebCraft/blob/master/media/terrain.png

So If I am using cube, how do I do texture mapping to 6 faces with different images.

Because the texture image has 256*256 resolution. how do I use texture coord u=0, v=0, resolution 16*16 part of the image.

and put them to left right front back sides of the cube? 

-----------------

Thank you very much!

[GameMonetize]

From a performance point of view I suggest using an unique texture and use specific texture coordinates on your cube

 

For your first point, you should use bigger meshes (let say around 20K vertices per mesh) if you want to maximize performances

[shd101wyy]

Thank you. 

And could you please explain

      1) how to create mesh according to vertices, faces, and texture coordinate?   

      2) how to merge mesh?

 

[shd101wyy]

Sorry I am so noob.......

 

I mean for example I want to create a mesh like that

 

0          1             2

a          b             c

|-------- | ---------|

|            |             |

|______ |_______ |

d         e             f

3          4            5

so I wrote code

------------------------

 

var mesh = new BABYLON.Mesh('mesh', scene);

var indices = [];

var positions = [];

var normals = [];

var uvs = [];

 

// vertex a

positions.push(-1, 1, 0);

normals.push(0, 0, 1);

 

// vertex b

position.push(0, 1, 0);

normals.push(0, 0, 1);

 

 

// vertex c

position.push(1, 1, 0);

normals.push(0, 0, 1);

 

 

// vertex d

position.push(-1, -1, 0);

normals.push(0, 0, 1);

 

 

// vertex e

position.push(0, -1, 0);

normals.push(0, 0, 1);

 

 

// vertex f

position.push(1, -1, 0);

normals.push(0, 0, 1);

 

// faces

/*

      is every face triangle?

      can it be quad?

*/

indices.push(0);

indices.push(1);

indices.push(3)

 

indices.push(1);

indices.push(3);

indices.push(4);

 

indices.push(1);

indices.push(2);

indices.push(4);

 

indices.push(2);

indices.push(4);

indices.push(5);

 

/*

 Now suppose I want to put "image1.png" to face | abde |

                                      and "image2.png" to face | bcef | as textures.

How could I do it?

 

 

Do i need to create two meshes like

 

var mesh1 = new BABYLON.Mesh('mesh1', scene);

var mesh2 = new BABYLON.Mesh('mesh2', scene);

 

then set texture separately  

and then merge those two into one mesh?

 

 

*/

 

Thank you very much

[GameMonetize]

To create a mesh you can see the code of CreatePlane for instance:

BABYLON.Mesh.CreatePlane = function (name, size, scene, updatable) {        var plane = new BABYLON.Mesh(name, scene);        var indices = [];        var positions = [];        var normals = [];        var uvs = [];        // Vertices        var halfSize = size / 2.0;        positions.push(-halfSize, -halfSize, 0);        normals.push(0, 0, -1.0);        uvs.push(0.0, 0.0);        positions.push(halfSize, -halfSize, 0);        normals.push(0, 0, -1.0);        uvs.push(1.0, 0.0);        positions.push(halfSize, halfSize, 0);        normals.push(0, 0, -1.0);        uvs.push(1.0, 1.0);        positions.push(-halfSize, halfSize, 0);        normals.push(0, 0, -1.0);        uvs.push(0.0, 1.0);        // Indices        indices.push(0);        indices.push(1);        indices.push(2);        indices.push(0);        indices.push(2);        indices.push(3);        plane.setVerticesData(positions, BABYLON.VertexBuffer.PositionKind, updatable);        plane.setVerticesData(normals, BABYLON.VertexBuffer.NormalKind, updatable);        plane.setVerticesData(uvs, BABYLON.VertexBuffer.UVKind, updatable);        plane.setIndices(indices);        return plane;    };

To merge meshes here is a wiki about that:

https://github.com/BabylonJS/Babylon.js/wiki/How-to-merge-meshes

[shd101wyy]

Hi.

I created two planes using:

  var plane1 = new BABYLON.Mesh('plane1', scene);  var plane2 = new BABYLON.Mesh('plane2', scene);

and then I assigned two different textures to them

before calling mergeMeshes function they looked like this:

 

I try to call mergeMeshes function that you provided:

return mergeMeshes("meshes", [plane1, plane2], scene);

and I got error message:

     

 TypeError: arrayObj[i].mesh is undefined         if (!arrayObj[i].mesh.isVerticesDataPresent([BABYLON.VertexBuffer.UVKind]))

it seems that arrayObj.mesh is undefined.

 

 

So I changed arrayObj.mesh to arrayObj and I called mergeMeshes functions again.

This time I got this, which seems that the two textures disappeared:

 

I think I am wrong somewhere. 

Please help. Thanks!

 

 

 

[GameMonetize]

After merging your meshes, you should reaffect the material

[GameMonetize]

And beware, if you want to have different materials per face, you should read this:

http://blogs.msdn.com/b/eternalcoding/archive/2013/07/10/babylon-js-using-multi-materials.aspx

[shd101wyy]

Thank you so much!!!!!! The problem is solved.

Now I can successfully generate 400 * 400 chunks and no lag.

 

One last question:

 

      How do I delete one face from a mesh?

 

Thanks 

[GameMonetize]

You have to use the same principle as MergeMeshs: Get the vertices and change them (or remove  them)