How to ensure all texture images are loaded memory/cache before the scene is displayed?

Questions
, , ,
1

So my ThreeJS project loads a lot of image textures and places them onto various plane 3DObjects. The images are maybe 500Kb in size each and it loads about 500+ or so. For the textures that are immediately in front of us when the scene is loaded, they get cached and allows our controls to move fairly smoothly right off the bat. For any texture that is behind us, if we spin the camera around to face them, we get like 5-8 seconds where the scene seems frozen because the computer is trying to cache those textures. Is there a technique we can use to ensure all textures are fully cached so that we don’t get that kind of freeze the first time we face those textures?

I could just place all textures in front of the camera as hidden and move them into position, that may work, but maybe there is another way to do it without that hack. Thank you.

2

Are you using actual compressed textures or image formats like PNG/JPG etc? The latter may have a good compression in file size, but will be uncompressed Uint8 on GPU, the upload of resources can cause such lags, but especially heavy if the texture resolutions aren’t power of 2, since they need to be resized then before.

Beyond that there would be advanced techniques such as tile LOD loading, if the upload specifically is the issue for many being fast rendered partial uploads could balance it too.

1 Like
3

Yes, using JPG/PNG images. Ok, I will look into your suggestions to learn about those techniques. Thank you!