glTF model rendering optimization

I have issues loading some 3d gltf models using threejs on iPad. Loading works fine actually, it loads up fine on desktop computers and android tablets, but in my specific case it needs to run on an iPad tablet and the page keeps crashing because it uses up all of the memory trying to render the model (I guess Android gives the browser more memory to use).

My question is how to optimize the model in order for it to be able to run on iPad? My first thought was that the number of vertices/indices/faces etc. affects rendering, but it turned out that a model with more vertices/indices/faces was able to load while the “optimized” model with less vertices/indices/faces couldn’t load. We throw the model into babylon online previewer to see its info and the thing I noticed is that the older model with more vertices/indices/faces had less meshes, draw calls and texture collision than the new one that doesn’t work. So is that something that we should focus on optimizing instead of number of vertices/indices/faces?

The problem is that we need to optimize the model to render on iPad but I can’t figure out which part of the model needs to be optimized so any help would be much appreciated!

P.S. I tried implementing DRACO compression and DRACOLoader but it doesn’t help because it just compresses the file, and once it needs to be rendered on screen that compression doesn’t matter at all because it’s basically still the same 3d file that needs to be rendered. I can share code if needed, but I don’t think it matters because there is no issues with the loading, it’s just that the model is not optimized.

/cc

What does that mean? Please be more specific when you report such problems. Are there runtime errors, do you see any errors or warning messages in the console? Can you share the model in this thread?

In general, lower the amount of draw calls is often better than saving a few vertices/faces. You find some suggestions in order to improve performance right here:

Thank you for all your answers to my questions, I found a solution finally. The thing that solved ipad rendering problems was reducing texture size. An external digital agency was producing the 3d models as my colleagues or I are not experienced in 3d at all, and there were about 15 textures each 2048x2048px. I reduced all of the textures to 512x512px and it works perfectly now on iPads! My biggest problem was that I couldn’t really pinpoint exactly which part to tell them to reduce or what to do to the models in order to make them easier to render, and I guess they aren’t experienced enough to know what to optimize either.

Your quoted answer from another question about methods of optimization gives me guidance for the next time when I will need to optimize a 3d model so thank you for that!

I have another question though, how small can the texture be if it’s just a square of one color? I reduced them to 512x512px, but can they be like 8x8px for example (or 1x1px maybe) since it’s just one color and it will be the same whether it’s 512x512 or 1x1px?

1 Like

Yes, you can use a 1x1 texture in this case. Here is a live example: https://jsfiddle.net/vpugth4a/

3 Likes