Just looking for some general guidance, it's been a very long time since I fiddled with anything 3D and the landscape has changed a lot, if you pardon the awful pun.
I have a number of highly detailed 3d models (3M+ faces each) generated from real-world terrain scans that need to be rendered in a browser. They are 'irregular' and cannot be rendered from a grid/DEM or anything.
I have partitioned the models into smaller objects and generated LOD for each object (3 levels) which produces a common set of vertices and three index buffers referencing some or all of the vertices which I stream progressively to the JS client.
I intend on rendering somewhere between 500k - 1M polygons a frame by specifying the LOD for each object based on the distance from the camera.
So my question is, how do I efficiently switch between these levels?
I've tried the naive approach which naturally produces bumps and glitches in the frame rate as the data is sent to the GPU. But I was looking for a way to send all of the data (vertices and the three index buffers) to GPU memory and then tell it to render with a specific index buffer, say the low res buffer, and then switch to the med or high res buffer as the camera gets closer.
The Three.LOD() solution doesn't seem to be of any use to me as it just produces the same fps glitch as my naive solution.
Would appreciate some guidance, however general. Cheers!
You want to efficiently and smoothly vary the level-of-detail (LOD) of your object based on distance from the camera.
Given your use case, one solution is to create for each object a BufferGeometry that contains all three levels-of detail. In other words, you would use "indexed" buffer geometry, specify the array of shared vertices, and catenate your three index arrays into one.
Then, set the drawRange property of your BufferGeometry to render the faces of the LOD that you want.
geometry.setDrawRange( startIndex, count );
The geometry will be pushed to the GPU once, and changing the LOD is simply a matter of changing the drawRange, a uniform, which should be silky smooth.
three.js r.75