on webgl, Writings, Tutorials, ThreeJS

Seeing Sounds with ThreeJS + WebGL [Intro]

This tutorial is aimed at anyone wanting to learn three.js who already have good knowledge of HTML and JavaScript.

Why ThreeJS?

ThreeJS is a javascript library that enables us to create 3D graphics to be displayed in a web browser. In the past, graphics on the web were often created with software such as Adobe Flash, which required those viewing the media to have Flash Player installed - that was a bit of a pain especially for those running iOS where Flash support has been removed.

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.

Go to part 1