Progressive Loading / LOD / Streaming Mesh in Three.js

Question

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 of detail (not sure of the correct terminology) as the model loads so that my users aren't staring at a blank screen for minutes before anything appears?

If the model is 20,000 triangles, does three.js have a method for maybe loading only 2,000 first and then progressing to the fully detailed model?

Answer 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).

Answer 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.