3D waterfall plot in 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.

Sample 1 Sample 2
Sample 3 Sample 4
Some samples.

Find the project on Github.