Search the Community

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;