How could be the best way of implementing an fft chart?

Hello everyone,

I’m trying to set up an interactive cascading spectrum chart, but it hasn’t been such a trivial thing for me. Here’s a picture of the goal I’d like to achieve:


It’s an fft graph, I have all these points already. Do you have any tips or any examples that I could follow?

I apologize that I don’t have any examples online yet to bring here, but as I go along I’ll add a fiddle here. I’ve tried using graphics-specific libraries, but mostly they work either with points only or with surface graphics.

Any help, guidance, examples will be a matter of great gratitude.

Best Regards,

1 Like

Hi @MQDev and welcome to the forum!

I’d do it with 1 plane per date and use a shader to display intensity. Let me try something …

1 Like

Here it is!
data viz | Babylon.js Playground (
You’ll get a new graph data each time you press play because of random.

The idea is to discard pixel in the fragment shader when it’s higher than data value. Then compute a color (a gradient texture might be a good choice here).

Still a long way to go but at least it’s a start :slight_smile:


Thank you @Cedric !

I tried something with vis.js, you can see here but it’s not very customizable. I believe that here with Babylon the result can be better.

Thanks in advance.

Wowww, that was pretty quick.

Thanks, @Cedric for the help. Certainly starting from that will help me a lot. This forum here was the best thing I’ve known since I started with Babylon. Thank you so much again!

I will try to bring updates as I progress with this task.

Best regards! :smiley:


I was trying with ThreeJS also, and there I achieved something like that:

This is an option with the use of InstancedMesh.

may be you can use the fft functions from the sound analyser

Demo Sound Visualisation

1 Like