bruce0418 / jeelizfacefilter

Javascript/WebGL lightweight face tracking library designed for augmented reality webcam filters. Features : multiple faces detection, rotation, mouth opening. Various integration examples are provided (Three.js, Babylon.js, FaceSwap, Canvas2D, CSS3D...).

Features

Here are the main features of the library:

• face detection,
• face tracking,
• face rotation detection,
• mouth opening detection,
• multiple faces detection and tracking,
• very robust for all lighting conditions,
• video acquisition with HD video ability,
• mobile friendly,
• interfaced with 3D engines like THREE.JS, BABYLON.JS, A-FRAME,
• interfaced with more accessible APIs like CANVAS, CSS3D.

Demonstrations

Included in this repository

These demonstration are included in this repository. So they are released under the FaceFilter licence. You will probably find among them the perfect starting point to build your own face based augmented reality application:

• BABYLON.JS based demos:

  • Boilerplate (displays a cube on the user's head): live demo

• THREE.JS based demos - specific README about THREE.js based demo problems:

  • Boilerplates:

    • Boilerplate (displays a cube on the user's head): live demo
    • Same boilerplate but using dist/NNClight.json as neural net: live demo
    • Same boilerplate but using dist/NNCwideAngles.json as neural net: live demo
    • Boilerplate with ES6 instead of ES5: live demo
    • Multiple face tracking: live demo
    • GLTF fullscreen demo with HD video: live demo
    • Boilerplate with 2 canvas: 1 for FaceFilter and 1 for THREE.JS (not recommended)

  • AR 3D demos:

    • Daft Punk (put the iconic helmet): live demo
    • Star Wars: Darth Vader: live demo
    • Harry Potter (say "Lumos!"): live demo
    • Halloween Spiders (you've got a spider in your mouth): live demo
    • Werewolf (turn yourself into a werewolf): live demo
    • Angel/Demon (discover who of the angel or demon will win in this animated scene): live demo
    • Anonymous mask and video effect: live demo
    • Rupy Motorcycle Helmet VTO: live demo
    • Dog: live demo
    • Butterflies animation: live demo
    • Clouds above the head: live demo
    • Casa-de-Papel mask: live demo
    • Miel Pops glasses and bees: live demo
    • Football makeup: live demo
    • Tiger face filter with mouth opening detection (strong WTF effect): live demo
    • Fireworks - particules: live demo

  • face painting or deformation:

    • Face deformation: live demo
    • Face cel shading: live demo

  • demos linked with tutorials:

    • Luffy's Hat: live demo
    • Statue Of Liberty: live demo
    • Matrix: live demo

  • misc:

    • Head controlled navigation: live demo
    • Glasses virtual try-on: live demo

• A-FRAME based demos:

  • Boilerplate (displays a cube on the user's head): live demo

• CSS3D based demos:

  • Boilerplate (displays a <DIV> element on the user's head): live demo
  • Comedy glasses demo: live demo

• Canvas2D based demos:

  • Draw on the face with the mouse: live demo
  • 2D face detection and tracking - 30 lines of code only !: live demo
  • 2D face detection and tracking from a video file instead of webcam video: live demo

• CESIUM.JS based demos:

  • 3D view of the Earth with head controlled navigation: live demo

• Face replacement demos:

  • Insert your face into portrait art painting or film posters: live demo
  • Insert your face into an animated gif: live demo
  • The traditional faceSwap, fullscreen and with color correction: live demo

• Head motion control:

  • PACMAN game with head controlled navigation: live demo
  • Head controlled mouse cursor: live demo