Virtual Glasses Try on

Implementation of virtual glasses using Three.js + TensorFlow.js + Facemesh model.

Experience the cutting-edge fusion of computer vision and augmented reality

Allowing users to try on various 3D glasses in real-time.

Live Demo

https://bensonruan.com/virtual-try-on-glasses-with-javascript/

Installing

Clone this repository to your local computer

git https://github.com/bensonruan/Virtual-Glasses.git

Install three.js

npm install --save three

Point your localhost to the cloned root directory

Browse to http://localhost/index.html

Face Keypoints

The facemesh detected keypoints that used for overlay the 3D Glasses:

• Middle between Eyes : 168
• Left Eye : 143
• Bottom of Nose : 2
• Right Eye : 372

Try glasses on

• Click "Try it On" to turn on the Webcam switch, and allowing the browser to access your webcam
• Wait for a few seconds to Load Model for face landmark detection
• Choose the 3d glasses you would like to try on, watch yourself in fashion

Notes

• Please note that on IOS Safari, cameras can only be accessed via the https protocol
• Facemesh model is designed for front-facing cameras on mobile devices, where faces in view tend to occupy a relatively large fraction of the canvas. MediaPipe Facemesh may struggle to identify far-away faces.

Library

• jquery - JQuery
• three.js - JavaScript 3D Library
• webcam-easy.js - javascript library for accessing webcam stream and taking photos
• facemesh - MediaPipe Facemesh is a lightweight machine learning pipeline predicting 486 3D facial landmarks to infer the approximate surface geometry of a human face

Credit 3D glasses models

• Sport Glasses B307 by hanchiahui
• Glasses 07 by Dokono Kinokoda
• Cartoon Glasses by Lucas_Bartolomeo
• Plastic Sunglasses by Incg5764
• Aviator sunglasses by Kimppo
• EyeGlasses by thelegendofwolf
• 3D frames generated in less than 10 seconds by VReeAI

Support me