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,

I have already something done in BabylonJS…
If you want you can have a look here:

Any additional help will be a pleasure.

Did you consider using boxgeometries positioned and scaled to the data points?
I think this will also help if you want to use raycasting to highlight individual data, as in the example image.

1 Like

I think that the solution is along on this way (bars scaled to look like what the example shows)… As the amount of data is huge in a single lane, it would make it easier to fill in the colors, and I could just use this technique of raycasting.

Based on your Babylon.js example and that Three.js instancing example: three.js examples

There is an option with the using of InstancedMesh.


PS It’s just an option, not the ultimate solution.


Very good option by the way! Thanks…

I’ve seen that it’s not so trivial to make a gradient on the other axis (Y). Someway to have this effect: according to the value…
image image

Let’s suppose the highest is 100, so its bar would have from blue to red…
And if it’s 2, it would just like blue.

I searched a bit more and the solution I found is to use shaders, do you know if it’s the best way of doing that?

With some minor modifications to the material, you can have the desired colouring effect.



Thank you, @prisoner849 .

I just realized I need to study more about these topics. Do you have any recommendations for what to study to help me get there to the solution I need? Could it be the famous shaders?

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.

Instead of:

Color it in this direction:

Thanks again!

I updated the codepen, now shaders take bars’ height in count to make those bars gradiental.

1 Like

Hey, I don’t know what is the best way of asking that, it’s something related to this topic, should I open a new one, or can I ask it here?

Well, I am already here, so I will enjoy asking:slight_smile:

Like in the example above, how could I tell which line a mesh is on? I tried setting a name based on its position on the for loop, but somehow it didn’t work:

let o = new THREE.InstancedMesh(g, m, rows * cols);

    let dummy = new THREE.Object3D();

    let mat4 = new THREE.Matrix4();

    for (let y = 0; y < rows; y++) {

        legends.z.push(fft[(rows - 1) - y].date)

        for (let x = 0; x < cols; x++) {

            dummy.position.set(0, 0, (rows - 1) / 2 - y).multiplyScalar(20);

            dummy.position.set(-(cols - 1) / 2 + x, 0, dummy.position.z)

            dummy.position.set(dummy.position.x, dummy.position.y, dummy.position.z).multiplyScalar(0.243);

            let hData = fft[y].data[x].a

            biggest= hData > biggest ? hData : biggest;

            biggest = parseFloat(biggest).toFixed(2);

            h = biggest * factor;

            dummy.scale.set(0.25, hData * factor, 0.25);


            o.setMatrixAt(y * cols + x, dummy.matrix);

        } = 'chart'

        o.countZ = y



What I’m looking for is when I click on the date it turns red and the full line of meshes turns red too as shown in the image below:


Thanks in advance, and if it would be better to open a new topic, please just let me know. :smiley: