iOS WebView crash when 45MB GLB loaded

Questions
, , , ,
1

I have a compressed with KHR_mesh_quantization and EXT_meshopt_compression and file size reduced to 45MB.

Here are the stats from https://gltf-viewer.donmccurdy.com/ -

  • Format: glTF 2.0
  • Generator: glTF-Transform v3.7.3
  • Stats:
    • 47438 draw calls
    • 0 animations
    • 1 materials
    • 5405184 vertices
    • 8985085 triangles
  • Extensions:
    • KHR_mesh_quantization
    • EXT_meshopt_compression

WebView starts to load this and after 20 seconds or so, it crashed with “WebView Terminated”

2

Does the model have textures, and what is their resolution? You can check that in https://gltf.report/.

Compressed file size is not necessarily relevant to runtime performance, since the whole thing has to be decompressed to render, so a file that’s 45 MB over the network could easily be >1GB in memory. 9M triangles is quite a bit. Does it come down more if you try something like:

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

gltf-transform optimize in.glb out.glb --compress meshopt --texture-size 1024 --simplify-error 0.0001

If that’s not working, are you able to share the model?

3

@donmccurdy

Model doesn’t have textures but Yes that command reduced the file size even more and meshes is now 697. but there are few lines behind the model, that defines the model levels but after optimize those are gone.

here is the file link to download the model "GLB FILE" (65cb28537a4cf3213a2e3642_meshOpt.glb) is available for download

4

Ok, yeah so the 50,000 meshes and 9M vertices originally in there are just going to be far to much for mobile devices. Usually you want to aim for <100 meshes and <100,000 vertices, though you can push that a bit depending on your goals.

I’d suggest looking at the options under gltf-transform optimize --help and seeing if you can find settings that give the visual quality you need, using either instancing or joining to reduce the draw call count, and simplification to reduce the vertex count.

2 Likes
5

Actually i am able to do it by converting large GLB file in multiple GLB files and rendering those parallelly, but those are off the center, they are not aligned.

i have tried bounding box centroid approach and bounding box corner approach even both are not working.

These are the bounding boxes -

{
  1: {
    isBox3: true,
    min: {
      x: -91.895,
      y: 101.791,
      z: -0.000015
    },
    max: {
      x: 195.240,
      y: 243.366,
      z: 60.655
    }
  },
  2: {
    isBox3: true,
    min: {
      x: -99.979,
      y: 101.661,
      z: -4.075
    },
    max: {
      x: 190.615,
      y: 257.833,
      z: 53.928
    }
  },
  3: {
    isBox3: true,
    min: {
      x: -109.309,
      y: -41.864,
      z: -1.397
    },
    max: {
      x: 191.673,
      y: 297.007,
      z: 86.575
    }
  }
}

1 object is for First model, 2 object is for Second model and so on