CODEWITHSUNDEEP
three.js
user12079239
user12079239

Reputation:

Difference and uses of InstancedMesh and InterleavedBuffer in ThreeJS

Can anyone help we out with the difference between InstancedMesh and InterleavedBuffer in threejs. I'm kinds confused with both the topics and can anyone let me know which is the optimized way to go with to render some large amount of geometry.

Thanks in advance.

Upvotes: 2

Views: 809

Answers (1)

Mugen87
Mugen87

Reputation: 31026

Instanced rendering and interleaved buffers a two separate things. You can use both techniques on their own or in combination.

THREE.InstancedMesh provides a convenient interface for instanced rendering. This approach is useful when you have to render a huge number of objects with the same material and geometry but with different world transformations. THREE.InstancedMesh allows you to improve the performance of your app by reducing the amount of draw calls. So instead of drawing each object with a single draw call, you can draw them all at once.

InterleavedBuffer provides the possibility to manage your vertex data in an interleaved fashion. The motivation of doing this is to improve the amount of cache hits on the GPU. If you are more interested in the theory behind this approach, I suggest you google "structure of arrays vs. array of structures". The latter one applies to InterleavedBuffer.

In general, the performance benefits of both techniques depends on the specific use case. According to my personal experiences, the benefits of interleaved buffers is hard to measure since the performance improvements depend on the respective GPU. In many cases, I've seen no difference in FPS when using interleaved buffers. However, it's much more easier to see a performance improvement if the amount of draw calls is high and you lower it by using instanced rendering.

three.js provides examples for both techniques. webgl_buffergeometry_instancing_interleaved demonstrates a combination.

three.js R114

Upvotes: 1

Related Questions