Three.js Music Visualizer With Shaders For Beginners

[@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.

[@richardegil]

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

[@visionary_3_d]

Thank You! 🙏

[@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

[@kaifrabi5244]

Awesome awesome awesome! Keep these shaders videos coming.

[@visionary_3_d]

Roger That!

[@InverserPro]

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

[@noahsarcana]

This is exactly what I need... I have no word. Do you like music ?

[@visionary_3_d]

I do like music!

[@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

[@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?

[@cesargamer1231]

Really good video!

[@HuynhLuong227]

Thank you 🎉🎉🎉, learn little shaders

[@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

[@myosotisalderson]

Thank you

[@mingothemongo4466]

awesome

[@visionary_3_d]

🙏 Thanks