GLTF model crashes ios browsers

Questions
1

I’m not sure whether to file this under bugs but, here goes.

this is, by all accounts, a very normal gltf file that I use for a level in a game we’re building with babylon. It loads properly on windows/mac pc browsers, in addition to android phone browsers.

However on iPhone browsers (safari, chrome, opera, tried all of them) it starts loading the model, and then the window goes black and it shuts the browser down -with no crash report, no errors in the console etc.

This is the code I use to load the model and build a navmesh:

async function createPlatforms(scene, navigationPlugin) {
let positions = [
new BABYLON.Vector3(8, 0, 0),
];

let platformPromises = positions.map(pos => createStaticMesh(scene, navigationPlugin, pos));
let meshes = await Promise.all(platformPromises);
await createNavmesh(scene, navigationPlugin, meshes.flat());

}
async function createStaticMesh(scene, navigationPlugin, position) {
return new Promise((resolve, reject) => {
new BABYLON.SceneLoader.ImportMesh(“”, “./models/Floor_v03/”, “RSS_Module_v02.gltf”, scene, function (glbMeshes, particleSystems, skeletons, animationGroups) {
glbMeshes[0].position = new BABYLON.Vector3(0, 0, -10);
glbMeshes[0].scaling = new BABYLON.Vector3(0.8, 0.8, 0.8);
glbMeshes[0].checkCollisions = true;
let groundMesh;
let obstacles = ;

        glbMeshes.forEach(element => {
            if (glbMeshes.indexOf(element)) {
                element.checkCollisions = true;
                if (element.name !== "Floor" && element.name !== "FloorShadow" && element.name !== "BoxShadow") { 
                    obstacles.push(element);
                }
                else if (element.name === "Floor") {
                    groundMesh = element;
                }   
            }
        });

      

        let mesh = BABYLON.Mesh.MergeMeshes(obstacles, true, true, undefined, false, true);
        resolve({ groundMesh, mesh });
    });
});

}

async function createNavmesh(scene, navigationPlugin, meshes) {
let navmeshParameters = {
cs: 0.25,
ch: 0.05,
walkableSlopeAngle: 90,
walkableHeight: 2.0,
walkableClimb: 1,
walkableRadius: 1,
maxEdgeLen: 12.,
maxSimplificationError: 1.3,
minRegionArea: 20,
mergeRegionArea: 20,
maxVertsPerPoly: 6,
detailSampleDist: 6,
detailSampleMaxError: 1,
};

let groundMeshes = meshes.map(m => m.groundMesh);
let obstacleMeshes = meshes.map(m => m.mesh);

navigationPlugin.createNavMesh([...groundMeshes, ...obstacleMeshes], navmeshParameters);
crowd = navigationPlugin.createCrowd(10, 0.1, scene);

}

module.exports = { createPlatforms };

I first thought that the problem was with the navmesh, so i removed that part, but still there was no change.

I loaded the model without textures, and it loaded correctly. then I started adding the textures one by one, and at one point it started crashing. but the problem wasn’t related to a single texture because it sometimes crashed and sometimes didn’t when i added/removed textures.

I’m at a loss I’d appreciate any input very much.

this is a model that loads without a problem (which has more vertex points and more textures than the one that doesn’t load)

2

Hi.

The issue is that ALL of your textures are 2k resolution. IOS has it’s own thing and some limitations, and the issue you are describing usually comes from the large textures. It’s really not easy to define how many textures you can have, and how large they should be to avoid this issue. I usually keep it to this rule though → “Limit your textures for IOS to MAX 1k resolution”. If you have a lot of textures, even this might be reduced in some places.

Basically, it’s not that you cannot have 2k in the scene. If it is really important keep it, but reduce other textures. If it is not really important in the scene, reduce it to 512 or even less. Try to keep balance with this and test it out.

The example model that you shared that CAN run on IOS, if you check, has only 1k textures.

1 Like
3

Thanks a lot for the answer.

Will try and report back

4

Something else you can try is to use KTX textures which will compress the textures such that they use less memory on the GPU. Using a tool like glTF-Transform is a great way to do it.