Jump to content

Interactive facial expressions of my housemate


ozRocker
 Share

Recommended Posts

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

 

Link to comment
Share on other sites

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

 

 

head_atlas_thumbnail.jpg

Link to comment
Share on other sites

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

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 ;)

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

  • 10 months later...

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":

595392383_ezgif.com-video-to-gif(3).gif.def9345cce111455cb7e639be5adbf94.gif

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...