3D Bar Chart with 40k Bars

Questions
1

Hello,
I have a question about how to get the best performance in a scene I need to draw.

So I need to create a 3D Bar Chart with 40k bars.

The aim are middle range smarthphones and tablets.

Then, I need to implement an interaction. When you click on a button all this bars change their height and color. If I could I would like to make a beautiful animation.

There are things that I can cut of course, I can use a threshold and avoid drawing a bunch of bars. And in the worst case I can remove the animation and just place a Loading message when someone clicks on the button.

My question is, which class or data structure fits best this use case and it’s going to allow me to have the best performance possible.

In THREE.js and AFrame I was using a BufferGeometry and a threshold to avoid a bunch of bars. But I’m switching to Babylon as I think that it integrates better with React and the documentation is way better.

Another option that I’m thinking about is using tricks like, avoid drawing the top and bottom sides of each Bar and using double sided faces, this would reduce geometry. Or having both structures loaded and using transparency to hide one structure and show the new one (this would be another type of animation).

2

Welcome to the Babylon community! :blush:

This is the perfect case to take advantage of Thin Instances :slight_smile: Thin Instances | Babylon.js Documentation (babylonjs.com)

3

Thanks for this fast reply and amazing advice.

I’ve been implemented this 3D bar chart with Thin Instances.
But, I don’t know how I can have a different height for each Bar.

I use Box and I create 40k thin instances using buffers. I assign position and color. But how to assign size for each of them? Width will be the sam, but height needs to be different for each.

4

You can assign an individual scaling for each thin instance, so you can create them all with the same size and just change the height scaling.

1 Like