3D waterfall plot in WebGL

3D waterfall plot in WebGL

Jan 27, 2017
Categories: DSP, Hacks
Tags: javascript, webgl

In 2016, I finally learned OpenGL.

So I decided to ditch THREE.js and rewrite my old Waterfall-Plot project in pure WebGL. The only external Javascript library used is gl-matrix for matrix transformations.

All the line offsetting (z-direction in time, y-direction for frequency magnitude) is now done directly in the shader. This makes the animation much smoother, as no THREE.js points/lines have to be created and destroyed anymore. It also allows more flexibility in color effects.

To hide the lines behind each other, a gl.LINE_STRIP of triangles is rendered for each line. DEPTH_TEST is not enabled, the lines and triangles are just rendered in the right order.

Live Demo

Press zxcvb for some color presets.

Use q for enabling/disabling lines, and wertyu for changing the line color. Use a for enabling/disabling the stripes, and sdfghj for changing their color. Use 1234 to change line thickness.

Code on Github

← ETH supercomputing for beginners How to buy a car in the US as a foreigner →