Is there a way to await WebGLRenderer.initTexture()?

Questions
,
1

I’m using some pretty big textures in my projects and try to find ways to reliable preload them in order to not have any stuttering during the experience. I noticed that even when awaiting the necessary loading, I seemed to get a bunch of white frames which, according to the profiler, were waiting for the GPU to decode the texture.

After googling around I’ve found the WebGLRenderer.initTexture() method, which manually runs the decode to avoid the stuttering later on and which works fine, the problem is that it seems to be an asynchronous method with no ways of reliable knowing when the decoding ended.

Even when using it at the start of my application in my preloading function where I await the textures loading and the other necessary assets, the function finishes before the decoding is complete, therefore still showing some “non-ready” frames.

Is there any way to wait for WebGLRenderer.initTexture() reliably?

2

The underlying texImage2D() call of initTexture() is definitely not async. So when it is finished, the decode is finished, too.

1 Like
3

Your are right! I made a quick sandbox to test this in a smaller scenario and it behaves as you describe: three-preload-inittexture - CodeSandbox

I realized my mistake - I was preloading my textures in a loop, but the loops themselves were not being awaited - just the function itself. Had to wraps the looping operations in a await Promise.all() and now all works great and without stuttering. Cheers!

3 Likes