Creating an Interactive Spectrogram Using Three.js and GLSL Shaders.

My Recommended Reading list! (Links are Amazon affiliate links, so buying anything through them within 1 day of clicking supports the channel!)
Nonfiction:

Fiction:

Useful Links:

00:00 Intro
1:29 Creating HTML File
4:37 Setting Up HTML File
6:09 Visualization of the Goal (Blender)
8:00 Defining the Scene/Geometry
17:15 Purple Mesh (Result #1)
18:03 GLSL Shaders (Displacement)
28:40 Bumpy Red Mesh (Result #2)
28:59 Color-Height Variation
32:40 Colorful Bumpy Mesh (Result #3)
33:06 Adding Motion
41:00 Moving Heightmap (Result #4)
41:35 Adding the Microphone
47:52 Linear Spectrogram (Result #5)
48:46 Log Spacing
53:19 Final Result!

[Hobby_Technology]

CALEB GANNON?
I used to watch your vintage cube videos all the time, but stopped about 2 years ago when I quit Magic, and when I decided to look up Spectrogram tutorials for a project I'm working on, I found this video and only made it about 2 minutes in before I recognized your voice and was absolutely surprised to find that the vintage cube guy is now helping me on a technical problem, fascinating!

[Evan-dvfy]

Love the blog, Caleb! I always like these videos even if I don't fully understand them.

[markj]

Next time do it on cube...a vintage cube ;)

Great video! It’s funny to hear the same emotion in your voice when you find a bug in your code as when you realize that you made mistake in Magic lol.

Glad you’re building this community. You have some very creative viewers (as seen in your card contests) and I’m curious to see how they’ll expand upon your ideas in this video. Can’t wait for the next one!

[bijan]

Keep going, your videos are top notch!

[jax]

I love these videos and would love to learn more about machine learning/AI your educational content is super cool and super technical!

[egh]

Caleb, as an electrical engineer and acoustician with limited coding experience this is amazing! Thank you! Do you, or have you tried, writing software to analyze time windowed sine sweeps for impulse response analysis? Would love to discuss if you have time.

[DavidV_Phi]

Really cool!
Would be interesting to make it into a voice-recognition tool (e.g. through PCA, or some other multivariate technique.)
Very enjoyable to watch your videos!

[binarybotany]

Hey! `computeFaceNormals` is not necessary and actually doesn't exist on geometry. :)

[gustavofreitas]

Nice video Caleb! It's really well explained! But for some reason I'm just unable to get the purple mesh after copying your code from the site. Perhaps I'm just plain stupid, but for some reason when I try to run the html file on chrome it only displays the text "// <- Shaders go here. ", and after I delete it, then it displays no text. I'm using visual studio code for the coding and it's prompting one error at the end of the code where it expects a ".javascrypt" instead of "</html>". I don't know what to do and would appreciate any help. Sorry for the question if it's pretty basic, I've just never programmed in html.

Edit: I figured it out lol, was just missing a final curly bracket

[menachemabrams]

Can you be my Pre-Calc teacher? 😂 My high school teachers aren't doing the job

[billowen]

I've gotta know why you have firefox, edge and chrome on your taskbar haha