Jump to content

Speed optimisation and Octree


Tyrahell
 Share

Recommended Posts

Regards everyone,

 

Im working on a scene with 6000 vertices and im around 7/8 FPS wich is too slow to manipulate my object (i need translation, rotation, zoom and picking on it).

 

Based on this tutorial : https://github.com/BabylonJS/Babylon.js/wiki/Optimizing-performances-with-octrees ,

 

and this proof of concept (2M vertices @ 15 FPS, yummy ): http://www.babylonjs.com/?OCTREE ,

 

im trying to accelerate the rendering of my scene with the use of the octree.

 

I have try to cast createOrUpdateSelectionOctree(capacity, maxDepth); with various parameter varying from (64,2) to (38400,1200) without any noticable effect on my scene fluidity.

 

Maybe something wrong with my way to use octree ?

 

Here's my code :

function createSceneTuto(engine) {    var MesPolygones = load_geometry(); // 6000 meshes inside a static array    // SCENE    var scene = new BABYLON.Scene(engine);    scene.clearColor = new BABYLON.Color3(0, 0.7, 1);    // LIGHT    var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(10, 10, -30), scene);	    var light0 = new BABYLON.HemisphericLight("Hemi0", new BABYLON.Vector3(0, 1, 0), scene);    light0.diffuse = new BABYLON.Color3(1, 1, 1);    light0.specular = new BABYLON.Color3(1, 1, 1);    light0.groundColor = new BABYLON.Color3(0, 0, 0);    // CAMERA    var camera = new BABYLON.FreeCamera("FreeCamera", new BABYLON.Vector3(0, 1, -15), scene);	    // MATERIAL    var material = new BABYLON.StandardMaterial("texture1", scene);    material.alpha = 1;    material.diffuseColor = new BABYLON.Color3(0.3, 0.5, 0.7);    material.wireframe = false;    material.backFaceCulling = false;	    // MESHES    var nbFaces = MesPolygones.length / 12;    for( var IDFace= 0; IDFace < nbFaces; IDFace++ )    { 	var square = drawSquare( scene, MesPolygones, IDFace );	square.material = material;    }	    // OCTREE    var capacity = 64;    var maxDepth = 2;    var octree = scene.createOrUpdateSelectionOctree(capacity, maxDepth);	    // PICKING    window.addEventListener("click", function (evt)     {	  // We try to pick an object	  var pickResult = scene.pick(evt.clientX, evt.clientY);	   	  if ( pickResult.hit ) 	  {		material.wireframe = !material.wireframe;	  }     });        return scene;}

Optional question : do you know a good book, ebook, ressources or formation for babylon.js other than official tutorial and documentation ?

Link to comment
Share on other sites

Leave the default values for octree.
 
var octree = scene.createOrUpdateSelectionOctree();
 
If you have a ground, you can also optimize it:
 
ground.subdivide(5);ground.createOrUpdateSubmeshesOctree(64, 2);
You can also optimize the model dynamics and also if you enable collision.
 
for(var i = 0; i < mesh.length; i++) {    octree.dynamicContent.push(mesh[i]);    mesh.useOctreeForCollisions = true;}
Link to comment
Share on other sites

Thank you for the answer dad72, after several try of implementing octree the result is stil very slow and i begin to tough that the proof of concept is based on the instance+clone concept.

My scene cannot use instance or clone because every mesh are different.

 

Here's my octree implementation :

function createSceneTuto(engine) {        var MesPolygones = load_geometry();        // SCENE        var scene = new BABYLON.Scene(engine);	scene.clearColor = new BABYLON.Color3(0, 0.7, 1);         // LIGHT        var light  = new BABYLON.PointLight("Omni", new BABYLON.Vector3(10, 10, -30), scene);	var light0 = new BABYLON.HemisphericLight("Hemi0", new BABYLON.Vector3(0, 1, 0), scene);	light0.diffuse     = new BABYLON.Color3( 1, 1, 1 );	light0.specular    = new BABYLON.Color3( 1, 1, 1 );	light0.groundColor = new BABYLON.Color3( 0, 0, 0 );         // CAMERA        var camera = new BABYLON.FreeCamera("FreeCamera", new BABYLON.Vector3(0, 1, -15), scene);			// MATERIAL	var material = new BABYLON.StandardMaterial("texture1", scene);	material.alpha = 1;	material.diffuseColor = new BABYLON.Color3(0.3, 0.5, 0.7);	material.wireframe = false;	material.backFaceCulling = false;	          // MESHES  	 	 var nbFaces = MesPolygones.length / 12;	 var mesh=[];	 var square;	for( var IDFace= 0; IDFace < nbFaces; IDFace++ )	{ 		square = drawSquare( scene, MesPolygones, IDFace );		square.material = material;		mesh.push( square );	}		// OCTREE	var capacity = 64;//64	var maxDepth = 2;//2	var octree = scene.createOrUpdateSelectionOctree();		for(var i = 0; i < mesh.length; i++) 	{		octree.dynamicContent.push(mesh[i]);		mesh.useOctreeForCollisions = true;	}		// POST PROCESS	var postProcess = new BABYLON.FxaaPostProcess("fxaa", 1.0, null, null, engine, true);		// MOUSE EVENT	window.addEventListener("click", function (evt) 	{	   var pickResult = scene.pick(evt.clientX, evt.clientY);	   	   if ( pickResult.hit ) 	   {			material.wireframe = !material.wireframe;	   }	});        return scene;}

My drawSquare function :

function drawSquare( scene, MesPolygones, IDFace ){  	var square = new BABYLON.Mesh('square', scene);	var positions = [];	var indices   = [];	var normals   = [];  	var nbVertices = MesPolygones.length / 3;	var normaleValue = normaleface( MesPolygones, IDFace );		//Set 4 points	for( var j= 0; j < 4; j++ )	{		positions.push( MesPolygones[IDFace*12+j*3+0] );		positions.push( MesPolygones[IDFace*12+j*3+1] );		positions.push( MesPolygones[IDFace*12+j*3+2] );				normals.push(normaleValue[0]);		normals.push(normaleValue[1]);		normals.push(normaleValue[2]);	}	indices.push(0);	indices.push(1);	indices.push(2);	indices.push(0);	indices.push(2);	indices.push(3);	square.setVerticesData(positions, BABYLON.VertexBuffer.PositionKind);	square.setVerticesData(normals, BABYLON.VertexBuffer.NormalKind);	square.setIndices(indices);	return square;}

And my rendering loop :

window.onload = function(){    var canvas = document.getElementById("canvas");    // Check support    if ( !BABYLON.Engine.isSupported() ) 	{        window.alert('Browser not supported');    } 	else 	{		var stats = new Stats();		stats.setMode(0); // 0: fps, 1: ms		// Align top-left		stats.domElement.style.position = 'absolute';		stats.domElement.style.left = '0px';		stats.domElement.style.top = '0px';		document.body.appendChild( stats.domElement );        // Babylon        var engine = new BABYLON.Engine(canvas, true);        //Creating scene (in "scene_tuto.js")        scene = createSceneTuto(engine);        scene.activeCamera.attachControl(canvas);				        // Once the scene is loaded, just register a render loop to render it        engine.runRenderLoop(function () {			//stats.begin();            scene.render();			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";			//stats.end();        });        // Resize        window.addEventListener("resize", function () {            engine.resize();        });    } };

Q1 : Maybe something must be done in the rendering loop ? Can you see anything in my code explaining the lack of FPS ?

Q2 : In this demo : http://www.babylonjs.com/?INSTANCES you can switch in the lower pannel the hardware scaling, how can you do that ?

Q3 : Did someone know a good book, ebook, ressources or formation for babylon.js other than official tutorial and documentation ?

 

Regards, Tyrahell

Link to comment
Share on other sites

I do not see from calculates FPS in your loop.
 
try this:

 

engine.runRenderLoop(function () {
    scene.render();
    stats.innerHTML = BABYLON.Tools.GetFps().toFixed() + " FPS <br /> Active = " + scene._activeMeshes.length;
});

 

For your Q3. no there is no book. only the tutorial and the official wiki. Babylon is very promising but still young. I'm sure in some year books on babylon emerge.

Link to comment
Share on other sites

Variation between  [7;10] FPS for a 4000 polygon scene, too slow, need some speed up

 

Here is a little scene I created from some busts of famous people:

 

Beethoven and friends

 

The scene has 160,048 polygons(tris) made from 80,104 vertices (according to Blender and testing in the babylon sandbox).

 

I get FPS of 25-30 on my desktop PC - Intel I5 (original), NVidia GeForce GTX 650, output to a 23" Samsung monitor. Windows XP is OS.

 

Tyrahell: what FPS are you getting (red box at top left)?

 

cheers, gryff :)

Link to comment
Share on other sites

A stable 60FPS on your demo scene, not a hardware problem imo, i run an I7 with a Geforce GT 750M.

 

With that hardware, Tyra, I should hope not. But when tracking down a problem always best to start with the most obvious possibilty ;)

 

There is nothing special about my code - very simple stuff - so I don't think you will find any help there.

 

So now it is up to the coders on this forum to see if they can spot the problem. Good luck with it.

 

cheers, gryff :)

Link to comment
Share on other sites

@Deltakosh : thanks for the tips, i've modify my source but no effect on the fluidity with a full static octree, any tought ? have you received my MP ?

 

@gryff : thanks for your Beethoven scene sample, ive work all day on the BABYLON.SceneLoader() with your code and beet3.babylon model but im stuck on the MIME configuration of my apache server.

Ive added this .htaccess but without effect :

SetEnv PHP_VER 5# Remove files listingOptions -indexes# Errors documents. # The 404.php must be the 404 error document, but you can create a specific design with a file 404.html which will be displayed by the 404.php fileErrorDocument 404 /404.htmlAddType application/fx .fxAddType application/babylon .babylonAddType application/babylonmeshdata .babylonmeshdata

@dad72 : load_geometry() is a static array of 48K coordinates :

function load_geometry(){	var	MyGeometry = new Array('0.000000','-1.050034','-0.525000','1.000000','-1.050034','-0.525000','1.000000','-1.050034','-0.505189','0.000000','-1.050034','-0.505189','0.000000','-1.050034','-0.505189','1.000000','-1.050034','-0.505189','1.000000','-1.050034','-0.485377','0.000000','-1.050034','-0.485377','0.000000','-1.050034','-0.485377','1.000000','-1.050034','-0.485377','1.000000','-1.050034','-0.465566','0.000000','-1.050034','-0.465566','0.000000','-1.050034','-0.465566','1.000000','-1.050034','-0.465566','1.000000','-1.050034','-0.445755','0.000000','-1.050034','-0.445755','0.000000','-1.050034','-0.445755','1.000000','-1.050034','-0.445755','1.000000','-1.050034','-0.425943','0.000000','-1.050034','-0.425943','0.000000','-1.050034','-0.425943','1.000000','-1.050034','-0.425943','1.000000','-1.050034','-0.406132','0.000000','-1.050034','-0.406132','0.000000','-1.050034','-0.406132','1.000000','-1.050034','-0.406132','1.000000','-1.050034','-0.386321','0.000000','-1.050034','-0.386321','0.000000','-1.050034','-0.386321','1.000000','-1.050034','-0.386321','1.000000','-1.050034','-0.366509','0.000000','-1.050034','-0.366509','0.000000','-1.050034','-0.366509','1.000000','-1.050034','-0.366509','1.000000','-1.050034','-0.346698','0.000000','-1.050034','-0.346698','0.000000','-1.050034','-0.346698','1.000000','-1.050034','-0.346698','1.000000','-1.050034','-0.326887','0.000000','-1.050034','-0.326887','0.000000','-1.050034','-0.326887','1.000000','-1.050034','-0.326887','1.000000','-1.050034','-0.307075','0.000000','-1.050034','-0.307075','0.000000','-1.050034','-0.307075','1.000000','-1.050034','-0.307075','1.000000','-1.050034','-0.287264','0.000000','-1.050034','-0.287264','0.000000','-1.050034','-0.287264','1.000000','-1.050034','-0.287264','1.000000','-1.050034','-0.267453','0.000000','-1.050034','-0.267453','0.000000','-1.050034','-0.267453','1.000000','-1.050034','-0.267453','1.000000','-1.050034','-0.247642','0.000000','-1.050034','-0.247642','0.000000','-1.050034','-0.247642','1.000000','-1.050034','-0.247642','1.000000','-1.050034','-0.227830','0.000000','-1.050034','-0.227830','0.000000','-1.050034','-0.227830','1.000000','-1.050034','-0.227830','1.000000','-1.050034','-0.208019','0.000000','-1.050034','-0.208019','0.000000','-1.050034','-0.208019','1.000000','-1.050034','-0.208019','1.000000','-1.050034','-0.188208','0.000000','-1.050034','-0.188208','0.000000','-1.050034','-0.188208','1.000000','-1.050034','-0.188208','1.000000','-1.050034','-0.168396','0.000000','-1.050034','-0.168396','0.000000','-1.050034','-0.168396','1.000000','-1.050034','-0.168396','1.000000','-1.050034','-0.148585','0.000000','-1.050034','-0.148585','0.000000','-1.050034','-0.148585','1.000000','-1.050034','-0.148585','1.000000','-1.050034','-0.128774','0.000000','-1.050034','-0.128774','0.000000','-1.050034','-0.128774','1.000000','-1.050034','-0.128774','1.000000','-1.050034','-0.108962','0.000000','-1.050034','-0.108962','0.000000','-1.050034','-0.108962','1.000000','-1.050034','-0.108962','1.000000','-1.050034','-0.089151','0.000000','-1.050034','-0.089151','0.000000','-1.050034','-0.089151','1.000000','-1.050034','-0.089151','1.000000','-1.050034','-0.069340','0.000000','-1.050034','-0.069340','0.000000','-1.050034','-0.069340','1.000000','-1.050034','-0.069340','1.000000','-1.050034','-0.049528','0.000000','-1.050034','-0.049528','0.000000','-1.050034','-0.049528','1.000000','-1.050034','-0.049528','1.000000','-1.050034','-0.029717','0.000000','-1.050034','-0.029717','0.000000','-1.050034','-0.029717','1.000000','-1.050034','-0.029717','1.000000','-1.050034','-0.009906','0.000000','-1.050034','-0.009906','0.000000','-1.050034','-0.009906','1.000000','-1.050034','-0.009906','1.000000','-1.050034','0.009906','0.000000','-1.050034','0.009906','0.000000','-1.050034','0.009906','1.000000','-1.050034','0.009906','1.000000','-1.050034','0.029717','0.000000','-1.050034','0.029717','0.000000','-1.050034','0.029717','1.000000','-1.050034','0.029717','1.000000','-1.050034','0.049528','0.000000','-1.050034','0.049528','0.000000','-1.050034','0.049528','1.000000','-1.050034','0.049528','1.000000','-1.050034','0.069340','0.000000','-1.050034','0.069340','0.000000','-1.050034','0.069340','1.000000','-1.050034','0.069340','1.000000','-1.050034','0.089151','0.000000','-1.050034','0.089151','0.000000','-1.050034','0.089151','1.000000','-1.050034','0.089151','1.000000','-1.050034','0.108962','0.000000','-1.050034','0.108962','0.000000','-1.050034','0.108962','1.000000','-1.050034','0.108962','1.000000','-1.050034','0.128774','0.000000','-1.050034','0.128774','0.000000','-1.050034','0.128774','1.000000','-1.050034','0.128774','1.000000','-1.050034','0.148585','0.000000','-1.050034','0.148585','0.000000','-1.050034','0.148585','1.000000','-1.050034','0.148585','1.000000','-1.050034','0.168396','0.000000','-1.050034','0.168396',---------CUT---------CUT---------CUT---------CUT---------CUT---------CUT---------CUT---------CUT---------CUT---------CUT---------CUT'6.000000','-0.287534','0.475000','7.000000','-0.287534','0.475000','7.000000','-0.267743','0.475000','6.000000','-0.267743','0.475000','6.000000','-0.267743','0.475000','7.000000','-0.267743','0.475000','7.000000','-0.247951','0.475000','6.000000','-0.247951','0.475000','6.000000','-0.247951','0.475000','7.000000','-0.247951','0.475000','7.000000','-0.228159','0.475000','6.000000','-0.228159','0.475000','6.000000','-0.228159','0.475000','7.000000','-0.228159','0.475000','7.000000','-0.208368','0.475000','6.000000','-0.208368','0.475000','6.000000','-0.208368','0.475000','7.000000','-0.208368','0.475000','7.000000','-0.188576','0.475000','6.000000','-0.188576','0.475000','6.000000','-0.188576','0.475000','7.000000','-0.188576','0.475000','7.000000','-0.168784','0.475000','6.000000','-0.168784','0.475000','6.000000','-0.168784','0.475000','7.000000','-0.168784','0.475000','7.000000','-0.148993','0.475000','6.000000','-0.148993','0.475000','6.000000','-0.148993','0.475000','7.000000','-0.148993','0.475000','7.000000','-0.129201','0.475000','6.000000','-0.129201','0.475000','6.000000','-0.129201','0.475000','7.000000','-0.129201','0.475000','7.000000','-0.109409','0.475000','6.000000','-0.109409','0.475000','6.000000','-0.109409','0.475000','7.000000','-0.109409','0.475000','7.000000','-0.089618','0.475000','6.000000','-0.089618','0.475000','6.000000','-0.089618','0.475000','7.000000','-0.089618','0.475000','7.000000','-0.069826','0.475000','6.000000','-0.069826','0.475000','6.000000','-0.069826','0.475000','7.000000','-0.069826','0.475000','7.000000','-0.050034','0.475000','6.000000','-0.050034','0.475000');return MyGeometry;}

@all : if you want to monitor my scene during the week-end :P you can check here : http://www.strains.fr/bridge.html

 

CU on monday and thanks for your kindness

 

++Tyra :P

Link to comment
Share on other sites

You have a problem in the signature of  setVerticesData(kind, data, updatable) that is different between version 1.11 and 1.12 and +.
 
square.setVerticesData(positions, BABYLON.VertexBuffer.PositionKind);
square.setVerticesData(normals, BABYLON.VertexBuffer.NormalKind);
 
square.setVerticesData(BABYLON.VertexBuffer.PositionKind, positions, true);
square.setVerticesData(BABYLON.VertexBuffer.NormalKind, normals, true);
 
And on your scene, I am a 60 fps

 

I think that this will best work for you.
 
 

Link to comment
Share on other sites

You have a problem in the signature of  setVerticesData(kind, data, updatable) that is different between version 1.11 and 1.12 and +.

 

square.setVerticesData(positions, BABYLON.VertexBuffer.PositionKind);

square.setVerticesData(normals, BABYLON.VertexBuffer.NormalKind);

 

square.setVerticesData(BABYLON.VertexBuffer.PositionKind, positions, true);

square.setVerticesData(BABYLON.VertexBuffer.NormalKind, normals, true);

 

And on your scene, I am a 60 fps

 

I think that this will best work for you.

 

 

 

Hi dad72, thanks for the tips, ive updated my code but im still around 10 FPS...

I have uploaded my new code on : www.strains.fr/bridge.html , are you still at 60FPS ?

Did someone have any tips about the apache server configuration about the babylon MIME type ?

 

Regards, Tyra :)

Link to comment
Share on other sites

I am a 17 fps Tyrahell
I think that the problem must come from this: (too much data, too much of calculated to do, This should significantly slow your scene)
 
load_geometry() and drawSquare()
 
why your geometry is not directly a .babylon that you import directly :
 

BABYLON.SceneLoader.ImportMesh("", "./geometrie/", geometrieMesh.babylon", scene, function (newMeshes, particleSystems, skeletons) {		newMeshes[0].isPickable = true;	newMeshes[0].checkCollisions = true;		newMeshes[0].rotationQuaternion = null;	newMeshes[0].position = new BABYLON.Vector3(0, 0, 0);	newMeshes[0].rotation = new BABYLON.Vector3(0, 0, 0);	newMeshes[0].scaling = new BABYLON.Vector3(0.05, 0.05, 0.05);});

Your object model, export you it directly in .babylon (with 3ds max or blender or Online Converter)

Link to comment
Share on other sites

Tyra, I get 8-9 fps.

 

I'm not a very good coder, but I'm curious about your "draw square" function. The basic representation of a surface used in 3D is a triangle. How do the squares/quads you are drawing get converted to tris?

 

Or am I missing something?

 

Good luck, gryff :)

Link to comment
Share on other sites

this "console.log(currentfps);" is a bad idea :) the console is slowing down all your code

 

Well, even without the output the scene feel really laggy...

Is there a chance that if i import my scene with the babylon loader the rendering will be faster ?

 

Regards Tyrahell

Link to comment
Share on other sites

I'm sure that it'll be better.  ;)  

 

Ok lets try to output my geometry to a .babylon file and to load it with BABYLON.SceneLoader.Load() but my problem is that im stuck to the MIME configuration of my apache server.

Ive added this .htaccess but without effect ( based on http://www.hypercosm.com/support/howto6.html ) :

SetEnv PHP_VER 5# Remove files listingOptions -indexes# Errors documents. # The 404.php must be the 404 error document, but you can create a specific design with a file 404.html which will be displayed by the 404.php fileErrorDocument 404 /404.htmlAddType application/fx fxAddType application/babylon babylonAddType application/babylonmeshdata babylonmeshdata

This tutorial talk about the IIS server configutation, but im under Apache and dont find any relative information about MIME configuration for Babylon.js file under Apache Server :

 

http://blogs.msdn.com/b/davrous/archive/2013/11/19/using-webgl-to-create-games-for-the-windows-store.aspx

 

Furthermore, i have uploaded the Beethoven example of Gryff to my web server and i get this error : "TypeError: array is undefined babylon.js:1"

reflow : 0.1ms fonction BABYLON.Engine.prototype.resize, babylon.js ligne 1reflow : 0.26ms fonction BABYLON.Engine.prototype.resize, babylon.js ligne 1reflow : 0.12ms fonction BABYLON.Engine.prototype.resize, babylon.js ligne 1reflow : 0.11ms fonction <anonyme>, beethoven.html ligne 101Une fin de valeur était attendue, mais « display » a été trouvé.  Erreur d'analyse de la valeur pour « height ».  Déclaration abandonnée. beethoven.html:33Une fin de valeur était attendue, mais « display » a été trouvé.  Erreur d'analyse de la valeur pour « height ».  Déclaration abandonnée. beethoven.html:75GET http://www.strains.fr/beet3.babylon [HTTP/1.1 200 OK 547ms]TypeError: array is undefined babylon.js:1

Any suggestion about Apache server MIME configuration to allow .babylon file ?

Link to comment
Share on other sites

OK, i got it, the .htaccess file is correct this way for .babylon MIME with Apache Server :

SetEnv PHP_VER 5# Remove files listingOptions -indexes# Errors documents. # The 404.php must be the 404 error document, but you can create a specific design with a file 404.html which will be displayed by the 404.php fileErrorDocument 404 /404.htmlAddType application/fx fxAddType application/babylon babylonAddType application/babylonmeshdata babylonmeshdata

The loading problem was due to my Babylon.js file, ive updated to the babylon.1.12-beta.js and it works B)

 

http://www.strains.fr/beethoven.html

 

Now lets try to input my geometry at the .Babylon format.

 

Thanks everyone, stay tune :D

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