Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/jeeliz/jeelizglassesvtowidget

JavaScript/WebGL glasses virtual try-on widget. Real-time camera experience, robust to all lighting conditions, high-end 3D PBR rendering, easy integration, fully customizable.
https://github.com/jeeliz/jeelizglassesvtowidget

3d augmented-reality camera glasses javascript pbr real-time try-on virtual virtual-mirror vto webar webcam webgl widget

Last synced: 6 days ago
JSON representation

JavaScript/WebGL glasses virtual try-on widget. Real-time camera experience, robust to all lighting conditions, high-end 3D PBR rendering, easy integration, fully customizable.

Awesome Lists containing this project

README 

        
# Glasses Virtual Try-on Widget



**WARNING: This repository (Jeeliz VTO widget) is for our legacy solution. For our new AI powered solution presented on [jeeliz.com](https://jeeliz.com), where glasses 3D models are done from pictures extracted from the product page, you don't need to integrate Jeeliz VTO widget. In this case we directly provide the integration code**



## Table of contents



* [Why it matters](#why-it-matters)

* [Features](#features)

* [Demonstrations](#demonstrations)

  * [Included in this repository](#included-in-this-repository)

  * [Demo app](#demo-app)

  * [They trust us](#they-trust-us)

* [Glasses 3D models](#glasses-3d-models)



* [Documentation](#documentation)

* [Misc](#misc)

  * [Test GlassesDB SKU availability](#test-glassesdb-sku-availability)

* [Compatibility](#compatibility)

* [Optimization](#optimization)

* [Hosting](#hosting)

* [License](#license)



## Why it matters



Here are the most important reasons why you should consider adding a virtual try-on feature to your eyewear e-commerce website:



1. **Enhanced Customer Engagement and Experience**: Virtual try-on technology allows customers to actively engage with your products and see how different frames look on their face. This interactive experience can increase customer engagement and satisfaction, leading to more informed purchase decisions and increased brand loyalty.



2. **Increased Sales**: Virtual try-on technology can increase sales by making it easier for customers to find frames that they like and feel comfortable wearing, leading to more purchases and fewer abandoned carts.



3. **Competitive Advantage**: Adding a virtual try-on feature can give you a competitive advantage over other eyewear e-commerce websites that do not offer this feature, leading to increased brand perception and customer loyalty.



## Features



* real-time web based glasses virtual try on,

* light reconstruction (ambient + directionnal),

* very robust to:

  * lighting conditions (back light, side light),

  * facial variations (bearded people, hair partially covering the face, ...),

* works both on mobile (IOS, Android) and desktop,

* lightweight (2.1MB transferred for the demo including 3D models),

* high end 3D engine with:

  * physically based rendering (PBR),

  * raytraced shadows,

  * deferred shading,

  * temporal antialiasing.



## Demonstrations



### Included in this repository



* [Static Integration demo (`index.html` of this repository)](https://jeeliz.com/demos/jeelizWidgetGitPublicDemo)



* [React/Vite/NodeJS 18 Integration demo](/reactViteIntegrationDemo)



### Demo app



* [Jeeliz sunglasses web application (not included in this repository)](https://jeeliz.com/sunglasses)



### They trust us



* **Lensway**: you can test it here: [Reverse - matte dark blue product page](https://www.lensway.se/reverse-matte-dark-blue-frame-8656) (click on *Prova Digitalt* button below the product picture). Following Lensway design guidelines, the rendering is very simplified (no lenses, no shadows, no too shiny reflections),



* **Jean Paul Gaultier**: You can test it here: [Arceau Gold product page](https://fashion.jeanpaulgaultier.com/en/products/the-gold-55-3175-sunglasses) (click on the *Virtual Try-on* button). As a luxury brand, *Jean Paul Gaultier* is very attached to the realism of the rendering and the quality of the AR experience,



* **Pardon!**: You can test it here: [sunglasses Trou de Fer](https://www.pardon.re/lunettes-de-soleil-trou-de-fer.html) (click on the *VIRTUAL TRY ON* button on the bottom right of the product picture). As the iconic fashion-wear brand from the island of Réunion, *Pardon!* need a high-quality graphic rendering to show the quality of the materials of their sunglasses, especially for the engraved wooden branches,



* **Zeelool**: you can test it here: [Street-Artist product page](https://www.zeelool.com/goods-detail/ZVFT0271-01) (click on *AR Try on* on the top left of the product picture. They are still using a deprecated version of the viewer so the tracking jitters a bit).



## 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](/glassesSKU.csv) file.



If you want us to add specific glasses models to GlassesDB, please contact us at `contact__at__jeeliz.com` or [here](https://jeeliz.com/#contact).



## Documentation



You can find the technical documentation in [doc.pdf](/doc.pdf).



## Misc



### Test GlassesDB SKU availability



In some cases, SKU can be generated dynamically from the backoffice of the glasses e-commerce website. It can be `__`. We need to test if this SKU is in *GlassesDB* in order to display the Virtual Try-on button to the user.

To do this, request with `GET` or `POST` method (using an `XMLHttpRequest` for example):



```

https://glassesdbcached.jeeliz.com/testSku/

```



You can test it here:



* [For existing SKU "rayban_aviator_or_vertFlash"](https://glassesdbcached.jeeliz.com/testSku/rayban_aviator_or_vertFlash)

* [For non-existing SKU "notASKU"](https://glassesdbcached.jeeliz.com/testSku/notASKU)



## 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.



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](http://webglreport.com/?v=1) (about your `WebGL1` implementation),

* a screenshot of [webglreport.com - WebGL2](http://webglreport.com/?v=2) (about your `WebGL2` implementation),

* 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.



## Optimization



If you meet some performance issues, please first:



* Check that you are using the latest main script ( `/dist/jeelizNNCwidget.js` ),

* Check that your browser is updated (Chrome is advised), check that your graphic drivers are updated,

* Enter `chrome://gpu` in 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](https://jeeliz.com/sunglasses) ) is to slow down the glasses rendering once the user has clicked on a button using:

 ```

JEELIZVTO.relieve_DOM()

```

For example,`JEELIZVTO.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:

```

JEELIZVTO.switch_slow( isSlow,  intervalMs)

```

Where `intervalMs` is the interval in milliseconds between 2 rendering loops.



## Hosting



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.



## License



[Jeeliz VTO commercial software license](/LICENSE)