Shaderboy

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:

u_leftEye

Coordinate: center of left eye

u_rightEye

Coordinate: center of right eye

u_noseBridge

Line with 3 coordinates along bridge of nose

u_faceUpVector

A unitless slope between the chin and the bridge of the nose

u_mouth

Coordinate: center of mouth

u_openMouth

How open the mouth is in pixels

u_faceVertices

All 70 of the tracked landmarks (including the ones listed above)

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