Hello,
I’m generating an infographic with 4000 Sphere Geometries that I want to seperately animate in length.
I build a first version generating 4000 pieces, but the performance is (obviously) really low. I get about 14fps on my Macbook and I need to run it on mobile device.
This is how it looks now:
What’s the best way to do it? I’ve been looking at the [webgl gpgpu birds](https://threejs.org/examples/#webgl_gpgpu_birds) example, but they probably have a lot less vertices?
Thanks a lot!
Without seeing your code we can’t help you. Please create a live version using codepen or similar and share it here.
Sorry about that. Here it is:
https://codepen.io/Vin-ni/pen/oRbEzr
This is spawning 4000 Cylinders. How could I optimize it? I’d also need to animate them later to grow and shrink individually.
Thank you so much!
The performance problem in your app is the amount of draw calls. In the following fiddle, I just merged all individual geometries into a single one so the app can render everything with a single draw call.
https://jsfiddle.net/9wu5aopn/
Since you want to animate the cylinders individually, you have to use a different technique called instanced rendering. In this way you can also render everything with one draw call but it’s possible to transform or animate individual objects by additional (instanced) buffer attributes. Since instanced rendering is a somewhat advanced WebGL feature, you should carefully study the related three.js examples and the approach in general.
@Mugen87’s answer is definitely what you are looking for!
But in case you want to understand more about instancing, before venturing into Instanced Rendering, you might want to check @pailhead’s blog post.
If I’m not mistaken, it doesn’t touch on Instanced Rendering, but it offers some pretty good explanations about why using instanced objects could be beneficial for you project.
It does, it’s the same thing, except that three already knows how to do the heavy lifting when it comes to rendering. The problem is the instance rendering is too low level alone to be used on objects. The interface lifts it to the level of the scenegraph, and allows you to do instanced rendering sort of behind the scene. (It could be hidden way more, make actual nodes represent instances etc). It’s a base or an approach to build your own system.
If you don’t have time to read the blog, or carefully study the low level advanced WebGL features, you can always give this a shot:
The idea is that with an import and a single line of code you can avoid all the advanced webgl features and just make it work.
It is amazing! great job!
is instancing (instancedBufferGeometry) only possible when the geometry, and material are always the same? can I have in a instanced group different materials or geometry or even meshes?