Hi,
I am facing a long delay while loading the GLB file to the scene in the HTML page. the Glb I have bought from the online 3d model and size is 105 Mb. When kept the same file to my external server. It’s taking more than 5 mins to load.
Can we reduce the loading time of glb files?. Below is my current glb file loading code.
BABYLON.SceneLoader.ImportMesh( “”
“downloads/”,
“myfile.glb”,
scene,
…
might be helpful to start by also timing from a local server on the pc. That way you can back out the server / transmission time by subtraction.
Even in localhost its delay but external server too much delay facing. even delay can reduce to localhost, its also be helpful.
This is impossible to know why without a repro 
could you create a playground which highlights the long loading ?
@bghgary might also have tricks to workaround the issue ?
Repro would be best. Sharing the model privately with us would also work if you can get permission from the creator. Barring that, can you get a performance profile?
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- <meta charset="UTF-8"> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Babylon.js sample code</title>
<!-- Babylon.js -->
<!-- <script src="https://preview.babylonjs.com/viewer/babylon.viewer.js"></script> -->
<script src="https://cdn.babylonjs.com/viewer/babylon.viewer.js "></script>
<script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
<script src="https://preview.babylonjs.com/ammo.js"></script>
<script src="https://preview.babylonjs.com/cannon.js"></script>
<script src="https://preview.babylonjs.com/Oimo.js"></script>
<script src="https://preview.babylonjs.com/libktx.js"></script>
<script src="https://preview.babylonjs.com/earcut.min.js"></script>
<script src="../BabylonjsPlugins/dist/preview release/babylon.js"></script>
<script src="../BabylonjsPlugins/dist/inspector/babylon.inspector.bundle.js"></script>
<script src="../BabylonjsPlugins/dist/materialsLibrary/babylonjs.materials.min.js"></script>
<script src="../BabylonjsPlugins/dist/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js"></script>
<script src="../BabylonjsPlugins/dist/postProcessesLibrary/babylonjs.postProcess.min.js"></script>
<script src="../BabylonjsPlugins/dist/loaders/babylonjs.loaders.js"></script>
<script src="../BabylonjsPlugins/dist/serializers/babylonjs.serializers.min.js"></script>
<script src="../BabylonjsPlugins/dist/gui/babylon.gui.min.js"></script>
<style>
html, body {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#renderCanvas {
width: 100%;
height: 100%;
touch-action: none;
}
</style>
</head>
<canvas id="renderCanvas"></canvas>
<script>
var canvas = document.getElementById("renderCanvas");
var engine = null;
var scene = null;
var sceneToRender = null;
var createDefaultEngine = function() { return new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true }); };
var delayCreateScene = function () {
var scene = new BABYLON.Scene(engine);
var camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5,90), scene);
camera.attachControl(canvas, false);
BABYLON.SceneLoader.ImportMesh(
"",
"downloads/",
"kitchen.glb",
scene,
function (meshes) {
scene.createDefaultCameraOrLight(true, true, true);
shapex = meshes[7];
blockx = meshes[1];
wallA = meshes[2];
wallB = meshes[3]; // 3
wallC = meshes[4];
Floor = meshes[5];
var flr = scene.getMeshByID("node1223");
var roof = scene.getMeshByID("node1234");
var obs1 = scene.getMeshByID("node1207");
var obs2 = scene.getMeshByID("node1208");
// flr.position.x = 10;
scene.registerBeforeRender(function(){
roof.dispose();
obs1.dispose();
obs2.dispose();
// blockx.dispose();
});
scene.createDefaultEnvironment();
scene.activeCamera.alpha = Math.PI / 2;
});
return scene;
};
var engine;
try {
engine = createDefaultEngine();
} catch(e) {
console.log("the available createEngine function failed. Creating the default engine instead");
engine = createDefaultEngine();
}
if (!engine) throw 'engine should not be null.';
scene = delayCreateScene();;
sceneToRender = scene
engine.runRenderLoop(function () {
if (sceneToRender) {
sceneToRender.render();
}
});
// Resize
window.addEventListener("resize", function () {
engine.resize();
});
</script>
Sorry, this is not a repro. We can’t debug the issue if we don’t have the kitchen.glb asset that is being referenced.
ok noted, the Below link is ok. I don’t how and where to put code. to share
This model on my machine takes about 2 seconds to load for me. Are you taking the download time into account? Do you want to decrease the size of the model?
My worry is that for user its should quick loading when they browse my web page. Any hardware configuration required ?
It looks like the majority of the time is downloading the model. A 105MB will be slow depending on the network speed.
This GLB is full of PNGs (~45MB) for color textures which can be reduced quite drastically if you convert them to JPGs. The geometry is quite large also (~59MB). You can look at using Draco compression, gltfpack, RapidCompact, or something similar to reduce the size.
Thanks, Let me check with this. i guess it will work.
HI, I have compressed and the new GLB file is 45 Mb. In the local server, it’s **loading in 2 sec 
**. In the external server its taking time but not like before. as well i took a new trial hosting space and seen the loading time changed ( if internet connection is good in new server taking 8 secs to load).
As per my experience right hosting is also an important key while loading from web server. Can you please suggest any particular hardware required or and reference of the service provider.
Unfortunately, I don’t have much experience with hosting. Maybe others on the forum can help.
8 seconds is not too bad for a 45 mb file, that’s 6 sec’s transmission time.
The most important things, which you control, are the connection speed of the server & it’s location on the network. Location will determine the number of hops any given client will need to do. Do you have a geographic location where anyone is coming from? Picking a host location which is not hostile is good.
For a global rollout, you might try to use a CDN, which is a bunch of mirror sites. Never done myself.
One thing I see is you have a number of js files coming in. Do you really need both Cannon & Oimo? These files are not big, but why if you are getting them if you are not doing physics? Verify every single js is required.
Also, all your babylon files are coming from your server. This not only increases load on your server, but if the client is far away, the CDN versions of babylon would probably be closer.
@amark @JCPalmer two other considerations for maxing perf:
does your scene need to be in GLB format? Yes, it compresses it down from gLTF, but it also embeds textures that could be individual downloads/files. Most browsers won’t cache a 45MB file but will happily cache 45 1MB textures. If you expect a lot of repeat visitors GLB might be suboptimal.
Can you apply gzip/brotli or some other compression scheme that the browser can automatically decompress, on top of GLB, to further reduce the file size?
1/ The op says they bought the file, so contained the scope of things to do. Even 45 mb seems wildly too much, given the link they provided. 105 mb just for that seems insane. Think the bigger problem is the overkill probably of both # of triangles & texture sizes. But that’s what happens when you get geometry off of others.
I got some musical instruments from Blendswap. The keyboard was 2.8 million triangles. Fortunately, a lot of it was due to subsurface modifiers, which divided meshes to insane resolutions. Getting rid of them is easy & had an amazing drop to about 160K triangles.
I still had 5 weeks of getting it production ready. In addition to hand removal of un-neccessary geometry, the materials were way too many, and not PBR friendly for export. The keys were also represented as 2 meshes, white & black keys, so it was not playable.
In the end, I got it down to 5,560 triangles, with 4 groups of key instances. Conclusion, arts have very little clue about performance. Getting stuff off them is high quality, and definitely recommended, but plan on spending time editing things down. This squish down, is just a bandaid.
2/ gzip only works on text files I think, but multiple layers of compression tend to no improve things much unless they achieve their results a different way.