Texture loading blocks thread

Hello everyone,

I am facing the following problem. I play an animation via animationgroup and at the same time I load a new texture. The result is that the animation lags for a short time. How can I avoid this? My idea is to load the texture inside of a web worker but how am I able to attach the texture to the scene if the worker can’t access the dom.

Do you have an idea?

Best

EDIT:

I created a web worker that fetches the image and returns a blob. That works fine but unfortunately the animation stops for a short time. So I think that it is not related to loading the image but calling new Texture().

Unfortunately we cannot do anything about that issue. Javascript is mono threaded and this is a shame

As you can only create webgl resources on the main thread we are doomed :frowning:

What you could do is creating the texture object (new BABYLON.Texture(...)) at start with an empty texture and only update the texture data later on when you have loaded the file. You could even create a RGBA texture instead of a regular texture, as it could be easier to update. See how @billchen0412 has done it here:

https://playground.babylonjs.com/#YDO1F#664

The only difference is that you would not get the pixel data from readPixels but from loading the texture file instead.

3 Likes

Thanks, very helpful.

Applying the texture to the material also caused a short lag but I handled it by loading the image while the animation runs and apply the texture directly after the animation finishes. With a smooth transition the result looks not too bad. Thanks!