breathingcyborg/mediapipe-face-effects

Realtime Face Effects in Browser using mediapipe and three js.

Mediapipe Facemesh Effects

Realtime facemesh effects using mediapipe and Three JS. Works realtime even on older CPU like AMD Semprom 145.

Demo

Demo Link

Todo

• add more face effects
• make it work on older android phones

Building and running on localhost

Install dependencies:

yarn

Start development server:

yarn serve

Open localhost:8080

Preparing glasses 3d model.

When using custom 3d glasses make sure the model is oriented in the right way. You can use three js editor or other tools like gltfviewer to check or correct orientation of glasses.

Limitations

Face Transform Module is not available in facemesh javascript. So it does not give proper depth / z coordinates. So 3d effect look weird when using perspective camera.

While writing code to places objects relative to facemesh model, facemesh model UV visualization can be helpful.

mediapipe-face-effects's Issues

Hello!

Hi, I know this is not an issue, but can we have a quick chat?
I'm implementing a similar thing with webcam and i'm having some troubles.

Thanks in advance :)

Can I get all the faces on the screen to wear glasses?

Can I get all the faces on the screen to wear glasses?

I see [ maxNumFaces ] in landmarks_provider.js ,
I would like to know if this parameter will work

Thank you 👍

Face morphing?

Interesting work. Do you have any ideas how can I do nose slimming effect? We have the facemesh, but not sure how to morph it to slim nose.

How to test with a different glass file?

How do I test with a different glass file?
Also, I see a width of 1.4 hard-coded in glasses.js, how does it change with different 3d glass files?