long loading time

[Félix Flores]

Hello again.

I continue develop a site with babylonjs, but I have a few problems.

I have a scene created with blender, I generate the babylon file, the scene has some textures, I converted the textures to a ktx format, with the script in the babylon page. You can see the page in:

http://entornomexicano.com/

I import the scene with:

if (!BABYLON.Engine.isSupported()){
		console.log("Motor no soportado");
		return;
	}
		
	canvas = document.getElementById("renderCanvas");
	engine = new BABYLON.Engine(canvas, true);

	// Asignamos los tipos de textura compimidos que se pueden usar
	var available = ['-astc.ktx', '-dxt.ktx', '-pvrtc.ktx', '-etc1.ktx', '-etc2.ktx'];
	var formatUsed = engine.setTextureFormatToUse(available);

	BABYLON.SceneLoader.Load(blendPath + "scene1/", "landScape.babylon", engine, function (newScene) {
		// asignamos la escena
		scene = newScene;

		// Creamos el entorno y las luces
		createSkybox("models/scene1/sky2.jpg");
		createWaterMesh("waterMesh", imgPath + "waterbump.png", new BABYLON.Vector3(0, -0.08, 0), 6, getMeshListToRender());
		createCamera(1, new BABYLON.Vector3(-0.23, 0.56,-2.73), new BABYLON.Vector3(0, 0, 0)); // arch camera
		createParticleSystem();
		createLights();
		createShadows();
		createVolumetricLightEffect();
		createActionsContollers();
	
		// Wait for textures and shaders to be ready
		scene.executeWhenReady(function () {
			// Quitamos la imagen del cargador cuando termine el proceso de carga
			$("#loaderPadre").remove();

    		scene.createOrUpdateSelectionOctree();

			// quitamos los calculos de los objetos para hacer mas eficiente la escena
			scene.meshes.forEach(function (mesh) {
				if(mesh.name.search("NO_") === -1)
					mesh.freezeWorldMatrix();
			});

			// Funcion para cuando se redimensiona la ventana
			$(window).on('resize', function() {
				engine.resize();
			});

			// Once the scene is loaded, just register a render loop to render it
			engine.runRenderLoop(function() {
//				console.log(engine.getFps());
				scene.render();
			});
			
		});
	}, function (progress) {
		if(progress.total == 0)
			return;
		$(".textoCarga").text( ((progress.loaded/progress.total)*100).toFixed(2) + "%");
	});

In the callback function I return the loadign progress, but in some devices the progres is too slow, and When I already have 100% the scene still takes time to show, maybe i have doing some wrong. Somebody know, What I can do for resolve that?

And other problem is the performance of the scene, I rremoved some elements and I have down the quality of the shadows, but the fps is 30, How I can increase the speed?

the complete code is in:

https://github.com/flelix/entorno-models.git

in the folder:

entorno-models/code/proyBabylon/entorno/

here you can see the project.

I hope you can help me.

Thanks and regards.

[Sebavan]

It is slow to load because your scene is pretty big (the network is mainly the bottleneck here). Once network step is over, all the materials still have to compile and the entire scene need to prepare the webgl context.

Concerning the speed, you can find a lot of topic in the forum for this. Reduce your poly count, try using instance, prevent overdraw... and all the usual one: 

 

BTW, the scene looks really good.

 

[Félix Flores]

Thanks for the answer, I ´m using instances, and for the models I reduced the resolution using mesh lab, for the others objects I'm using planes with textures.
maybe If I reduce the textures resolution.

 

[dbawel]

@Félix Flores-

It is always better to separate your textures, normal maps, etc. to no larger than the largest render size in pixels. Also, I always work in power of 2 textures, as your GPU will render power of 2 much faster than non power of 2. But if your FPS is fine, then this is not entirely necessary - although always good practice - especially for smartphones and GPU based devices. I'm sure you know, but for those who may not - power of two is 16X16px, 32X32px, 64X64px, 128X128px, 256X256px, 512X512px, 1024X1024px, etc. This is less GPU intensive and also helps optimize memory.

Also take a look at your garbage collection, as instancing varies by OS and browser, and I often find that cloning works in my favor if I have many, many instances which require animation. Consider if cloning might be a better solution - although cloning is generally better simply to allow flexability in animation and attributes such as textures and influencing elements such as shaders and lights. But this is all relative and extremely dependent on your specific meshes, their attributes, and the overall scene.

Keep in mind that memory usage varies dramatically between browsers.

DB