Virtual Eyewear Try-on sample project

Virtual Eyewear Try-on sample uses the VisageAR API to implement a simple augmented reality application for virtual try-on of eyeglasses.

Installing and running the project

The project must be installed on a web server in order to run (it can not run from a local disk). For a quick trial from Visage Technologies web server, click here and choose Virtual Eyewear Try-on.

To install the application on your own web server, upload folders lib and Samples to your web server. To run the application access the Samples/VirtualEyewearTryOn/eyewear.html page via a web browser.

The application must be licensed in order to function. Licensing is based on License Key Files. To obtain the License Key File:

1. Contact your Visage Technologies contact person in order to obtain a license key.
2. Copy the obtained license key file into your application folder (e.g. samples/VirtualEyewearTryOn).
3. Edit VirtualEyewearTryOn/eyewear.html. Replace the "dev_html5.vlc" in variables licenseName and licenseURL at the bottom of the file with the name of your license key file.
4. NOTE: License Key File must be preloaded before registration calling VisageModule.FS_createPreloadedFile() function. An example of how this is done in the sample:

   
   VisageModule.FS_createPreloadedFile('/', licenseName, licenseURL, true, false, function(){ },  function(){ alert("Loading License Failed!") }); 	
    

For further information please read licensing section of the documentation.

Using the sample application

• Running the sample requires a recent browser.
• The SDK needs to download its data files before using the application.
• Allow the site to access your camera by choosing "Allow" in the browser's pop-up bar.
• Look straight at the camera and glasses will appear.
• Other glasses models are chosen using the choice bar.
• Adjust the inter-pupillary distance by changing IPD value in the upper right corner to influence the tracker z-axis translation and calibrate the size of the glasses, so they appear in real-life size with respect to your face.

Implementation overview

Virtual Eyewear Try-on is implemented in HTML and JavaScript using the VisageAR API for rendering and face tracking, three.js library and MediaDevices.getUserMedia() API to access camera.
For information on preparing models for use with VisageAR see the AR modelling guide.

Browser compatibility

Virtual Eyewear Try-on sample is tested on the recent browsers on Windows, Mac, Android and iPhone platforms. Results are represented in the following table (NOTE: Application is not adapted to mobile devices.).