3400 miles below

"3400 miles below" is an interactive Javascript demo, using WebGL and Web Audio to provide an immersive (albeit highly abstract) three-dimensional experience that mimics the operation of an small submarine ship. It's better to listen with headphones!

Flattr this

Once the immersion has been completed, the player is free to explore at her will, using the mouse and keyboard controls:

Mouse controls

  • Move: changes ship orientation (pitch and yaw)
  • Left and right click: steers ship forward and backward, respectively

Keyboard controls

  • Arrow keys, WASD keys: steer ship forward and backward, or rotate left or right
  • T, G: steer upward or backward respectively
  • F, H: steer leftward or backward respectively (doesn't rotate)

The ship, as every other submerged body, has a natural tendency to sink down.

Certain elements emit sound. This is spatially positioned, so the music will change as the player moves around. Some tracks will become inaudible, and some others will be heard more clearly, but all are in sync to form a unique song. Note that as ship speed is taken into account, the doppler effect can be experienced too.

Two canvas indicators provide some navigational information: a compass, and a pitch display.


(just in case your browser/computer don't play nicely with the demo)


This is actually an interactive version of an OpenGL demo I programmed several years ago, escena.org dentro v2, which was the demo winner at the Inspire demoparty 2008. Although there weren't more entries, but hey! :-)

I felt the concept of an abstract, unknown world could offer more than just following along a predefined path. Also, since the song basically consisted in a few sort-of-looping tracks, I thought this would be an ideal starting point to experiment with positional audio, through the Web Audio API.

For the most part, I haven't changed much of the visual side of the demo. Except the ground, which seemed a bit too crude as it was, so I've made it based on triangles instead of quads. And I removed the particles that form a text, since it didn't make sense now.

What has changed more is the audio. The original song had reverb in every track, so my first attempt to extract loops which included reverb as well sounded quite badly when the loop restarted (as it went from a very reverberated sound to an empty, almost dry one when starting). So I rebuilt the song without reverb, letting instead the magic of Web Audio and positioning to provide for the 'extra punch' that reverb provided before in the original song. The doppler effect added the missing eerie factor :-)

I've also learnt a thing or two about detecting collisions and simplifying scene hierarchies with Three, so I should be posting about that in the blog at some point.


Used libraries:

Written with vim (and occasionally gEdit) ;-)