How to improve FPS with import GLTF file

Questions
, , ,
1

HI. I try to show this 3d model

But I add it directly that FPS down to about 22.
So I try to use mergeBufferGeometries.

I have 2 problems.

  1. Expect like this

    expect
    expect648×635 6.6 KB

    but result is
    result
    result1088×793 6.43 KB

  2. Does it posible add materials to merged geometry like expect picture?

glfLoader.load('<filePath>',
      (gltf) => {
        const geometries: THREE.BufferGeometry[] = [];
        const materials: THREE.Material[] = [];

        gltf.scene.traverse((obj) => {
          if (obj instanceof THREE.Mesh) {
            const g = obj.clone().geometry;
            g.applyMatrix4(obj.matrixWorld);
            geometries.push(g);
            materials.push(obj.material.clone());
          }
        });
        const geometry = mergeBufferGeometries(geometries);

        const mesh = new THREE.Mesh(geometry);

        scene.add(mesh);
        // };
      },
    );
2

Merging geometry inside three doesn’t manage your textures and materials.
You can replace materials after the loading. But I recommend to merge complex models using your favorite 3D app instead. The optimized way would be to sort all your mesh by materials properties (transparent, solid, reflective) then baking textures atlas. You may still end with multiple geometry and draw calls, but only the ones really needed.

3

you usually prepare models before loading them, in blender for instance. doing that by code, it doesn’t feel right. that glb is bigger than 13mb, that is too large, mobile users will wait minutes for that. and it hints to oversized textures and/or way too many vertices. target 500kb-1mb for models on the web.

btw merely running it through https://gltf.report yields a 3mb model, still too big but that’s 10mb less.

4

The cause of the low FPS will be the number of draw calls here (10,000) more than the file size, so compression alone will not fix that. I’d probably start by running this through gltfpack to merge the geometries offline:

gltfpack -i in.glb -o out.glb -noq

This won’t reduce file size (yet) unless you also include compression options, or use Draco afterward, but already the draw calls are reduced from 10,000 to just 35, and the FPS is much better: (Download)

1 Like
6

Thanks a lot.
You provide model works very well.

I’ll try to use gltfpack.