Glasses Virtual Try-on Widget
Table of contents
- Glasses 3D models
- real-time web based glasses virtual try on,
- light reconstruction (ambient + directionnal),
- very robust to 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:
- Integration demo (demo.html of this repository)
- Jeeliz sunglasses web application (not included in this repository)
Video screenshot of Jeeliz Sunglasses:
Glasses 3D models
Glasses models are stored on the Jeeliz GlassesDB. Each model is identified 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 to GlassesDB, please contact us at
contact__at__jeeliz.com or here. We charge for this service.
As a static file
You can convert your own glasses GLTF 3D Model to a proprietary JSON file accepted by this widget using Jeeliz Glasses Studio 3D. You can download:
- The PDF documentation about GLTF models specs and how to import your model to Jeeliz VTO widget
- Some samples of GLTF glasses 3D models
You can use both models from GlassesDB and your own static models. Glasses Studio 3D is a free application and you keep the IP on your exported 3D models. Unlike this widget, Glasses studio 3D works:
- Only on desktops, with a fullHD screen resolution (1920x1080),
- Your GPU device needs to be able to do MRT (Multi Rendering Targets) on at least 4 targets (i.e. it may not work on deprecated or very cheap hardware).
However, the capabilities of Glasses Studio 3D are below what we offer with GlassesDB. This is a comparison:
|Feature||Glasses Studio 3D||GlassesDB|
|PBR material parameters||X||X|
|PBR params texture||X|
|3D model compression||X|
This library relies on Jeeliz WebGL Deep Learning technology to detect and track the face using a neural network. You can find the technical documentation in doc.pdf.
Here are some articles to help you for integration:
- How to use the Jeeliz VTO widget in your everyday projects
- Advanced use of the Jeeliz Widget VTO API
- Create a VTO experience from start to sale
If you need more help, we offer development services and customized support. You can contact-us here.
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, MediaStream API should be implemented in the web browser, otherwise FaceFilter API will not be able to get the camera video feed. Here are the compatibility tables from caniuse.com here: WebGL1, WebGL2, MediaStream API.
If a compatibility error is triggered, please post an issue on this repository. If this is a problem with the camera 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 was not compatible or refuses to share its camera video stream, an image based fallback version was available til January 2020. The server side webservice generating the rendering has been undeployed.
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.
If you meet some performance issues, please first:
- Check that you are using the latest main script (
- Check that your browser is updated (Chrome is advised), check that your graphic drivers are updated,
chrome://gpuin the URL bar and check there are no major performance caveats, that hardware acceleration is enabled, that your GPU is correctly detected,
The performance is adaptative. We do as many detection loops per rendering till we reach a maximum value (
7). If we cannot reach this value, the GPU will be running at 100%. The closer we are to this maximum value, the less latency we will observe.
So it is normal that the GPU is running at 100%. But it may be annoying for other parts of the application because DOM can be slow to update and CSS animations can be laggy.
The first solution ( implemented in Jeeliz sunglasses web-app ) is to slow down the glasses rendering once the user has clicked on a button using:
JEEFITAPI.relieve_DOM(300) will free the GPU during 300 milliseconds.
If you need to slow down the rendering to free the GPU during an undertermined period of time, you can use:
JEEFITAPI.switch_slow(<boolean> isSlow, <int> intervalMs)
intervalMs is the interval in milliseconds between 2 rendering loops.
This widget access the user's camera 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.
Apache 2.0. This application is free for both commercial and non-commercial use.