How to load OBJ scene (> 500 MB) optimally without browser crash?

I want to build a scene which is going to have 100 low-poly OBJ models with texture and want to render the scene in the most optimal way possible. I have heard that the browser/WebGL crashes when loading a heavy model. Can you tell me what is the best possible way to go towards it as I am yet to start to build the project and wanted some insights before starting with any approach?

I want to also know that whether say I have an OBJ file ~500 MB, it will be possible to split the load of the OBJ file in chunks so that the browser doesn’t crash?

One approach that I have thought of is to load the grayscale of OBJ only and once it’s loaded completely traverse over its meshes and apply the corresponding texture on it one-by-one. This will definitely slow-down loading of the scene but I think it will be able to solve the problem of browser/WebGL-crash, or will it – I suspect that this is not a good way of optimizing, if not, then how should I go about it?

Related: Loading Big .Obj file about 300 Mb will crash te browser and take much time to load

In general, parsing a format like glTF where the actual geometry data are stored as binary data and not as ASCII text is faster and more memory friendly.

In any event, if you are going to load such big files over the internet, the corresponding transmission latency is a real problem. An option to mitigate this issue is to compress the geometry data (for example with Draco). This will noticeable decrease the file size and thus the loading time but slightly increase the parsing overhead (because of the additional decoding step). However, the overall performance will be much better.

If you want to stick to OBJ for some reason, consider the steps explained here.

1 Like

Thanks a lot for giving me the reference. I will try it and see whether it helps or not.