performance problems

[Borjan]

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;

[GameMonetize]

Hello !

it is tough to help without a repro. Do you mind creating one on playground.babylonjs.com ?

[JCPalmer]

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

[Borjan]

1 hour ago, Deltakosh said:

Hello !

it is tough to help without a repro. Do you mind creating one on playground.babylonjs.com ?

I'll try to do it tomorrow - have never done that before ...

[Borjan]

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. 

[Borjan]

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 

[Borislav]

If you are using Google Chrome 60 Beta or 61 Dev.

 

That means: the problem is the browser.