CODEWITHSUNDEEP
javascriptthree.js
Darshit Hedpara
Darshit Hedpara

Reputation: 670

Three.JS => Loading Big .Obj file about 300 Mb will crash the browser and take much time to load

i want to load .obj file size is about 300Mb. when i m load that file it will crash the browser and some time it will take more time to load but after that it will say memory core dumped…

so there is any other way that i’m missing here for loading big object file and material file.

thank you in advance… :slight_smile:

Upvotes: 3

Views: 5606

Answers (1)

Atul Mourya
Atul Mourya

Reputation: 191

There is so much you can do to optimise your file and your application.

  1. Reduce poly-count as much possible. Remember that the model should not at all be over-detailed.

  2. Convert Obj file to Json and/or create saperate JSON file for each objects in your scene. Remember, geometry is the heaviest chunk of data in the file you 're trying to load. So, if possible, create separate BufferGeometry files for each and load it via BufferGeometryLoader

  3. You can use some compression/decompression technique before loading all the js and json files. Check out OpenCTM compression. You can also try gzip your files and deflate it onload.

  4. At 3d modelling stage when creating the meshes, merge as much geometries as possible. Easiest way would be to identify all the meshes that have same/similar materials, merging those geometries, and assigning those geometries the same material. The lesser the number of geometries you have, the lesser the number of draw call going to be in the rendering pipeline. Hence, your performance will improve.

  5. You can keep the track of your drawcalls using renderer.info

  6. Keep the Texture file size at lower resolution. I generally recommend less then 1K.

  7. Material performance cost goes like this MeshBasicMaterial < MeshLambertMaterial < MeshPhongMaterial < MeshStandardMaterial < MeshPhysicalMaterial. So be careful when assigning the material to your geometries. Threejs doc clearly illustrate all the features for each materials. So, if you know that some property of the material is not required for your object, fallback to the cheaper material.

  8. Use normalMaps to fake goemetries. This will reduce your number of vertices required.

  9. If your scene is static use aoMap and LightMap in your scene to eliminate the need of light sources and its cost of calculations.

  10. If your scene is static, stop the requestAnimationFrame and and render only when required. Example. if you are using orbitcontrol.js, use onChange method to render when user activity is triggered.

  11. Use chrome extension like Threejs Inspector and WebGL Inspector for debugging.

  12. If removing anything from the scene dynamically, make sure to dispose the data properly.

  13. 300 mb file is insanely big. Make sure to reduce it to 30 mb or less, Ideally, less then 10 mb for best experience.

There is so much more that can be done, if you are able to achieve most of these point, you will be relieved from your current issue and can then focus on advance optimisation. I would highly recommend to stick to the Threejs documentation.

Upvotes: 17

Related Questions