Glasses Virtual Try-on
These are the main features of this widget :
- real-time webcam glasses virtual try on,
- fallback to picture based 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.
You can test it with these demos :
- Simple integration demo (demo.html of this repository)
- Jeeliz sunglasses application (not included in this repository)
Here is a video screenshot of the Jeeliz Sunglasses application :
About the technology
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.
WebGL2is available, it uses
WebGL2and no specific extension is required,
WebGL2is not available but
WebGL1, we require either
WebGL2is not available, and if
WebGL1is not available or neither
OES_HALF_TEXTURE_FLOATare 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 :
- a screenshot of webglreport.com - WebGL1 (about your
- a screenshot of webglreport.com - WebGL2 (about your
- the log from the web console,
- the steps to reproduce the bug, and screenshots.
If the user cannot use the realtime video version because its implementation of WebGL is too minimalistic or if he does not want to share his camera, the fallback version is displayed. On the fallback version the user upload a picture (or take a picture with his camera if he uses a mobile device) and the picture is processed server-side to overlay the glasses.
HTTPS only !
This widget requires 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.
You can use our hosted and up to date version of the library, available here :
which fetches the neuron network hosted here :
They are hosted in a content delivery network (CDN) using gzip compression. The script file is the same than
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.
Apache 2.0. This application is free for both commercial and non-commercial use.
We appreciate attribution by including the Jeeliz logo and a link to the Jeeliz website in your application or desktop website. Of course we do not expect a large link to Jeeliz over your face filter, but if you can put the link in the credits/about/help/footer section it would be great.
Jeeliz main face detection and tracking library is called Jeeliz FaceFilter API. 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 demo, including a face swap.