Best practices for a project suposed to run on the web but containing plenty of photo image textures

Godot Version:

4.6

Question

I am wanting to create a 3D photo exhibition in Godot for a web magazine project. I have begun by testing the pipeline to see what are the limitations of the format.

On blender, I have created an array of images laid out with geometry nodes and exported the entire package as a single glb.

My initial test contains only a FPS downloaded from asset library, and one test space containing 40 images. I compressed the images to JPEG to about 800kb each. On import the glb creates a material for each image, but I get no compression settings available. On the FileSystem I can see a png file is created per JPEG imported with the asset.

When building with default settings for webgl, the build is more than 200mb, so it cannot be run on itch. A test export to windows is still to be tested, but Im imagining that as a downloadable there would be no issue.

I am wondering, if my intention is to eventually have around 150 image textures on this virtual space, I probably would want to either load the images in a different way, or manage to get them properly compressed, something that probably I am messing things up, as the total size of the project is much larger than all the images I have right now on the main scene.

Can someone suggest ideas for how could I improve the pipeline to try and minimise the size of the exported project, and perhaps considerations about optimization for loading a bunch of images for webgl¿?

I am considering the possibility of uploading the images online and then using Http requests for loading them, maybe as the player moves around, instead of trying to package them all into the project directly. For the moment the intention was just to try the most basic approach.

Thanks for the help!

That’s a lot of data, to download and to display.
What’s the resolution of your images?
I would limit here to 1024x1024 (or max. 2048x2048) and would prefer webp over jpg or png.. Ensure to generate MipMaps and compress them in VRAM. Maybe I would offer two versions, one lower resolution and a higher one. Keep your VRAM usage in view, I’m a little bit impressed, that your Intel graphic can handle your prototype. How much VRAM does your GPU have, and how much is already in use?

I would consider to split the gallery in different zones, to load/unload them in chunks. A lot of users will exit early, and don’t have to download all the data. The room design in a way, that not too many images are visible at the same time.

2 Likes

JPEG/PNG compression does not matter, Godot imports images as a different more gpu ready compression format rather than targeting smaller disk-size. You can change some of these import settings, but using smaller images is your best option. You can check the imported size and format of images inside the .godot/imported folder.

Probably a good idea, you will have to read into runtime image loading of course.

2 Likes