I have a set of 10 large images, 20000x10000 that show different layers of a floorplan for a commercial building.
The goal is to have these images rendered on top of each other, and you are supposed to be able to pan/zoom while also being able to toggle the different layers on/off
Loading the images upfront will not work well since the RAM usage goes crazy.
So I’ve come up with a tile system, where I split the images into tiles. Each tile is also resized and split up into different zoom levels depending on how far away the camera is.
The issue I’ve ran into now instead is that every time i try to load a texture that comes into view, the FPS drops dramatically.
Does anyone have any tips for solving this problem?
Traditional image formats (PNG, JPEG, WebP, AVIF, …) need to be decompressed before uploading to the GPU, and then the full decompressed image is uploaded and stored. It’s the decompression and uploading that cause frames to drop when the image is uploaded. Unless you upload the image explicitly with initTexture, the upload happens the first time the image is rendered in the scene.
Using ImageBitmapLoader can take the decompression step off the main thread, reducing the dropped frames somewhat.
A more effective option is to used specialized formats that remain compressed on the GPU, like KTX2. See this guide and the KTX-Software tool. With KTX the texture remains compressed on the GPU, and the upload happens much faster.
4 Likes
@donmccurdy Thank you for the tips, will try both suggestions 
So I ended up using KTX2.
Seems to be working great, so great in fact that I did not even have to tile the images into different zoom levels since ram/gpu-memory usage is super low!
Thanks again for the great tip!
1 Like