Can I make my site load faster without deleting models?

Hello, I’m making a gaming room/portfolio site (it is my first attempt at something proper in Three.js). I made the models and everything in Blender except for a few models that I got off the internet. Exported it using .glb and imported into Three.js with what i thought were proper steps. I used Vite.js for the logical part of the set up. Everything works good it just loads a long time (I realize it is a big file I’m just asking if there is any other way).
I tried to go off the Bruno Simon 3d room, but also used a lot of other tutorials and/or discussions.
Link to the source code: GitHub - Tilan80/Portfolio_TevzIvanjko
Link to the a live version of the site: Vite App

Thank you for your answers. :slight_smile:

There are hundreds of ways to optimize a three.js website, from beginner to advanced.

Here’s a few:

  • use a decent mesh simplification utility to make those heavy models very light without visible distortion. The best I’ve ever used is ‘Quad Remesher’ by Exoside, it has a Blender addon too, and a trial period.

Use the following three.js render information to find out the various parameters at the render loop:

You’ll see a dramatic decrease in triangles after using the above utility.

  • Try to reduce the number of draw calls to as few as possible.
    For example join geometries together, (like the parts of a chair to a single mesh or even multiple objects that don’t move),

  • reduce the unnecessarily high resolution of textures, combine multiple textures to a single atlas, and several other methods.

BTW, your website is rendering too dark, calibrating your monitor with any hardware calibrator will help to see the colors properly. It might be a wrong setting in gamma too, or just the lighting.

1 Like

You can use various tools/techniques to compress meshes… on export you can use DRACO, or you can use pipelines like:

Gltf transform: GitHub - donmccurdy/glTF-Transform: glTF 2.0 SDK for JavaScript and TypeScript, on Web and Node.js.

gltfpack/meshopt: 📦 gltfpack | meshoptimizer

1 Like

Thank you so much I will try everything you said. :slight_smile:

1 Like

that model is over 90mb. as a rule of thumb, a model on the web should be 1-3mb, maybe 4, maybe 5, but that’s stretching it.

gltf-transform is fantastic! it has an optimise flag, too. if you go beyond that you need to know what you’re doing.

npx @gltf-transform/cli optimize Gaming7.glb Gaming7-opt.glb

12.64 MB

other than that there exists gltfjsx (which uses gltf-transform with a custom config). it’s probably the easiest way to get the most compression ootb. open your shell and type:

npx gltfjsx@6.2.13 Gaming7.glb --transform

5.86MB (94%)

npx gltfjsx@6.2.13 Gaming7.glb --transform --simplify

3.9MB (96%) — simplify can mangle meshes

1 Like
npx gltfpack -i Gaming7-v1.glb -o Gaming7-mesh.glb

i tried gltfpack as well, but that gives me 47.6mb. this tool is very good for meshes but probably doesn’t touch textures, where usually most of the heft comes from. but gltf-transform already uses meshopt for simplify and re-ordering.

1 Like

Here’s some commandline params for gltfpack that I use when I really want to really crush a model down along with its textures:

./gltfpack.exe -i ./Source.glb -cc -tc -ts 0.25 -kn -o Output_meshopt.glb

Here’s the list of params and what they do:

$ ./gltfpack.exe -h
gltfpack 0.17
Usage: gltfpack [options] -i input -o output

        -i file: input file to process, .obj/.gltf/.glb
        -o file: output file path, .gltf/.glb
        -c: produce compressed gltf/glb files (-cc for higher compression ratio)

        -tc: convert all textures to KTX2 with BasisU supercompression (using basisu/toktx executable)
        -tu: use UASTC when encoding textures (much higher quality and much larger size)
        -tq N: set texture encoding quality (default: 8; N should be between 1 and 10
        -ts R: scale texture dimensions by the ratio R (default: 1; R should be between 0 and 1)
        -tp: resize textures to nearest power of 2 to conform to WebGL1 restrictions
        -tfy: flip textures along Y axis during BasisU supercompression
        Texture classes:
        -tu C: use UASTC when encoding textures of class C
        -tq C N: set texture encoding quality for class C
        ... where C is a comma-separated list (no spaces) with valid values color,normal,attrib

        -si R: simplify meshes to achieve the ratio R (default: 1; R should be between 0 and 1)
        -sa: aggressively simplify to the target ratio disregarding quality

        -vp N: use N-bit quantization for positions (default: 14; N should be between 1 and 16)
        -vt N: use N-bit quantization for texture coordinates (default: 12; N should be between 1 and 16)
        -vn N: use N-bit quantization for normals and tangents (default: 8; N should be between 1 and 16)
        -vc N: use N-bit quantization for colors (default: 8; N should be between 1 and 16)

        -at N: use N-bit quantization for translations (default: 16; N should be between 1 and 24)
        -ar N: use N-bit quantization for rotations (default: 12; N should be between 4 and 16)
        -as N: use N-bit quantization for scale (default: 16; N should be between 1 and 24)
        -af N: resample animations at N Hz (default: 30)
        -ac: keep constant animation tracks even if they don't modify the node transform

        -kn: keep named nodes and meshes attached to named nodes so that named nodes can be transformed externally
        -km: keep named materials and disable named material merging
        -ke: keep extras data
        -mm: merge instances of the same mesh together when possible
        -mi: use EXT_mesh_gpu_instancing when serializing multiple mesh instances

        -cf: produce compressed gltf/glb files with fallback for loaders that don't support compression
        -noq: disable quantization; produces much larger glTF files with no extensions
        -v: verbose output (print version when used without other options)
        -r file: output a JSON report to file
        -h: display this help and exit