Here is a post about my experiment of Web Audio API. Throughout this article, I will show how I made the sound visualizer in WebGL.

See the live demo (works with the latest Google Chrome and Firefox Nightly)

Now, let’s see how we load the music and make the cube moving. As usual, you can find all the source code on my github account.

1. Web Audio API part: Load the music and get the frequency data
2. WebGL part: Make the cubes react regarding the sound
3. Useful links and free resources

Well, I get started learning 3D concepts/coding, so this is all new for me. I’ve done a first try to build an application that runs in WebGL-enabled browsers. After spending some days on it, I finally have something fit to be seen.

This post deals with how I’ve made that little random terrain generation application using the Three.js framework and the diamond-square algorithm. Obviously, this works with the new generation of web-browsers (with WebGL support). I have tested it on Firefox 9, 10 and Chrome 16, 17. Sorry for Internet Explorer fans, that app doesn’t support because it uses the WebGL context (perhaps switching in canvas rendering would work, I haven’t tested yet).

Go to the live demo page

You can run the live demo at this address. As always, you can find the source code on my GitHub profile.
Here are some screenshots of what the app can do but not only:

Of course, the application gives us more features than applying a texture or showing a mesh. I invite you to discover and to play with it. By the way, I would really appreciate your feedback. :-)

1. The diamond-square algorithm
2. The scene
   1. Working with shapes, vertices, meshes and textures
   2. The camera
   3. The rendering
3. Changeable parameters
4. Performance
5. Bottom line