Realtime 3D Face Capture

So, this is a little tool I did some time ago and was here getting dust. =)

It uses Mediapipe for face mesh capture – plus a trick of mine to convert it into textured 3D face model on-the-fly =) – and Babylon.js for 3D rendering. It can export the captured face as gltf.

Demo: face
Source-code: GitHub - imerso/facecap: Babylon.js + Mediapipe face capture

Requires a webcam!

26 Likes

this is INSANE! SO! COOL!

Wow Amazing GIF - Wow Amazing Great - Discover & Share GIFs | Gif, Cool gifs, Amazing

2 Likes

would be interesting if you published to github pages to make it more accessible!

Edit: :man_facepalming: click the demo link if you are as blind as me!

1 Like

It is on github pages, the link is on the original post. =)

1 Like

This is amazing! I believe this technique can be used for virtual space live conferencing calls by mapping webcam feeds to this and then map onto avatar meshes. Current approaches only display a square mesh of webcam feed beside the characters (could be for performance purposes).

2 Likes

Great stuff!
Right, webcam or stream, all the same, just pass the video element (that can be hidden) to MediaPipe constructor.

1 Like

Close to that, but not so straightforward. MediaPipe did not provide the 3D mesh directly, had to extract that manually. Also, coordinates were screen-space and the video was not directly mapped to the 3D mesh (there was no uv mapping). Needed to generate unwrapped mesh and remap the face roi to uv map to make it possible to generate the final 3D face. That happens in real-time.

3 Likes

But now that you did all that, it is that straightforward!
Cool :slight_smile:

1 Like

I’d like to run it to process images and export to models in a batch. How can I do that?
Thanks.

That would be perfectly possible, but with more development. The sample can export only a single camera image at once.

Thanks for the reply. I’m doing this in Python.

  1. The result face mesh is normalized. I can multiple x and y with the width and height of the image. What can I do about the z axis? How can I scale the z axis to make the mesh look good?

  2. For your code, how can I run it locally on my local Linux server?
    Do I need to configure node.js and how?

Thanks.

Not sure I understand your questions, so I’ll try to answer based on how I understood.

For [1], the rendered face is in 3D already, so you can scale it equally by x, y and z. Are you referring to modified code or the original one?

For [2], it is a standard web page (no node.js used), so you only need a web server on your local machine. I use Apache, but you can use anything, like httpd, xamp or even that python built-in micro server.

;in case 2,Where does facial data come from?Did it request from this website? If so, it may cause privacy disclosure. How can I avoid this problem

That comes from Google itself:

Check the javascript examples. What I did was convert the screen marks (which were essentially in 2D coordinates with unused z) to a real 3D mesh, by reprojecting them and auto generating UV for the mesh.

1 Like