# SceneLoader.ImportMeshAsync is blocking all tabs in the browser

**URL:** <https://forum.babylonjs.com/t/sceneloader-importmeshasync-is-blocking-all-tabs-in-the-browser/24327>\
**Category:** Questions\
**Created:** [October 5, 2021, 10:38pm UTC](https://forum.babylonjs.com/t/sceneloader-importmeshasync-is-blocking-all-tabs-in-the-browser/24327 "2021-10-05T22:38:15Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [October 5, 2021, 10:38pm UTC](https://forum.babylonjs.com/t/sceneloader-importmeshasync-is-blocking-all-tabs-in-the-browser/24327/1 "2021-10-05T22:38:15Z")

</div>

Hello!  
Why is this happening? When I’m loading a bigger model (200 MB) the browser even shows a “Page is not responing” alert. The blocking starts after the file gets loaded. I believe when the model gets created in the webgl context the overhead is too big and it’s blocking the whole browser. Can this be somehow managed?  
Thank you!  
R.

---

<div class="post-metadata">

**Author:** ![msDestiny14](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/msdestiny14/32/9572_2.png) [@msDestiny14](https://forum.babylonjs.com/u/msDestiny14)\
**Post date:** [October 5, 2021, 10:39pm UTC](https://forum.babylonjs.com/t/sceneloader-importmeshasync-is-blocking-all-tabs-in-the-browser/24327/2 "2021-10-05T22:39:17Z")

</div>

Hey Roland can you link the playground? 🙂  
(If it’s possible)

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [October 5, 2021, 10:46pm UTC](https://forum.babylonjs.com/t/sceneloader-importmeshasync-is-blocking-all-tabs-in-the-browser/24327/3 "2021-10-05T22:46:00Z")

</div>

You could try to use babylon on a worker thread with offscreen canvas.

A lot of things can be serial during load and a huge model might take a long time to parse for instance. As @msDestiny14 mentionned a repro would help.

---

<div class="post-metadata">

**Author:** ![msDestiny14](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/msdestiny14/32/9572_2.png) [@msDestiny14](https://forum.babylonjs.com/u/msDestiny14)\
**Post date:** [October 5, 2021, 10:48pm UTC](https://forum.babylonjs.com/t/sceneloader-importmeshasync-is-blocking-all-tabs-in-the-browser/24327/4 "2021-10-05T22:48:11Z")

</div>

Don’t forget the handy “Loading” image feedback you should give the user while you wait. 😂

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [October 5, 2021, 11:28pm UTC](https://forum.babylonjs.com/t/sceneloader-importmeshasync-is-blocking-all-tabs-in-the-browser/24327/5 "2021-10-05T23:28:43Z")

</div>

Yes, I’m doing in with a cool particle effect in a webworker and offscreen canvas 😃 but it gets blocked too. And the CSS animations stops as well. The whole browser becomes unresponsive. I can’t even change the tabs while it’s parsing/creating (whatever is does). This is happening with smaller models (30MB) too, however the blocking period is much shorter but it totally disrupts the particle loader effect and the css animations. ☹

I’ll create a PG.

Thanks!

---

<div class="post-metadata">

**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\
**Post date:** [October 6, 2021, 12:42am UTC](https://forum.babylonjs.com/t/sceneloader-importmeshasync-is-blocking-all-tabs-in-the-browser/24327/6 "2021-10-06T00:42:47Z")

</div>

The progressive load page might be of some help too? 😃

> **[Progressively Load .glTF Files | Babylon.js Documentation](https://doc.babylonjs.com/divingDeeper/importers/progressiveglTFLoad)**
>
> Learn about progressively loading .glTF files in Babylon.js.

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [October 6, 2021, 7:17am UTC](https://forum.babylonjs.com/t/sceneloader-importmeshasync-is-blocking-all-tabs-in-the-browser/24327/7 "2021-10-06T07:17:14Z")

</div>

Hello! 🙂 Thank you for your suggestion! This unfortunatelly doesn’t solve the problem because the problem starts after the model is fully loaded. The loading phase is smooth. I’ve already created a PG and shared it with @msDestiny14 in a private message. I couldn’t share the model file in a public post. ☹

---

<div class="post-metadata">

**Author:** ![jeremy-coleman](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jeremy-coleman/32/15493_2.png) [@jeremy-coleman](https://forum.babylonjs.com/u/jeremy-coleman)\
**Post date:** [October 6, 2021, 7:07pm UTC](https://forum.babylonjs.com/t/sceneloader-importmeshasync-is-blocking-all-tabs-in-the-browser/24327/8 "2021-10-06T19:07:44Z")

</div>

Maybe related? Windows/chromium angle issue with some gl rgb thing causing super jank after load. [SRGB8\_ALPHA8 blocks the main thread · Issue #22631 · mrdoob/three.js · GitHub](https://github.com/mrdoob/three.js/issues/22631)

It seems like using a webgl1 or webgpu canvas could check for this issue specifically, maybe worth a try

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [October 6, 2021, 7:13pm UTC](https://forum.babylonjs.com/t/sceneloader-importmeshasync-is-blocking-all-tabs-in-the-browser/24327/9 "2021-10-06T19:13:08Z")

</div>

Hello!  
Thanks for sharing this link! I’ve just discovered that removing all the textures helped the situation and it loads smoothly. So it seems to be heading that way! I was curious and tried to load the model in three.js and it was like 5x worse than in BJS and it didn’t load properly at the end.

---

<div class="post-metadata">

**Author:** ![jeremy-coleman](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jeremy-coleman/32/15493_2.png) [@jeremy-coleman](https://forum.babylonjs.com/u/jeremy-coleman)\
**Post date:** [November 2, 2021, 11:51am UTC](https://forum.babylonjs.com/t/sceneloader-importmeshasync-is-blocking-all-tabs-in-the-browser/24327/10 "2021-11-02T11:51:04Z")

</div>

@roland toji posted a fix in the threejs issue, which is to use gl.texStorage2D to load the textures. Do u think its something babylon should swap in?

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [November 2, 2021, 1:52pm UTC](https://forum.babylonjs.com/t/sceneloader-importmeshasync-is-blocking-all-tabs-in-the-browser/24327/11 "2021-11-02T13:52:42Z")

</div>

Hello @jeremy-coleman !  
I am quite suffering from this “issue”. When loading the main 200 MB glb file in my project which has around 150 MB of textures the whole browser with all tabs is blocked out for 15-20 seconds (running on a 5Gig/i9). If there is a chance to make it better I will welcome it for sure!  
Thank you!

---

<div class="post-metadata">

**Author:** ![msDestiny14](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/msdestiny14/32/9572_2.png) [@msDestiny14](https://forum.babylonjs.com/u/msDestiny14)\
**Post date:** [November 2, 2021, 2:06pm UTC](https://forum.babylonjs.com/t/sceneloader-importmeshasync-is-blocking-all-tabs-in-the-browser/24327/12 "2021-11-02T14:06:16Z")

</div>

Also as a tiny follow up to this. I tested it with Roland on my machine and didn’t get the same blocking as he did. 🤔

It did take a while to load. Maybe 30-40 seconds. But I was able to tab between the many chrome tabs I had open.

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [November 2, 2021, 2:17pm UTC](https://forum.babylonjs.com/t/sceneloader-importmeshasync-is-blocking-all-tabs-in-the-browser/24327/13 "2021-11-02T14:17:55Z")

</div>

Lucky you! 🙂

---

<div class="post-metadata">

**Author:** ![jeremy-coleman](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jeremy-coleman/32/15493_2.png) [@jeremy-coleman](https://forum.babylonjs.com/u/jeremy-coleman)\
**Post date:** [November 2, 2021, 2:27pm UTC](https://forum.babylonjs.com/t/sceneloader-importmeshasync-is-blocking-all-tabs-in-the-browser/24327/14 "2021-11-02T14:27:27Z")

</div>

@msDestiny14 are you on windows?

---

<div class="post-metadata">

**Author:** ![msDestiny14](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/msdestiny14/32/9572_2.png) [@msDestiny14](https://forum.babylonjs.com/u/msDestiny14)\
**Post date:** [November 2, 2021, 2:29pm UTC](https://forum.babylonjs.com/t/sceneloader-importmeshasync-is-blocking-all-tabs-in-the-browser/24327/15 "2021-11-02T14:29:49Z")

</div>

Yep.

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [November 2, 2021, 2:34pm UTC](https://forum.babylonjs.com/t/sceneloader-importmeshasync-is-blocking-all-tabs-in-the-browser/24327/16 "2021-11-02T14:34:04Z")

</div>

Interesting is, that I’ve tested it on my notebook and it’s the same. It’s blocking the whole browser, Chrome latest. Both my PC and desktop runs on Win10 and on a 3080 GPU. Maybe the GPUs are causing this?

Edit: one runs on Intel, other on AMD

---

<div class="post-metadata">

**Author:** ![jeremy-coleman](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jeremy-coleman/32/15493_2.png) [@jeremy-coleman](https://forum.babylonjs.com/u/jeremy-coleman)\
**Post date:** [November 2, 2021, 2:39pm UTC](https://forum.babylonjs.com/t/sceneloader-importmeshasync-is-blocking-all-tabs-in-the-browser/24327/17 "2021-11-02T14:39:11Z")

</div>

since you aren’t loading the textures directly , its harder to tell if its the srgb thing. Can you first try to force webgl1 and/or WebGPU and see if it stays slow (thats the fastest way to check for the srgb issue) ? But since you’re importing from GLTF, that’ll be the place to check next

---

<div class="post-metadata">

**Author:** ![jeremy-coleman](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jeremy-coleman/32/15493_2.png) [@jeremy-coleman](https://forum.babylonjs.com/u/jeremy-coleman)\
**Post date:** [November 2, 2021, 3:48pm UTC](https://forum.babylonjs.com/t/sceneloader-importmeshasync-is-blocking-all-tabs-in-the-browser/24327/18 "2021-11-02T15:48:04Z")

</div>

@roland can u check this and see if it help your problem?

I expected this was the case , but wasnt sure so i had to check first. The babylon GLTF loader is using srgb , so changing engine may not actually help you any.

here is an extension using srgb for pbr materials. may or may not apply idk.  
.[Babylon.js/MSFT\_sRGBFactors.ts at master · BabylonJS/Babylon.js · GitHub](https://github.com/BabylonJS/Babylon.js/blob/master/loaders/src/glTF/2.0/Extensions/MSFT_sRGBFactors.ts) .

and more importantly  
.[Babylon.js/glTFFileLoader.ts at master · BabylonJS/Babylon.js · GitHub](https://github.com/BabylonJS/Babylon.js/blob/master/loaders/src/glTF/glTFFileLoader.ts#L243)

the default gltf loader has useSRGBuffers set to true by default. Try setting useSRGBuffers to false.

Also, maybe helpful for context. (from the model-viewer issue)  
you can change the version from 1.8 to 1.9 to see the difference. [https://codepen.io/citylights/pen/qBXRwvX](https://codepen.io/citylights/pen/qBXRwvX) .

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [November 5, 2021, 6:53am UTC](https://forum.babylonjs.com/t/sceneloader-importmeshasync-is-blocking-all-tabs-in-the-browser/24327/19 "2021-11-05T06:53:01Z")

</div>

Hello!  
I can confirm it’s a WebGL2 issue. I’ve tried all available modes on both Chrome and Chrome Canary. WebGL2 makes both browsers unresponsive. WebGL and WebGPU are working well.

---

<div class="post-metadata">

**Author:** ![jeremy-coleman](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jeremy-coleman/32/15493_2.png) [@jeremy-coleman](https://forum.babylonjs.com/u/jeremy-coleman)\
**Post date:** [November 5, 2021, 7:38am UTC](https://forum.babylonjs.com/t/sceneloader-importmeshasync-is-blocking-all-tabs-in-the-browser/24327/20 "2021-11-05T07:38:41Z")

</div>

I think adding this before you load the asset this should fix it.

```auto
BABYLON.SceneLoader.OnPluginActivatedObservable.add((loader) => {
    loader.useSRGBuffers && (loader.useSRGBuffers = false)
    }
)

```

[Next page](https://forum.babylonjs.com/t/sceneloader-importmeshasync-is-blocking-all-tabs-in-the-browser/24327.md?page=2)
