Progressive Loading / Lod / Streaming Mesh In Three.js

I am loading stl files into a three.js scene using the STL loader. These stl files range from 5mb to 50mb. Is there a method I can use to progressively load/stream/increase level

Solution 1:

Real progressive loading / mesh streaming is not there out of the box. It would be great though and is doable.

It has been done with WebGL without three.js using POP buffers: http://x3dom.org/pop/ & https://github.com/thibauts/pop-buffer

One of the demos is: http://x3dom.org/pop/happy.html

I hope one day we'll have nice POP buffer (or similar alternative) progressive loading for three.js too -- is in my/our todo / wish list too but many things still before that here .. sure don't mind if someone writes it earlier :)

Three does include a simple LOD mechanism but it is to help with rendering load and not with loading time: http://threejs.org/docs/#Reference/Objects/LOD & http://threejs.org/examples/webgl_lod.html

For a simple solution, you could author low & high versions of your models and write custom loading logic to just first load the low one & show them, then proceed to load the high version etc.

We've done that in one project, works fine as expected. Only downside I can figure is that it increases the total time to get the high version. But the low can be very small so it's ok (in our case low poly untextured with just vert colours, then the high ones have much more polys but essentially quite big textures too).

Solution 2:

The best solution for this is currently Nexus, which has been under intensive development in the last couple of years. It has a loader for threejs.

Solution 3:

Nexus and popbuffer could be the right solutions for prograssive LoD loading. However if you just want to try a simple (just working) solution, suggest to have a look into this: https://github.com/amd/rest3d

On basis of GLTF format, it transmits single mesh one by one. In a certain sense it reduces the waiting time for the first renderring. Actually if you rearrange mesh data and use streaming buffer to download data, you might achieve a result of prograsive loading/rendering.