Threejs: Rendering giant scene in multiple chunks

Question

Is there a way to render a scene with a lot of objects in smaller chunks? eg, render just the large objects first, then render the smaller objects and overlay them on the same render target. By breaking it up I'm hoping scene will have a responsive framerate. It should look like this: https://forge-rcdb.autodesk.io/configurator?id=58c7ae474c6d400bfa5aaf37&_ga=2.17878013.536468240.1515526269-1844418132.1512684792

I have tried to set renderer.autoclear = false and renderer.preserveDrawingBuffer = true. It seems to work when I render it synchronously. If the renders are separated by a small time interval the renderer clears and just shows what was last rendered.

Can you include more information about your scene? Number of objects, poly count, number of draw calls? Typically you improve framerate by rendering in fewer larger chunks, not more smaller ones, to reduce the number of GPU draw calls. That can be done by merging small objects that share the same materials. — Don McCurdy
Thanks for the response! I'm rendering large architectural models with many small meshes (could be >100,000 meshes with hundreds of vertices each). I've thought about merging the meshes that share a common material, but I need them to be individually addressable since there's a feature where you can highlight an object by hovering your mouse and change on object's material by clicking. Maybe there's some way to merge the object's geometry and index each object's start and stop vertex in the vertex array buffer? Then I can split the meshes apart as needed? Sounds complicated. — user3179594
@DonMcCurdy I've pretty much given up on rendering everything at once since I don't have much control over how large the models can be. It's okay if it doesn't render everything at once as long as the framerate is smooth. — user3179594

user3179594 user3179594 · Accepted Answer · 2018-01-09T22:35:07

Okay I figured out what I was doing wrong. Turns out the "preserveDrawingBuffer" field needs to be set when the renderer is instantiated like this:

renderer = new THREE.WebGLRenderer({ preserveDrawingBuffer: true });

I was assigning it after it it was already instantiated. Here's a demo I made if anybody's interested: https://jsfiddle.net/9tcoyhcc/2/

Threejs: Rendering giant scene in multiple chunks

1 Answers