A GLSL playground with face tracking

Sure you've got your HTML5 face tracking demos, and you've got your GLSL live coding environments, but do you have both rolled into one? Since you're on this webpage, the answer is yes.

Shaderboy is a GLSL playground with a live fragment shader coding environment. It performs face tracking and supplies the fragment shader with facial landmark coordinates. Click Save & Compile or Ctrl-S in the editor to update the shader running in the canvas.

Two sample effects are commented out on lines 58 and 61-62. An effect that reveals facial landmarks is commented out on line 65. Un-collapse their functions and recompile to see what they do.

The shader's uniforms for landmarks are:

Coordinate: center of left eye
Coordinate: center of right eye
Line with 3 coordinates along bridge of nose
A unitless slope between the chin and the bridge of the nose
Coordinate: center of mouth
How open the mouth is in pixels
All 70 of the tracked landmarks (including the ones listed above)

Shaderboy uses clmtrackr for face tracking and CodeMirror for its coding interface.