Skip to content

JavaScript/WebGL glasses virtual try on widget. Real time webcam experience, robust to all lighting conditions, high end 3D PBR rendering, easy to integrate, fallback to server-side rendering

Notifications You must be signed in to change notification settings

lijualivenow/jeelizGlassesVTOWidget

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

54 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Glasses Virtual Try-on

Offer glasses virtual try on to your users with this JavaScript widget. It can be easily integrated on a website or in a mobile web application with a few lines of HTML code. The experience is in real-time: the user see his face like in a mirror, but with glasses on.

Features

These are the main features of this widget:

  • real-time webcam glasses virtual try on,
  • light reconstruction (ambient + directionnal),
  • very robust to all lighting conditions,
  • mobile friendly,
  • high end 3D engine with:
    • physically based rendering (PBR),
    • raytraced shadows,
    • deferred shading,
    • temporal antialiasing.

Demonstration

You can test it with these demos:

Here is a video screenshot of the Jeeliz Sunglasses application:

Fallback

A Fallback version was available til January 2020. The server side webservice generating the rendering has been undeployed. So now, if the user does not want to share its camera or if its implementation of WebGL is too minimalistic, a FALLBACKUNAVAILABLE error will be triggered.

About the technology

Documentation

This API uses Jeeliz WebGL Deep Learning technology to detect and track the user's face using a neural network. You can find the technical documentation in doc.pdf.

We have written some articles to help you for integration:

If you still need more help, we also offer development services. You can contact-us here.

Compatibility

  • If WebGL2 is available, it uses WebGL2 and no specific extension is required,
  • If WebGL2 is not available but WebGL1, we require either OES_TEXTURE_FLOAT extension or OES_TEXTURE_HALF_FLOAT extension,
  • If WebGL2 is not available, and if WebGL1 is not available or neither OES_TEXTURE_FLOAT or OES_HALF_TEXTURE_FLOAT are implemented, the user is not compatible with the real time video version.

In all cases, WebRTC should be implemented in the web browser, otherwise FaceFilter API will not be able to get the webcam video feed. Here are the compatibility tables from caniuse.com here: WebGL1, WebGL2, WebRTC.

If a compatibility error is triggered, please post an issue on this repository. If this is a problem with the webcam access, please first retry after closing all applications which could use your device (Skype, Messenger, other browser tabs and windows, ...). Please include:

Hosting

HTTPS only!

This widget access the user's webcam video stream through MediaStream API. So your application should be hosted by a HTTPS server (even with a self-signed certificate). It won't work at all with unsecure HTTP, even locally with some web browsers.

Glasses 3D models and materials

Glasses models and materials are stored on the Jeeliz GlassesDB. Each model is designed by a unique SKU. You can check the different models available by opening glassesSKU.csv file. If you want us to add specific glasses models, please contact us at contact__at__jeeliz.com or here.

So this library is not fully client side because the assets are hosted by our servers. If you want to manage your own assets you can use our generalistic face detection and tracking API, Jeeliz FaceFilter API. There is a demonstration included in that repository, using THREE.JS as 3D rendering engine, which can be a starting point, Miel Pops Glasses.

License

Apache 2.0. This application is free for both commercial and non-commercial use.

See also

Jeeliz main face detection and tracking library is Jeeliz FaceFilter. It handles multi-face detection, and for each tracked face it provides the rotation angles and the mouth opening factor. It is perfect to build your own Snapchat/MSQRD like face filters running in the browser. It comes with dozen of integration demos, including a face swap.

References

About

JavaScript/WebGL glasses virtual try on widget. Real time webcam experience, robust to all lighting conditions, high end 3D PBR rendering, easy to integrate, fallback to server-side rendering

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published