Ultra async gltf import

[Knifepro]

Before I start, I want to tell you about the features of my scene. I have a small office gltf file with dimensions of x:50,y:20,z:50 and I load it into my scene. But my gltf file is very detailed and contains 166k polygons and 219k triangles, so unfortunately I experience crashes on iOS devices. Do you have a suggestion for a solution to this problem where I can split the gltf file and transfer the meshes in it to the scene one by one?

Actually, my general goal is to break the gltf I want into pieces and load all the meshes at once instead of loading them every 100ms.

NOTE: I am currently using this method as

this.ofisLoader = await BABYLON.SceneLoader.ImportMeshAsync("", env.STATICS_SERVER + "/assets/babylon5/office_list/ofis" + this.office_style + "/", this.office_style + ".gltf");

I can’t give PG or link because unfortunately I haven’t finished it yet due to these reasons, and I’m also leaving my engine settings and some other settings I used below.

engine_options ↓↓

antialias: false,					
preserveDrawingBuffer: false,		
stencil: false,						
deterministicLockstep: false,		
lockstepMaxSteps: 1,				
limitDeviceRatio: 2.0,				
doNotHandleContextLost: true,		
samplingMode: 1,					
powerPreference: "low-power",		
failIfMajorPerformanceCaveat: false,
audioEngine: true

↑↑

this.scene.executeWhenReady((_sceneFinished) => {
this.scene.textures.forEach((el) => {
					switch (el.name) {
						case "sceneprePassRT":
							el.updateSamplingMode(BABYLON.Texture.BILINEAR_SAMPLINGMODE); // Daha düşük kaliteli bilinear sampling
							el.anisotropicFilteringLevel = 1; // Anisotropic filtering minimuma çekildi
							el.samples = 1; // Sample sayısı azaltıldı (8'den 1'e)
							break;
						default:
							break;
					}
				});
});

var options = new BABYLON.SceneOptimizerOptions(60, 2000);
		options.addOptimization(new BABYLON.HardwareScalingOptimization(0.5, 1.5));
		options.addOptimization(new BABYLON.RenderTargetsOptimization(1));
		options.addOptimization(new BABYLON.TextureOptimization(0, 256, 1));
		options.addOptimization(new BABYLON.PostProcessesOptimization(2));
		this.optimizer_fps = new BABYLON.SceneOptimizer(this.scene, options);

this.engine.setHardwareScalingLevel(1.5)

[Tricotou]

Hello !

@Knifepro

my gltf file is very detailed and contains 166k polygons and 219k triangles

First of all : do you absolutely need this precision ? What about reducing your polycount (Blender → Modifier decimate → Apply → Export) for mobiles ?

@Knifepro

so unfortunately I experience crashes on iOS devices

My personnal experience with iOS crashes comes from textures more than poly counts. I would advice to make sure that you have only small texture sizes (512x512) inside the GLTF before triggering a GLTF load

@Knifepro

Actually, my general goal is to break the gltf I want into pieces and load all the meshes at once instead of loading them every 100ms.

I guess official devs will confirm (or not ), but I think that at the end, since JS is single threaded, and this load needs anyway to be pushed to GPU, etc, trying to trigger a pure parallel and simultaneous load won’t make things better that loading one by one…

[labris]

@Knifepro

my gltf file is very detailed and contains 166k polygons and 219k triangles

I don’t think it is too much to cause iOS crashes. What is the resolution of your textures?
You may resize all textures in GLB file online here - https://glb.babylonpress.org/ - and check if crashes persist with 512 or 1024 resolution.
Or probably you may share your file to test and find the reason of crashes (the main reason is iOS itself…).

[Knifepro]

Actually, I agree with you about your views on the design, but unfortunately I don’t have much say in that matter. Generally, there are 3mb textures because the structures that are pleasing to the eye are used.

[Tricotou]

Hello

@Knifepro

there are 3mb textures

Just to make it clear : it’s not a matter of file size, but pixel size. A plain PNG image can be very light and huge in pixels, totally impossible to load on iOS, while a noisy JPG can be very heavy and still tiny in pixels, loading fine on iOS

[Knifepro]

I will upload and share it as a folder soon, please let me know your opinions.

[Knifepro]

Google Drive: Sign-in

I hope I uploaded it correctly

[Tricotou]

@Knifepro

I hope I uploaded it correctly

You need to set the share to “anyone with the link can access”.

[Knifepro]

ofis1 - Google Drive

[Tricotou]

So, yeah, your images are too big in pixels.

For example :
zeminVRayReflectionFilterMap0.jpg → 2048 x 2048
new-york-city-1055554.jpg → 6279 x 2241

[Knifepro]

Yes, I am having a hard time figuring it out. That’s why I needed different ideas. If I have to repeat, even compensating the pictures can be a problem for me

[kzhsw]

You will need KTX compressed texture and quantized vertex to optimize for GPU memory, just apply gltfpack (and adjust texture related params) to your model.

GitHub - zeux/meshoptimizer: Mesh optimization library that makes meshes...

[labris]

I dropped your file here - https://glb.babylonpress.org/ - to reduce the size.
Seems there is not much visual difference between original textures and compressed ones while the size is decreased from 90 Mb to 7 Mb.

The resulting file is here - Babylon.js Sandbox - View glTF, glb, obj and babylon files
Note that you’ll see the Inspector first, it opens automatically when uploaded file has validation errors (as yours).

Still I was not able to open it with my iPhone. The reason is that textures are too big. After resizing them to 1024*1024 the visual quality is still there

The result - Babylon.js Sandbox - View glTF, glb, obj and babylon files
I was able to open it with my iPhone without any crashes.

With MeshOptimizer the file size is reduced to 3.1 Mb but there is a bit more visual artefacts, seems not critical

Also possible to convert all textures to KTX ETC1S. The size will be a bit bigger - 6.1 Mb but KTX textures have some advantages - Babylon.js Sandbox - View glTF, glb, obj and babylon files (KTX+MeshOptimizer).

[Knifepro]

I really appreciate your interest and concern. I have been so focused on the software side of the business that I never thought my design team could be such a burden. Since the design side is more responsible for making excellent works that are pleasing to the eye and then giving it to the ban and saying go ahead and run it, I realized how wrong it is to always focus on engine and scene settings. In short, thank you again for informing me and responding with great attention.

[labris]

@Knifepro

I never thought my design team could be such a burden

It happens more often than one may think

Here is a very good Realtime 3D Asset Creation Guide for designers - let them read it

• 3DC-Asset-Creation/asset-creation-guidelines/RealtimeAssetCreationGuidelines.md at main · KhronosGroup/3DC-Asset-Creation · GitHub

[Knifepro]

All my meshes have the same name (the white ones) I want them not to all have the same name and not be connected to each other so I can edit them one by one. Do you have a setting or suggestion for this?
Because I was previously accessing a network in the scenescene.getMeshByName(‘modmanzara’)

[labris]

To be honest, I didnt’ quite understand what do you mean…

[Knifepro]

I probably don’t have any practical English.
All the white areas have the same material and name.
When I want to change any of them, they all change.
I want to edit each one separately and add new images, text and videos.

[Joe_Kerr]

@Knifepro

I probably don’t have any practical English

I think the only misunderstanding might have been your translation of “mesh” vs “network”. In the context of 3d models the term “mesh” is used - not “network”.

@Knifepro

When I want to change any of them, they all change.

Are they instances maybe? I don’t think duplicate names would cause this behaviour.

[labris]

Were those meshes separated at the design stage? Or you want to split a mesh in GLB into several meshes and assign new materials etc?