Curiosity about glTF GPU memory footprint

Lately I’ve been working with the THREE.js glTFLoader and I was curious about the memory footprint it has on the GPU.

Precisely what I don’t clearly understand is how come a binary file that is 869B (simple cube) has a memory footprint of more than 200mb? I suppose this is not something related to the THREE.js, but I would like to know why is such a thing happening? I am using latest Chrome browser on latest MacOS but I see this happening in other browsers and platforms as well.

Here is the link I am using:
https://cx20.github.io/gltf-test/examples/threejs/index.html?model=Box&scale=1

Before loading
22

After loading

Related:

I don’t think the memory footprint is related to glTF. I see this in all WebGL applications.

Besides, it’s better to use the Memory Panel in Chrome DevTools for monitoring, see https://github.com/mrdoob/three.js/issues/17424#issuecomment-528028121

Thanks for sharing the issue. As I said I don’t think this is THREE.js related, I see this in everything that loads glTF on web platform.

It doesn’t matter if I use Chrome Task Manager or MacOS native Activity Monitor, footprint is the same. As for Memory Panel in Chrome DevTools I was not aware that it is calculating the memory used by GPU as well.

Even if you don’t use glTF but any other 3D format you will see this footprint. It’s it important to highlight this, otherwise users might get confused.

The memory cost of geometry will be pretty much the same on the GPU as in the glTF file. PNG and JPG textures, which could be embedded in any model format, often increase in size ~8x once uploaded to the GPU, because they must be decompressed. The environment map used in most viewers is another potentially large texture, or 6 textures for a cubemap, which takes up some more space. Whether there’s some initial WebGL memory overhead other than those things, I don’t know.

Hi, I have the same problem. Have you solved this memory problem?

Memory consumption always depends on what is allocating memory in your application. If you can share an example with more details we may be able to help.

The most common source of this problem is textures. PNG and JPEG textures always consume more GPU memory than their actual file sizes. To check this for a glTF file:

npm install --global @gltf-transform/cli

gltf-transform inspect model.glb

Example output, note the size vs. gpuSize columns:

TEXTURES
────────────────────────────────────────────

# name uri slots instances mimeType resolution size gpuSize¹
0 FlightHelmet_Materials_RubberWoodMat_Normal.png normalTexture 2 image/png 2048x2048 3.17 MB 21.33 MB
1 FlightHelmet_Materials_RubberWoodMat_OcclusionRoughMetal.png occlusionTexture, metallicRoughnessTexture 4 image/png 2048x2048 3.63 MB 21.33 MB
2 FlightHelmet_Materials_RubberWoodMat_BaseColor.png baseColorTexture 2 image/png 2048x2048 3.43 MB 21.33 MB
3 FlightHelmet_Materials_GlassPlasticMat_Normal.png normalTexture 1 image/png 2048x2048 2.53 MB 21.33 MB
4 FlightHelmet_Materials_GlassPlasticMat_OcclusionRoughMetal.png occlusionTexture, metallicRoughnessTexture 2 image/png 2048x2048 3.52 MB 21.33 MB
5 FlightHelmet_Materials_GlassPlasticMat_BaseColor.png baseColorTexture 1 image/png 2048x2048 2.2 MB 21.33 MB
6 FlightHelmet_Materials_MetalPartsMat_Normal.png normalTexture 1 image/png 2048x2048 3.12 MB 21.33 MB
7 FlightHelmet_Materials_MetalPartsMat_OcclusionRoughMetal.png occlusionTexture, metallicRoughnessTexture 2 image/png 2048x2048 2.84 MB 21.33 MB
8 FlightHelmet_Materials_MetalPartsMat_BaseColor.png baseColorTexture 1 image/png 2048x2048 2.56 MB 21.33 MB
9 FlightHelmet_Materials_LeatherPartsMat_Normal.png normalTexture 1 image/png 2048x2048 5.41 MB 21.33 MB
10 FlightHelmet_Materials_LeatherPartsMat_OcclusionRoughMetal.png occlusionTexture, metallicRoughnessTexture 2 image/png 2048x2048 4.17 MB 21.33 MB
11 FlightHelmet_Materials_LeatherPartsMat_BaseColor.png baseColorTexture 1 image/png 2048x2048 5.22 MB 21.33 MB
12 FlightHelmet_Materials_LensesMat_Normal.png normalTexture 1 image/png 1024x1024 5.44 KB 5.33 MB
13 FlightHelmet_Materials_LensesMat_OcclusionRoughMetal.png occlusionTexture, metallicRoughnessTexture 2 image/png 1024x1024 587.5 KB 5.33 MB
14 FlightHelmet_Materials_LensesMat_BaseColor.png baseColorTexture 1 image/png 1024x1024 679.98 KB 5.33 MB

¹ gpuSize estimates minimum GPU memory allocation. Older devices may require
additional memory for GPU compression formats.


If textures are indeed the source of the memory problems, you’ll need to either reduce the texture resolution or convert the textures to GPU compression formats like KTX.

I don’t know how to release the GPU memory. I have several scenes, I need to check the scene and load different models. My solution is to remove and dispose the models in the last scene, then load the new models. The problem is after using dispose function, the CPU and GPU memory is not released. The result is when the scene is more and more, the fps is lower, the memory is increasing, then the browser will crash.

See How to dispose of objects | three.js for details on cleaning up the scene. If memory is not released then probably something has not been disposed as needed.