Coding a 3D Audio Waveform Visualizer with JavaScript +

In this game dev experiment, we go over building a 3D audio waveform visualizer using React Web Audio API. We start off by setting up the React project with Tailwind CSS. Then we get audio frequency data from the HTML element using the Web Audio API and send that to the Three JS shader material. Finally, we update our vertex and fragment shaders for every frame and display the audio waveform in 3D. 📖 Code - 🐦 Twitter - 💻 GitHub - 🌎 Website - == [ Resources ] == Docs - Book of Shaders - Three JS Guide - == [ Timestamps ] == 00:00 React Setup Guide 01:44 Connect HTML Web Audio API 03:45 Shader Material 04:46 Vertex Shaders Explained 07:57 Waveform Vertex Shader 08:43 Fragment Shaders Explained 10:01 Rainbow Fragment Shader 10:52 Demo == [ Tags ] == #suboptimal #metaverse #threejs