Three.js Music Visualizer With Shaders For Beginners

Video Description

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: https://morphing-visualizer.netlify.app/ Links Mentioned In The Video: Starter Files: https://github.com/visionary-3d/morphing-visualizer-starter Gavoronoise ( The noise used in the video ): https://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: https://github.com/visionary-3d/noise-collection/blob/main/glsl/gavoronoise.glsl ) Improved Color Ramp Macro Code (this one is a little bit different than the one used in the video): https://github.com/visionary-3d/utils/blob/main/functions/glsl/macros.glsl#L1 SoftGlitch Pass File: https://github.com/visionary-3d/utils/blob/main/postprocessing/passes/glitch/SoftGlitch.js ( 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: https://twitter.com/3d_visionary Shaders Crash Course: https://youtu.be/oKbCaj1J6EI My Shaders Playlist: https://youtube.com/playlist?list=PLTEbuqk52pICikiHfD-a52dxEav5UqMLy Three.js Boilerplate: https://github.com/visionary-3d/three-boilerplate #threejs #3d #3danimation #glsl