Jump to content

performance problems


Borjan
 Share

Recommended Posts

I've written a code that displays 3D graphs. It works fine with a limited number of nodes and edges. However, with 400 nodes and some 600 edges, the scene is rather slow. The panning is extremely slow. My assumption is that I'm doing something very wrong (Although I'm experienced programmer, I've started programming javascript and babylon.js yesterday and ave no experince with 3D ...).

The code follows here (attaching files seems not to work at this moment: error code -200)

var canvas = document.getElementById('renderCanvas');
scene = new BABYLON.Scene(engine);
var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 600, new BABYLON.Vector3(0, 0, 0), scene);
camera.attachControl(canvas, false);
var light = new BABYLON.HemisphericLight("hemi", new BABYLON.Vector3(0, 1, 0), scene);
var material1 = new BABYLON.StandardMaterial("mat", scene);
for (var key in displayModel.Applications) {
    if (displayModel.Applications.hasOwnProperty(key)) {
        var sphere = BABYLON.Mesh.CreateSphere(displayModel.Applications[key].Name, 16, 4, scene);
        sphere.position.x = displayModel.Applications[key].X;
        sphere.position.y = displayModel.Applications[key].Y;
        sphere.position.z = displayModel.Applications[key].Z;
        sphere.material = material1;
    }
}
material1.diffuseColor = new BABYLON.Color3(1.5, 0, 0);
for (var key in displayModel.Services) {
    if (displayModel.Services.hasOwnProperty(key)) {
        var obj = BABYLON.Mesh.CreateSphere(displayModel.Services[key].Name, 16, 4, scene);
        obj.position.x = displayModel.Services[key].X;
        obj.position.y = displayModel.Services[key].Y;
        obj.position.z = displayModel.Services[key].Z;
        var pId = displayModel.Services[key].ProviderId;
        var myLines = BABYLON.Mesh.CreateLines("a", [
            new BABYLON.Vector3(obj.position.x, obj.position.y, obj.position.z),
            new BABYLON.Vector3(displayModel.Applications[pId].X, displayModel.Applications[pId].Y, displayModel.Applications[pId].Z),
        ], scene);
        myLines.color = new BABYLON.Color3(1,0.2,0.1);
    }
}
for (var key in displayModel.ConsumingRelations) {
    if (displayModel.ConsumingRelations.hasOwnProperty(key)) {
        var idA = displayModel.ConsumingRelations[key].ConsumerId;
        var idS = displayModel.ConsumingRelations[key].ServiceId;
        var myLines = BABYLON.Mesh.CreateLines("a", [
            new BABYLON.Vector3(displayModel.Services[idS].X, displayModel.Services[idS].Y, displayModel.Services[idS].Z),
            new BABYLON.Vector3(displayModel.Applications[idA].X, displayModel.Applications[idA].Y, displayModel.Applications[idA].Z),
        ], scene);
    }
}
return scene;

Link to comment
Share on other sites

if a node is a sphere, you have 400, so you have 400 draw calls.  You are not assigning a material, but if you did, as long as it is the same material, then you could create 1 sphere.  399 of them could be instances.

If edges are LinesMesh, then you are creating 600 of them.  A LinesMesh can have more than one line.  accumulate all the point then use the MeshBuilder.createLineSystem().

Link to comment
Share on other sites

35 minutes ago, JCPalmer said:

if a node is a sphere, you have 400, so you have 400 draw calls.  You are not assigning a material, but if you did, as long as it is the same material, then you could create 1 sphere.  399 of them could be instances.

If edges are LinesMesh, then you are creating 600 of them.  A LinesMesh can have more than one line.  accumulate all the point then use the MeshBuilder.createLineSystem().

Thanks, I was looking for an advice like yours - will look into examples of instances. Maybe you could suggest me one that is easy to follow? LinesMesh would be the next step.

Actually, I've made some improvements in the code by reusing vectors (see the code in my other post: http://www.html5gamedevs.com/topic/31228-error-no-camera-defined-on-scenedispose/).

Moreover, I believe that the performance would definitely be good enough when I find the way how to dispose everything that needs to be disposed when reloading the underlying model (retrieved as JSON by an API call). Every time I invoke API, the browser's memory goes up by 100MB and the CPU usage goes insane. I've looked in the solution MOLVWR  that disposes and loads scenes without loosing memory and killing CPU (http://gleborgne.github.io/molvwr/#cyanocobalamin) but that is too complex for me to use as an example. 

Link to comment
Share on other sites

The performance has improved by the following changes:

  • all unneeded meshes removed before loading a new data, while keeping the scene and the camera: var meshes = scene.meshes; while (meshes.length) { meshes[0].dispose(true);}
  • drawing of spheres optimized by reducing the number of segments
  • createInstance used wherever possible.

This appears sufficient. Yet, I need to find some time to check MeshBuilder.createLineSystem(), suggested by JCPalmer 

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...