Is it possible to build the cylinder chart in babylonJS and GUI?

Hello everyone

I have some mining data and I want to show it on cylinder chart like the following img. is it possible to use GUI to build this chart?

and here is my PG:https://playground.babylonjs.com/#XB49NT#16

Hey @Arash_Bagheri. Only just started my 2nd week adventure with BabylonJS but based on what I learned so far task is totally achievable.

Right hand side panels with controls seem totally doable with GUI, although if it is part of the web app I would go with HTML (faster, easier to maintain).

For the 3d graph I would generate meshes from imported data and “glue” it together.
You can use StandardMaterial with solid diffuseColor for each layer.
I don’t think updating high number of meshes on the fly is good idea, but if there aren’t too many in your use case so you should be perfectly fine.

As for 3D grid you have couple of choices:

  1. You can generate 3d grid and labels with AdvancedDynamicTexture or DynamicTexture but from my limited experience if you want to redraw it every frame you might wanna test it for performance first. DynamicTexture allows you draw using CanvasRenderingContext2D so should be pretty easy.
  2. You can probably use LinesBuilder . Might be even easier. Take a look at drawing lines section in docs.

BabylonJS has solid docs and pretty active community, so if you get stuck just ask for help again.

Good luck!

1 Like

Hi @MarkBevels , thank you so much for your recommend. :pray:
I will go to do it with one of them.

Totally agree.

1 Like