Jump to content

long loading time

Félix Flores

Recommended Posts

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:


I import the scene with:

if (!BABYLON.Engine.isSupported()){
		console.log("Motor no soportado");
	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
		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
		// Wait for textures and shaders to be ready
		scene.executeWhenReady(function () {
			// Quitamos la imagen del cargador cuando termine el proceso de carga


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

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

			// Once the scene is loaded, just register a render loop to render it
			engine.runRenderLoop(function() {
//				console.log(engine.getFps());
	}, function (progress) {
		if(progress.total == 0)
		$(".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:


in the folder:

here you can see the project.

I hope you can help me.

Thanks and regards.

Link to comment
Share on other sites

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.


Link to comment
Share on other sites

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


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.

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.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...