Search code examples
javascriptcanvasthree.jsface

Manipulate Facial Details on Canvas

I kinda got lost on this, I'm trying to do some (aging booth) app using JavaScript that needs to do the following:

  1. Take photo using webcam

  2. Detect face and facial details and overlay a PNG on them (some wrinkles etc..)

  3. Morph/manipulate the face to make it look old (drag the nose a bit down, drag the chin etc..)

  4. Maybe create a 3D model of the taken photo and try to animate the lips and make the eyes Blink etc.

Now, I could achieve the face detection and I'm getting the Points and Vertices for all the facial details using BRF, and I succeeded in overlaying a PNG over that anyway what I'm lost about now currently is, what is the right way to achieve Facial Details manipulation, or maybe facial details animation, any advice to put me on the right path is greatly appreciated!

Solution

  • If you are simply working off a photo, I would use the vertices from BRF to build a geometry and map the face image as a texture on top of it. Then you could build a tool to move the vertices around and the face would stretch with them, since the face texture is already mapped to the geometry surface.