A texture problem in a large Threejs scene.

If you want to create a big scene in 3D, remember not to use a lot of 4k textures.


There are two main problems:

  • Graphics card memory and RAM are occupied.
  • Texture weight

Have you ever wondered why AAA computer games usually don't have 4k textures?

Because each 4k texture takes about 90 Mb of graphics card memory. Suppose you have 60 textures, you will automatically have 5400 Mb of used GPU memory. If a user has weaker hardware, the RAM will be partially or completely used. At worst, the application will crash. Remember that most cell phone users don't have as much RAM, not to mention a graphics card. You should remember about users with weaker configurations.

You can address this issue in several ways: Minimize the number of textures by combining several into one 4k texture. For example, instead of 60 textures, combine them into 10. Thanks to this, we only need 900 Mb, not 5.4 Gb Reduce all textures to 2k or 1k, if you don't need good quality Think which models in your scene need better quality and which less. We can see some models from a distance so we don't need high-resolution textures. For small models, a little texture is enough. Test 1k or 512x512. If you need a 4k texture because you want it to look nice, think whether you need to load all models at the start. It is better to load the textures that are necessary at the beginning and load the rest later as a user approaches the model. Add additional options, e.g. choosing texture quality for a user, before loading the scene.

  • High = 4k textures with the information "video card with 6-8 GB memory required"

  • Medium = 2k textures with the information "graphics card with 2-4 GB memory required"

  • Low = 1k textures with the information "graphics card with 1-2Gb of memory required"

Okay, let's go over the texture weight.

Users don't like a page loading longer than a few seconds. From my experience, I know that a large number of textures can take up a lot of space. In the beginning, when I was making my first 3D models, a user had to download about 100 MB for an application to work. Very MUCH, right? I had to change it…. I have tried various solutions. With greater or lesser success. You know how it is, I've had my ups and downs. Sometimes something helps, and sometimes everything breaks ... I experimented. I recommend it, it is worth it because it finally worked

I exported all textures in Blender in JPG format. Then, I reduced the Quality to 90%. It turned out it helped! It is true that only a little, because the weight decreased by 40MB, so a user had to download 60MB, but the first effects could already be noticed. Fortunately, one fine day Blender got an update that allowed me to export the texture in WEBP format. I set Quality 90% on Textura and it turned out that this time we managed to reduce the weight to 18 MB !!! Great success! This size is very good for a large scene with 4K textures.

Summary: If you reduce the texture size from 4k to 2k / 1k and use WEBP instead of JPG, you will see an improvement in texture loading speed. Additionally, you will notice that the load on the graphics card and RAM will decrease.

Test it and let us know which option has helped you!