GLTF Model contains lots of Images as textures and is lagging. Any fix?

Copying in a full list of these textures:

TEXTURES
 ────────────────────────────────────────────
┌────┬───────────┬──────────────────────┬──────────────────┬───────────┬───────────┬────────────┬────────────┬───────────┐
│ #  │ name      │ uri                  │ slots            │ instances │ mimeType  │ resolution │ size       │ memSize   │
├────┼───────────┼──────────────────────┼──────────────────┼───────────┼───────────┼────────────┼────────────┼───────────┤
│ 0  │ sun       │ Images/sun.png       │ emissiveTexture  │ 1         │ image/png │ 4000x4000  │ 7.27 MB    │ 61.04 MB  │
├────┼───────────┼──────────────────────┼──────────────────┼───────────┼───────────┼────────────┼────────────┼───────────┤
│ 1  │ yessss    │ Images/yessss.png    │ occlusionTexture │ 1         │ image/png │ 4000x4000  │ 4.74 MB    │ 61.04 MB  │
├────┼───────────┼──────────────────────┼──────────────────┼───────────┼───────────┼────────────┼────────────┼───────────┤
│ 2  │ StefC     │ Images/StefC.png     │ baseColorTexture │ 1         │ image/png │ 8750x4167  │ 8.19 MB    │ 139.09 MB │
├────┼───────────┼──────────────────────┼──────────────────┼───────────┼───────────┼────────────┼────────────┼───────────┤
│ 3  │ stef      │ Images/stef.png      │ baseColorTexture │ 1         │ image/png │ 989x645    │ 15.49 KB   │ 2.43 MB   │
├────┼───────────┼──────────────────────┼──────────────────┼───────────┼───────────┼────────────┼────────────┼───────────┤
│ 4  │ JoL       │ Images/JoL.png       │ baseColorTexture │ 1         │ image/png │ 864x1224   │ 1.65 MB    │ 4.03 MB   │
├────┼───────────┼──────────────────────┼──────────────────┼───────────┼───────────┼────────────┼────────────┼───────────┤
│ 5  │ Jolin     │ Images/Jolin.png     │ baseColorTexture │ 1         │ image/png │ 989x645    │ 8.13 KB    │ 2.43 MB   │
├────┼───────────┼──────────────────────┼──────────────────┼───────────┼───────────┼────────────┼────────────┼───────────┤
│ 6  │ HannahR   │ Images/HannahR.png   │ baseColorTexture │ 1         │ image/png │ 4129x2335  │ 2.97 MB    │ 36.78 MB  │
├────┼───────────┼──────────────────────┼──────────────────┼───────────┼───────────┼────────────┼────────────┼───────────┤
│ 7  │ Hannah    │ Images/Hannah.png    │ baseColorTexture │ 1         │ image/png │ 989x645    │ 8.67 KB    │ 2.43 MB   │
├────┼───────────┼──────────────────────┼──────────────────┼───────────┼───────────┼────────────┼────────────┼───────────┤
│ 8  │ JuliaM    │ Images/JuliaM.png    │ baseColorTexture │ 1         │ image/png │ 1248x832   │ 467.18 KB  │ 3.96 MB   │
├────┼───────────┼──────────────────────┼──────────────────┼───────────┼───────────┼────────────┼────────────┼───────────┤
│ 9  │ julia     │ Images/julia.png     │ baseColorTexture │ 1         │ image/png │ 989x645    │ 10.39 KB   │ 2.43 MB   │
├────┼───────────┼──────────────────────┼──────────────────┼───────────┼───────────┼────────────┼────────────┼───────────┤
│ 10 │ aaron     │ Images/aaron.png     │ baseColorTexture │ 1         │ image/png │ 989x645    │ 12.21 KB   │ 2.43 MB   │
├────┼───────────┼──────────────────────┼──────────────────┼───────────┼───────────┼────────────┼────────────┼───────────┤
│ 11 │ BenT      │ Images/BenT.png      │ baseColorTexture │ 1         │ image/png │ 886x1247   │ 538.04 KB  │ 4.21 MB   │
├────┼───────────┼──────────────────────┼──────────────────┼───────────┼───────────┼────────────┼────────────┼───────────┤
│ 12 │ ben       │ Images/ben.png       │ baseColorTexture │ 1         │ image/png │ 989x645    │ 9.21 KB    │ 2.43 MB   │
├────┼───────────┼──────────────────────┼──────────────────┼───────────┼───────────┼────────────┼────────────┼───────────┤
│ 13 │ blankroll │ Images/blankroll.png │ baseColorTexture │ 1         │ image/png │ 1920x2880  │ 669.63 KB  │ 21.09 MB  │
├────┼───────────┼──────────────────────┼──────────────────┼───────────┼───────────┼────────────┼────────────┼───────────┤
│ 14 │ Elim      │ Images/Elim.png      │ baseColorTexture │ 1         │ image/png │ 989x645    │ 7.48 KB    │ 2.43 MB   │
├────┼───────────┼──────────────────────┼──────────────────┼───────────┼───────────┼────────────┼────────────┼───────────┤
│ 15 │ ElimY     │ Images/ElimY.png     │ baseColorTexture │ 1         │ image/png │ 2732x2048  │ 1.31 MB    │ 21.34 MB  │
├────┼───────────┼──────────────────────┼──────────────────┼───────────┼───────────┼────────────┼────────────┼───────────┤
│ 16 │ Georgia   │ Images/Georgia.png   │ baseColorTexture │ 1         │ image/png │ 989x645    │ 13.17 KB   │ 2.43 MB   │
├────┼───────────┼──────────────────────┼──────────────────┼───────────┼───────────┼────────────┼────────────┼───────────┤
│ 17 │ GeorgiaW  │ Images/GeorgiaW.png  │ baseColorTexture │ 1         │ image/png │ 2480x3121  │ 1.81 MB    │ 29.53 MB  │
├────┼───────────┼──────────────────────┼──────────────────┼───────────┼───────────┼────────────┼────────────┼───────────┤
│ 18 │ Hun       │ Images/Hun.png       │ baseColorTexture │ 1         │ image/png │ 989x645    │ 10.21 KB   │ 2.43 MB   │
├────┼───────────┼──────────────────────┼──────────────────┼───────────┼───────────┼────────────┼────────────┼───────────┤
│ 19 │ HunL      │ Images/HunL.png      │ baseColorTexture │ 1         │ image/png │ 2583x3601  │ 5.03 MB    │ 35.48 MB  │
├────┼───────────┼──────────────────────┼──────────────────┼───────────┼───────────┼────────────┼────────────┼───────────┤
│ 20 │ Jam       │ Images/Jam.png       │ baseColorTexture │ 1         │ image/png │ 989x645    │ 6.38 KB    │ 2.43 MB   │
├────┼───────────┼──────────────────────┼──────────────────┼───────────┼───────────┼────────────┼────────────┼───────────┤
│ 21 │ Jami      │ Images/Jami.png      │ baseColorTexture │ 1         │ image/png │ 3269x4898  │ 7.66 MB    │ 61.08 MB  │
├────┼───────────┼──────────────────────┼──────────────────┼───────────┼───────────┼────────────┼────────────┼───────────┤
│ 22 │ jamie2    │ Images/jamie2.png    │ baseColorTexture │ 1         │ image/png │ 989x645    │ 10.82 KB   │ 2.43 MB   │
├────┼───────────┼──────────────────────┼──────────────────┼───────────┼───────────┼────────────┼────────────┼───────────┤
│ 23 │ JennyQ    │ Images/JennyQ.png    │ baseColorTexture │ 1         │ image/png │ 2048x2048  │ 2.3 MB     │ 16 MB     │
├────┼───────────┼──────────────────────┼──────────────────┼───────────┼───────────┼────────────┼────────────┼───────────┤
│ 24 │ jenny     │ Images/jenny.png     │ baseColorTexture │ 1         │ image/png │ 989x645    │ 13.34 KB   │ 2.43 MB   │
├────┼───────────┼──────────────────────┼──────────────────┼───────────┼───────────┼────────────┼────────────┼───────────┤
│ 25 │ Jo        │ Images/Jo.png        │ baseColorTexture │ 1         │ image/png │ 989x645    │ 10.38 KB   │ 2.43 MB   │
├────┼───────────┼──────────────────────┼──────────────────┼───────────┼───────────┼────────────┼────────────┼───────────┤
│ 26 │ JoanneA   │ Images/JoanneA.png   │ baseColorTexture │ 1         │ image/png │ 3472x720   │ 4.1 MB     │ 9.54 MB   │
├────┼───────────┼──────────────────────┼──────────────────┼───────────┼───────────┼────────────┼────────────┼───────────┤
│ 27 │ Jun       │ Images/Jun.png       │ baseColorTexture │ 1         │ image/png │ 989x645    │ 13.79 KB   │ 2.43 MB   │
├────┼───────────┼──────────────────────┼──────────────────┼───────────┼───────────┼────────────┼────────────┼───────────┤
│ 28 │ JunHeeK   │ Images/JunHeeK.png   │ baseColorTexture │ 1         │ image/png │ 2902x2059  │ 2.18 MB    │ 22.79 MB  │
├────┼───────────┼──────────────────────┼──────────────────┼───────────┼───────────┼────────────┼────────────┼───────────┤
│ 29 │ Karina    │ Images/Karina.png    │ baseColorTexture │ 1         │ image/png │ 989x645    │ 8.17 KB    │ 2.43 MB   │
├────┼───────────┼──────────────────────┼──────────────────┼───────────┼───────────┼────────────┼────────────┼───────────┤
│ 30 │ KarinaS   │ Images/KarinaS.png   │ baseColorTexture │ 1         │ image/png │ 1000x1400  │ 2.32 MB    │ 5.34 MB   │
├────┼───────────┼──────────────────────┼──────────────────┼───────────┼───────────┼────────────┼────────────┼───────────┤
│ 31 │ Lan       │ Images/Lan.png       │ baseColorTexture │ 1         │ image/png │ 989x645    │ 9.75 KB    │ 2.43 MB   │
├────┼───────────┼──────────────────────┼──────────────────┼───────────┼───────────┼────────────┼────────────┼───────────┤
│ 32 │ Lauren    │ Images/Lauren.png    │ baseColorTexture │ 1         │ image/png │ 989x645    │ 12.77 KB   │ 2.43 MB   │
├────┼───────────┼──────────────────────┼──────────────────┼───────────┼───────────┼────────────┼────────────┼───────────┤
│ 33 │ LaurenM   │ Images/LaurenM.png   │ baseColorTexture │ 1         │ image/png │ 4080x2632  │ 6.95 MB    │ 40.96 MB  │
├────┼───────────┼──────────────────────┼──────────────────┼───────────┼───────────┼────────────┼────────────┼───────────┤
│ 34 │ LaurenT   │ Images/LaurenT.png   │ baseColorTexture │ 1         │ image/png │ 1433x1890  │ 4.54 MB    │ 10.33 MB  │
├────┼───────────┼──────────────────────┼──────────────────┼───────────┼───────────┼────────────┼────────────┼───────────┤
│ 35 │ LinsyA    │ Images/LinsyA.png    │ baseColorTexture │ 1         │ image/png │ 3765x2156  │ 4.66 MB    │ 30.97 MB  │
├────┼───────────┼──────────────────────┼──────────────────┼───────────┼───────────┼────────────┼────────────┼───────────┤
│ 36 │ linsy     │ Images/linsy.png     │ baseColorTexture │ 1         │ image/png │ 989x645    │ 16.65 KB   │ 2.43 MB   │
├────┼───────────┼──────────────────────┼──────────────────┼───────────┼───────────┼────────────┼────────────┼───────────┤
│ 37 │ Matildaa  │ Images/Matildaa.png  │ baseColorTexture │ 1         │ image/png │ 3000x1854  │ 1.55 MB    │ 21.22 MB  │
├────┼───────────┼──────────────────────┼──────────────────┼───────────┼───────────┼────────────┼────────────┼───────────┤
│ 38 │ matilda   │ Images/matilda.png   │ baseColorTexture │ 1         │ image/png │ 989x645    │ 11.08 KB   │ 2.43 MB   │
├────┼───────────┼──────────────────────┼──────────────────┼───────────┼───────────┼────────────┼────────────┼───────────┤
│ 39 │ Nat       │ Images/Nat.png       │ baseColorTexture │ 1         │ image/png │ 989x645    │ 8.13 KB    │ 2.43 MB   │
├────┼───────────┼──────────────────────┼──────────────────┼───────────┼───────────┼────────────┼────────────┼───────────┤
│ 40 │ NatN      │ Images/NatN.png      │ baseColorTexture │ 1         │ image/png │ 4961x3508  │ 1008.11 KB │ 66.39 MB  │
├────┼───────────┼──────────────────────┼──────────────────┼───────────┼───────────┼────────────┼────────────┼───────────┤
│ 41 │ NicoleB   │ Images/NicoleB.png   │ baseColorTexture │ 1         │ image/png │ 1760x706   │ 2.13 MB    │ 4.74 MB   │
├────┼───────────┼──────────────────────┼──────────────────┼───────────┼───────────┼────────────┼────────────┼───────────┤
│ 42 │ nicole    │ Images/nicole.png    │ baseColorTexture │ 1         │ image/png │ 989x645    │ 12.24 KB   │ 2.43 MB   │
├────┼───────────┼──────────────────────┼──────────────────┼───────────┼───────────┼────────────┼────────────┼───────────┤
│ 43 │ Ott       │ Images/Ott.png       │ baseColorTexture │ 1         │ image/png │ 989x645    │ 15.47 KB   │ 2.43 MB   │
├────┼───────────┼──────────────────────┼──────────────────┼───────────┼───────────┼────────────┼────────────┼───────────┤
│ 44 │ Ottof     │ Images/Ottof.png     │ baseColorTexture │ 1         │ image/png │ 1520x2150  │ 4.99 MB    │ 12.47 MB  │
├────┼───────────┼──────────────────────┼──────────────────┼───────────┼───────────┼────────────┼────────────┼───────────┤
│ 45 │ sue       │ Images/sue.png       │ baseColorTexture │ 1         │ image/png │ 989x645    │ 11.18 KB   │ 2.43 MB   │
├────┼───────────┼──────────────────────┼──────────────────┼───────────┼───────────┼────────────┼────────────┼───────────┤
│ 46 │ titlecard │ Images/titlecard.png │ baseColorTexture │ 1         │ image/png │ 1978x1290  │ 64.47 KB   │ 9.73 MB   │
├────┼───────────┼──────────────────────┼──────────────────┼───────────┼───────────┼────────────┼────────────┼───────────┤
│ 47 │ Yasmin    │ Images/Yasmin.png    │ baseColorTexture │ 1         │ image/png │ 989x645    │ 7.82 KB    │ 2.43 MB   │
├────┼───────────┼──────────────────────┼──────────────────┼───────────┼───────────┼────────────┼────────────┼───────────┤
│ 48 │ YasminH   │ Images/YasminH.png   │ baseColorTexture │ 1         │ image/png │ 1500x1000  │ 3.54 MB    │ 5.72 MB   │
└────┴───────────┴──────────────────────┴──────────────────┴───────────┴───────────┴────────────┴────────────┴───────────┘

Pay attention to the “resolution” and “memSize” columns… even if you re-compress the images to the ~15MB they were before Blender altered them, WebGL has to decompress them all completely before uploading to the GPU, so it’s really uploading hundreds of megabytes here. Unfortunately, even a 10kb PNG could be many megabytes after it is decompressed.

Since a lot of these textures are just text, the biggest thing you could do would be to replace the text rendering with something like https://github.com/Jam3/three-bmfont-text/ or Troika-3d-text: library for SDF text rendering. Trimming all of the images of text so that they don’t contain so much empty space would also help, but not as much.

2 Likes