Jump to content

Beginner questions


karpo
 Share

Recommended Posts

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

Link to comment
Share on other sites

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";
Link to comment
Share on other sites

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.
Link to comment
Share on other sites

  • 1 year later...

 

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>";    });};
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...