Threejs code showing the Discrete Fourier Transform (DFT)

Showcase
1

demo

In only JS, this uses the Discrete Fourier Transform (DFT) on a random image. The DFT is a mathematical tool that takes data (like a row or column of pixel values) and reconstructs it by summing a bunch of independent waves. Like sin(x) and cos(x)

Pixel DFT

  • This dropdown applies the DFT to the selected pixel row or column.
  • K terms controls how many Fourier terms are used. At max K, the wave reproduces the image data 100%.
  • Exaggerate scales the wave amplitudes. When exaggerate == 1, the waves represent the true data; higher values just boost.

Instanced DFT

  • This shows all the individual waves that combine to form the signal.
  • The waves animate, this part isn’t mathematically accurate :slight_smile: .
  • This uses instanced lines, which was a first for me.

image
image1484×1150 192 KB

image
image910×788 74.6 KB

image
image1440×1300 292 KB

3 Likes
2

It’s good.

Is it possible to filter out the high frequences and see how much the image quality would degrade?

1 Like
3

Thanks! You definitely could. There are a few things that would need to be worked. It applies the FFT on a single row and column. You could build in a frequency degradation/compression visual on a single row with this. To remove higher frequencies from the entire image, you’d have to run the DFT on the full image, and I’d probably want to use some prebuilt FFT (Fast Fourier Transform). It’s also solving the FT on the grayscale image, which you can see in the surface image height, even though I overlay the colored image on top.

1 Like