Seeing Sounds with ThreeJS + WebGL [Intro]
The web has moved forward since those days with the introduction of HTML5 and the canvas element, providing an improved alternative to flash. The output of ThreeJS actually runs inside an HTML5 canvas element, as it is based on WebGL, a 3D renderer supported by modern browsers.
WebGL allows the display of interactive 3D experiences and animations without the use of any additional plugins. The reason we're using ThreeJS instead of directly diving into WebGL is because it abstracts us from a lot of complexity, allowing us to focus more on the experience we are creating rather than more technical stuff within WebGL.
Creating a music visualizer
The aim of this tutorial series is to learn ThreeJS whilst building a cool music visualizer, similar to this:
As you can see in the music experience, there are a number of separate aspects to the visualization:
- A 'star field' at the top
- A floor, or terrain at the bottom
- Balls that animate with the music
- Colour changes
- The light which you can control the direction of
This tutorial will be broken up into parts addressing each of the aspects above, with each tutorial building on the previous. We'll end up with the full scale visualization.