# Texture preloading

**URL:** <https://forum.babylonjs.com/t/texture-preloading/48571>\
**Category:** Questions\
**Created:** [March 6, 2024, 5:13pm UTC](https://forum.babylonjs.com/t/texture-preloading/48571 "2024-03-06T17:13:48Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![MarianG](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mariang/32/138_2.png) [@MarianG](https://forum.babylonjs.com/u/MarianG)\
**Post date:** [March 6, 2024, 5:13pm UTC](https://forum.babylonjs.com/t/texture-preloading/48571/1 "2024-03-06T17:13:48Z")

</div>

Hey boys & girls,  
new year, … same me 🙂

I read a lot of topics about texture preloading and workers in the last few hours and I think I’m close to what I want but still something missing.  
So the idea is simple, first load the scene with some low quality textures and later update them. And I tried to do this in a lot of ways, … 2 of them are pretty close to what I want, but still a little bit of fps drops when the texture is updated. And I’m curious if this is the maximum we can do here or there are still anything else I can do.

So, first I made this straight forward example ( actualy after few attempts :)))

> **[Babylon.js Playground](https://playground.babylonjs.com/?v=debug#WGZLGJ%239995)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

Later I read about workers and I made this

> **[Babylon.js Playground](https://playground.babylonjs.com/?v=debug#WGZLGJ%239999)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

where I tried to follow @Evgeni_Popov advice from [here](https://forum.babylonjs.com/t/throttle-processing-power-bandwidth-to-keep-stable-fps-during-loading/20580/15) but for some reasons this is struggling to follow.

Between them I tried other options, like sent all of them together to and from worker, or create the babylon texture directly in worker, or try to updateURL of existing texture with the result from worker, but without success.

Any insight is welcome!

---

<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:** [March 8, 2024, 10:38pm UTC](https://forum.babylonjs.com/t/texture-preloading/48571/2 "2024-03-08T22:38:14Z")

</div>

this is exactly how the msft\_lod is currently working IIRC cc @bghgary

---

<div class="post-metadata">

**Author:** ![bghgary](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/bghgary/32/48532_2.png) [@bghgary](https://forum.babylonjs.com/u/bghgary)\
**Post date:** [March 8, 2024, 11:06pm UTC](https://forum.babylonjs.com/t/texture-preloading/48571/3 "2024-03-08T23:06:49Z")

</div>

MSFT\_lod as in [this example](https://playground.babylonjs.com/#ARN6TJ#5) from [the doc](https://doc.babylonjs.com/features/featuresDeepDive/importers/glTF/progressiveglTFLoad) also has FPS drop when textures are updated.

There might be a way to upload textures without dropping frames, but I don’t know if anyone has tried. One of the problems is decoding the image that is being uploaded as that blocks the JS thread.

If you take a profile of the example I mentioned, you will see slow frames caused by green `ImageDecode` blocks which on my machine is 20-30ms, which is already longer than a frame by itself. Add the rest of what’s happening with JS and it will be bigger than a few frames.

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/a/2/a21688adabd001f15e00fffc21e54565f1876b37.png)

If it is indeed possible to load images off the main thread in a worker like @Evgeni_Popov mentioned in the referenced thread and if it’s possible to upload the result to a webgl texture off-thread, then it would be possible to not cause hitching during load.

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [March 9, 2024, 11:30am UTC](https://forum.babylonjs.com/t/texture-preloading/48571/4 "2024-03-09T11:30:56Z")

</div>

It’s not possible to use webgl commands on a context in two (or more) different threads. Maybe this post has some ideas for you:

> **[How to load images in the background with no jank](https://webglfundamentals.org/webgl/lessons/webgl-qna-how-to-load-images-in-the-background-with-no-jank.html)**
>
> How to load images in the background with no jank
