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:


or also

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,
Matheus

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 (babylonjs.com)
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:

4 Likes

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:

2 Likes

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

Demo Sound Visualisation

1 Like

That’s a good point.

The three.js tutorials I found were related to fft functions from the sound analyzer.
I’ll have a look at Babylon’s one.

The problem I still have I guess is related to shaders. Do you guys know a bit about it?

Would it be possible to color it in the other direction? For example, the coolest spots would be blue, and the hottest is a composite of all the other colors in a gradient. The base would always be blue on all bars, and on the larger ones, they would have more than one color.

Color it in this direction:

Playground (Babylon version)
https://playground.babylonjs.com/#S7U8U8#3

Codepen: (Three.JS version)

Thanks again!

The equivalent of InstanceMesh is thin instances in Babylon.js:

https://playground.babylonjs.com/#LI1SSJ#4

3 Likes