Interactive facial expressions of my housemate

[ozRocker]

I've just finished the morphing demo that I've been working on. Thanks everyone for your input! (especially @NasimiAsl who is the grandmaster of shaders)

What I'm trying to demonstrate here is morphing not just vertices, but textures as well.  I got this idea from Wrap3 which has this feature.  This is important with faces because redness and wrinkles will sometimes appear when you tense your face.  Unfortunately there is no built-in feature to do this but we were able to pull it off with some extra shader code.  I would've loved to add some specularity to the skin but I couldn't figure out how to do that with the custom material.  I know this is extreme detail but its a good test.  If the player is in the distance then it wouldn't be necessary.

I added a "Powered by Babylon.js" sticker so everyone knows that Babylon.js can do cooler stuff than Three.js hehe

Feel free to use the source code.

http://punkoffice.com/facial

 

[NasimiAsl]

so beauty (all is your job) 

[ozRocker]

13 minutes ago, NasimiAsl said:

so beauty (all is your job) 

and my patient housemate.  First time I scanned her for 2 hours but I forgot to put the dots on her face for reference points, so I had to make her do it again

[ozRocker]

For optimisations I made sure to use a texture atlas for all the morph textures.  Normally you can split up a texture atlas by playing with scale and offsets, but I couldn't do that here cos we're using a custom material, so @NasimiAsl helped me out with shader code that can read from the texture atlas.  I didn't want to have to load a texture file for every morph target

 

 

[MarianG]

Wonderfull  A 3 years ago I did something similar but with threejs, what a cool memories 

So I have a question.These 3 morphs are each independent, so if you modify one slider and after that another slider, the charatet will snap to the default position. This was your goal? or it's not technically possible yet, after you modify one target, to keep in position, even if you change another target.
I'm sorry if you do not understand, I do not know how to explain better, maybe a threejs demo will help me

And again, nice work 

[ozRocker]

19 minutes ago, MarianG said:

So I have a question.These 3 morphs are each independent, so if you modify one slider and after that another slider, the charatet will snap to the default position. This was your goal? or it's not technically possible yet, after you modify one target, to keep in position, even if you change another target.
I'm sorry if you do not understand, I do not know how to explain better, maybe a threejs demo will help me

yes I know what you mean.  You can combine morphs but the vertex movements will add up so if you are pouting then you blink your eyelids will go through the face, so I prevented the user from doing that with the controls.  Also, I'm not sure what to do about the textures.  I'd have to do some strange merge of multiple textures.  I should probably figure out a solution though 'cos I want the model to be able to blink while she's smiling or pouting.  If anyone has any suggestions I'm all ears!

[GameMonetize]

Woot really cool! feel free to give me a title, author and a 800x500 screenshot to be featured on babylonjs.com

[OzRamos]

Hey @ozRocker thanks for putting this project together, I've been studying and learning quite a bit from it! I've been working on a library called Handsfree.js  (based on BRFv4) and one of the things I'm researching is "puppetteering":

I'm still figuring everything out, but here's my work in progress:

Code: https://glitch.com/~anniemorph

Demo: https://anniemorph.glitch.me

I don't have much documentation yet for this specific experiment, but you can see how I'm doing it in /starter.js. Basically I calculate the distance between the mouth corners and adjust the morph influences by that amount.