Coding a 3D Audio Waveform Visualizer with JavaScript + Three.js

Опубликовано: 29 Сентябрь 2024
на канале: Suboptimal Engineer

10,643

339

In this game dev experiment, we go over building a 3D audio waveform visualizer using Three.js + 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 - https://github.com/SuboptimalEng/thre...
🐦 Twitter - / suboptimaleng
💻 GitHub - https://github.com/SuboptimalEng
🌎 Website - https://suboptimaleng.com

== [ Resources ] ==
Three.js Docs - https://threejs.org
Book of Shaders - https://thebookofshaders.com
Three JS Guide - https://sbcode.net/threejs/scene-came...

== [ Timestamps ] ==
00:00 React + Three.js Setup Guide
01:44 Connect HTML + Web Audio API
03:45 Three.js 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