search

jeeliz / jeelizFaceFilter

Javascript/WebGL lightweight face tracking library designed for augmented reality webcam filters. Features : multiple faces detection, rotation, mouth opening. Various integration examples are provided (Three.js, Babylon.js, FaceSwap, Canvas2D, CSS3D...).
https://jeeliz.com
Apache License 2.0
2.68k stars 533 forks source link

CSS3 DIV ~ image position in relation to camera #3

Closed andrewdeutsch closed 6 years ago

andrewdeutsch commented 6 years ago

Hey guys, I'm playing with the div project, replacing the rectangle with an image. That was my only change. I notice when rotating the camera away from my face, the image flies off wildly. I've played with the sensitivity settings and it still happens. Do you have any suggestions?

xavierjs commented 6 years ago

Have you tried to change the last component (along Z axis) of the positionOffset: [0,0.1,-0.2] settings ? For example in https://github.com/jeeliz/jeelizFaceFilter/blob/master/demos/CSS3D/comedy-glasses/demo_comedyGlasses.js at line 14. It will displace the DIV plane along the Z axis and it will have an influence when moving the head along the Y axis (looking left<->right)

andrewdeutsch commented 6 years ago

I have. The issue doesn't result from head movement, it results from phone movement. i think it would be amazing if the image just stayed vanished instead of flying away when the camera movement becomes too much. is that possible?https://imgur.com/a/DJs51LX

xavierjs commented 6 years ago

I think it is because the detection state is too stabilized. On line 181 if (ISDETECTED && detectState.detected<SETTINGS.detectionThreshold-SETTINGS.detectionHysteresis){ change the detected state to hide/to show the div.

If you set a higher value for detectionThreshold: 0.5, (at line 8), the detection will be considered as lost more easily. You could try these parameters :

detectionThreshold: 0.9, // sensibility, between 0 and 1. Less -> more sensitive
detectionHysteresis: 0.02,

so the detection will be considered as lost if detectState.detected<0.88 (instead of 0.4 with the current parameters) and the face will be detected if detectState.detected>0.92

andrewdeutsch commented 6 years ago

That did it! Thanks, Xavier!