Three.js Music Visualizer With Shaders For Beginners

In this video we'll create a very cool music visualizer with Three.js using shaders (GLSL), a cool noise function and much more.
Live Demo:
morphing-visualizer.netlify.app/
Links Mentioned In The Video:
Starter Files:
github.com/visionary-3d/morph...
Gavoronoise ( The noise used in the video ):
www.shadertoy.com/view/llsGWl
( in case you want to see the raw code of the noise we start with, you can find it here:
github.com/visionary-3d/noise... )
Improved Color Ramp Macro Code (this one is a little bit different than the one used in the video):
github.com/visionary-3d/utils...
SoftGlitch Pass File:
github.com/visionary-3d/utils...
( NOTE: the final project's source isn't here. reason is as follows :
I want people to watch my videos rather than just taking the source. Thank you for understanding 🙂)
Chapters:
00:00 - Intro
01:14 - Project Setup
03:12 - Noise Function
10:55 - Animation
16:33 - Colorizing
26:01 - Visualizing Music
39:08 - Postprocessing
42:01 - Outro
#music_visualizer
-----------------------------
Visionary 3D:
Twitter Account:
/ 3d_visionary
Shaders Crash Course:
• Three.js Shaders (GLSL...
My Shaders Playlist:
• Shaders
Three.js Boilerplate:
github.com/visionary-3d/three...
#threejs
#3d
#3danimation
#glsl

[@richardegil]

Loving the shader videos, you have a very good approach to teaching this stuff.

[@visionary_3_d]

Thank You! 🙏

[@InverserPro]

Thank you, bro. It's very cool effect! NEED More video about shaders)

[@kaifrabi5244]

Awesome awesome awesome! Keep these shaders videos coming.

[@visionary_3_d]

Roger That!

[@neerajkrishnang3916]

For anyone having issues playing audio, you may need to move the load() function of the visualizer within a user-triggered button or something like that.(It complains about not being able to start an Audio context automatically otherwise)
For example,
const soundFields = {
start: () => { visualizer.load(TRACK) },
stop: () => { visualizer.sound.stop() }
}
gui.add(soundFields, 'start' )
gui.add(soundFields, 'stop' )
There's probably a better way to do this though.

[@cesargamer1231]

Really good video!

[@visionary_3_d]

Live Visualizer Demo:
morphing-visualizer.netlify.app/
And you can get the improved COLOR_RAMP macro ( used in the video ) here :
github.com/visionary-3d/utils/blob/main/functions/glsl/macros.glsl
SoftGlitch Pass File:
github.com/visionary-3d/utils/blob/main/postprocessing/passes/glitch/SoftGlitch.js

[@HuynhLuong227]

Thank you 🎉🎉🎉, learn little shaders

[@myosotisalderson]

Thank you

[@atomauro]

( NOTE: the final project's source isn't here. reason is as follows :
I want people to watch my videos rather than just taking the source. Thank you for understanding 🙂)
hey baby thats why we are here

[@visionary_3_d]

Thanks for being here ❤

[@atomauro]

@@visionary_3_d well zuk it

[@mingothemongo4466]

awesome

[@visionary_3_d]

🙏 Thanks

[@churuiliu5155]

Thank you so much for your tutorial! I’m wondering how can I bumble this whole project and generate one html so I can link it to other html file?

[@SantiagoBatracio]

Hi, is it possible to load a .gltf file as the mesh instead of the icosphere? I want to apply the shader to a model I made but can't make it work. I'm importing the gltf loader and following the documentation but it throws me an error: "Error: fetch for "localhost:####/model.gltf" responded with 404: Not Found" Any ideas? :(

[@fwdflashwebdesign]

Just a thought.
If you want to teach take it slow and explain each concept with patience...

[@visionary_3_d]

Great Feedback! I really appreciate it 🙏
In each and every one of my videos I can see some parts where I explain things really fast.
An instance of that in this one is the "color_ramp" part which I am making a dedicated video about.
So just feel free to let me know which part of my videos are confusing and I'll consider making a dedicated video for that section :)

[@duoduoo6732]

@@visionary_3_d i like fast teaching. it's saving time and make understanding simpler for me. Anyway we can config play speed in youtube