Model Keeps Forcing Refresh on Mobile

Title is pretty much it. I’m putting together an environment to be put on an iPad for an art exhibition, this one specifically: Cursed Heart Environment and Characters - 3D model by CalvinAndHobbies (@CalvinAndHobbies) [b3570fc] - Sketchfab

I’ve done a lot of work to compress and optimize the scene and a lot of my efforts have helped to the point I can briefly load the viewer on the iPad. However, “briefly” is the operative word here. After a few seconds or a simple interaction like tapping an annotation, the viewer flashes white and at best reloads the scene. At worst, it just stays white. It works great on the computer, but I need it to work on mobile.

I’ve done so many thing to get this scene more performant from combining meshes and turning off opacity, but it’s getting to the point where any more optimization is going to hurt the look of the scene. So, I want another set of eyes to take a look and make sure there isn’t some bug in my file or something easy I can do to get this sucker working.

Open to all feedback. Thanks!

This sounds like an issue to do with the size of your scene and potentially the number of materials / textures being used - WebGL on most mobile devices will struggle to manage a 1.1million triangle scene along with 44 materials worth of textures. The combination of these 2 factors is likely hitting a memory limit and causing the reloading / crashing you’re seeing.

The only real thing you can do is further optimising, which looking at the scene I can see lots of room for. Take a look at this wireframe view:


Each one of those dark areas is somewhere you should look at reducing the poly count. There really is no reason for a roof like that to be so high poly - it must be pulling 200k triangles plus on its own!

Similarly the door frames and wooden beams are really high poly. If you’re really concerned with getting a smooth shape to them, you should looking into using a high to low poly workflow and bake a lot of this detail into your normal maps. The edge of the main roof has this same issue, and the main surface of it has a lot of wasted polygons.

As a rule of thumb - polygons in the middle of flat faces are entirely wasted unless you require per-vertex data (like vertex color), which in this scene you definitely don’t. Working with neatly spaces rows of quads might look nice, and might be helpful while you’re working on a model, but at the end you should really optimise all those wasted polys.

Similarly, your inside has the same issue:


Door frames, beams, lamps and chandelier could all have their poly counts greatly reduced. Even the characters themselves are very high poly for such simple styling.

As for materials, although I can’t see the texture sizes specifically, I can see from the UV checker that the Texel density (how much 3d space each pixel on a texture represents) varies a lot across the scene which makes me worried about you textures sizes. For mobile, you should try to get your texture sizes as low as possible, probably looking at a max size of 2048 x 2048 for this type of project. You should also look at merging multiple objects onto the same materials where possible (called atlasing if you need to research it).

Hope some of this helps, good luck with the project :+1: :nerd_face: :+1:

2 Likes