Beginner questions

[karpo]

I'm quite impressed of Babylon.js so far. Couple of questions though.

 

1. I've now learned how to export/import meshes from other programs into Babylon scene. I wonder if Babylon library allows me perhaps optimize the mesh performance wise somehow by decreasing amount of vertices/polygons dynamically or other image quality values. For example I have this teletubbish landscape mesh generated from L3DT (imported as an. obj to babylon) - seems like I'm very soon getting low fps and I'd like to look into a bit more. The 3D software I use report the landscape having 34k vertices and 69k faces but I have no problem running 60fps "the Car" demo at babylonjs.com with a million vertices.

 

2. For the landscape - Is the more "proper" way to go with a seperate heighmap where I could control the mesh subdivision?

 

3. Additionally - I'm using camera with gravity and collision detection for simulating FPS. Could this be a resource hog?

 

4. How to add FPS/Vertices/time used per frame counter/stats visible in many of the demos at http://www.babylonjs.com/

 

Thanks in advance,

Karpo

[GameMonetize]

Hello!

 

1. Your object should not be too complex to render. You have to determine where the performance is drained (collisions should be a better candidate)

2. You can use an height map: https://github.com/BabylonJS/Babylon.js/wiki/16-Height-map

3. Yes it could be if the object is too complex. You should consider using an invisible impostor (simplified) for the collisions

4. Here is the code (useful for the point 1:):

stats.innerHTML = "Total vertices: " + scene.getTotalVertices() + "<br>"                    + "Active vertices: " + scene.getActiveVertices() + "<br>"                    + "Active particles: " + scene.getActiveParticles() + "<br><br><br>"                    + "Frame duration: " + scene.getLastFrameDuration() + " ms<br><br>"                    + "<i>Evaluate Active Meshes duration:</i> " + scene.getEvaluateActiveMeshesDuration() + " ms<br>"                    + "<i>Render Targets duration:</i> " + scene.getRenderTargetsDuration() + " ms<br>"                    + "<i>Particles duration:</i> " + scene.getParticlesDuration() + " ms<br>"                    + "<i>Sprites duration:</i> " + scene.getSpritesDuration() + " ms<br>"                    + "<i>Render duration:</i> " + scene.getRenderDuration() + " ms";

[karpo]

Great. Thanks. I couldn't come up with any other invisible impostor than cube with texture alpha set to 0. Does the job.

 

One way to do the FPS counter (from Stackoverflow) in renderLoop is:

 

 

var lastCalledTime;

var fps;

 

        if(!lastCalledTime) {

             lastCalledTime = new Date().getTime();

             fps = 0;

             return;

          }

          delta = (new Date().getTime() - lastCalledTime)/1000;

          lastCalledTime = new Date().getTime();

          fps = 1/delta;

          console.log(fps); // use it in an overlay etc.

[GameMonetize]

Babylon.js do that for you:) 

BABYLON.Tools.GetFps().toFixed() + " fps";

[Alex10]

 

Babylon.js do that for you:) 

BABYLON.Tools.GetFps().toFixed() + " fps";

 

 

In Babylon.js 2.2 version doesn't work for some reason.

BABYLON.Tools.GetFps().toFixed()

Full code:

var scene = createScene();loader.onFinish = function (tasks) {    engine.runRenderLoop(function () {        scene.render();        stats.innerHTML = "<div class='stat'>Total vertices: " + scene.getTotalVertices() + "<br>"                          + "FPS: <b>" + BABYLON.Tools.GetFps().toFixed() + "</b><BR>"                          + "View Range: "+ camera.maxZ +"</div>";    });};

[GameMonetize]

Yep this was a breaking changes in 2.0.0:

https://github.com/BabylonJS/Babylon.js/releases/tag/v2.0.0

 

• Tools.GetFps() and Tools.GetDeltaTime() are now functions hosted by the engine:engine.getFps() and engine.getDeltaTime() deltakosh)

[Wingnut]

Hi Karpo!

 

 

I couldn't come up with any other invisible impostor than cube with texture alpha set to 0. Does the job.

 

You could use box.visibility = 0, too.  If you are willing to use a box for imposter, then you should think about the object's natural bounding box, which is a nice collider/intersecter, and a good time.

 

Start by setting mesh.showBoundingBox = true;  ...take a look at it.  I bet it somewhat resembles your box imposter. 

 

Take a little drive down Bounding Boulevard at our cool docs site, if you wish.  We have quite a nice selection of tools to work-with bounding boxes and bounding spheres.  In this playground demo, you can see that we have "loose" bounding box, "tight" bounding box, and good old mesh-to-mesh intersections available.  I am not sure how "tight" you will be able to get... with a complex shape, though.

 

Keep in mind that these use Babylon's built-in collision and intersection system.  We also have a physics engine plugin system... and Oimo.js and Cannon.js physics engines are currently supported (they use DIFFERENT imposters).  Both engines are active in the playground.

 

Party on!