Curiosity about glTF GPU memory footprint

[fanna]

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

After loading

[Mugen87]

Related:

Issue: Don't you think,the memory of three.js is a little bit large?

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

[fanna]

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.

[Mugen87]

@fanna

I see this in everything that loads glTF on web platform.

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.

[donmccurdy]

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.

[liumu96]

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

[donmccurdy]

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.

[donmccurdy]

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.

[liumu96]

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.

[donmccurdy]

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.

[dllb]

That doesn’t seem to work anymore - is there another way?

[donmccurdy]

The tool @gltf-transform/cli v2.x is not compatible with Node.js v18+, because of limitations in the Squoosh library. You’ll need to either use an older version of Node.js, or upgrade to a glTF Transform v3.x prerelease:

npm install --global @gltf-transform/cli@next

[dllb]

Thanks!
After I installed it, I couldn’t run it in Windows PowerShell because:

So I tried to run it in a bat file, but it was closing immediately after printing the data.
So for anyone interested it worked only after I wrote in the bat file:

cmd /k gltf-transform inspect test.glb

(partial screenshot)

BTW, a “total” sum would be great.

[RahulAhire]

Use the Basisu tool to convert your jpg or png to ktx2 texture. That’s way more efficient

GitHub - HacksawStudios/basisu: Basis Universal encoder binaries

[Myth_Xenodo]

i have a non related question, where did you get that profile picture? I want that for some reason.