{"id":44590210,"url":"https://github.com/lastcode802/glassarview","last_synced_at":"2026-02-14T07:01:14.576Z","repository":{"id":62398297,"uuid":"539040263","full_name":"lastcode802/glassarview","owner":"lastcode802","description":"Offer glasses virtual try-on to your users with this JavaScript widget. It can be easily integrated into an e-commerce website or into a mobile web application with a few lines of code. The experience is in real-time: the user see his face like in a mirror, but with glasses on.","archived":false,"fork":false,"pushed_at":"2022-11-07T19:25:35.000Z","size":2093,"stargazers_count":20,"open_issues_count":0,"forks_count":7,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-10-26T10:55:36.317Z","etag":null,"topics":["javascript","react","reactjs","realtime","tryon","typescript","virtual-try-on","virtual-tryon","virtual-tryon-ecommerce","virtualt","webgl","webgl2"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@lastcode802/glassarview","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lastcode802.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-09-20T14:44:52.000Z","updated_at":"2025-06-25T07:05:21.000Z","dependencies_parsed_at":"2023-01-21T04:43:06.616Z","dependency_job_id":null,"html_url":"https://github.com/lastcode802/glassarview","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/lastcode802/glassarview","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lastcode802%2Fglassarview","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lastcode802%2Fglassarview/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lastcode802%2Fglassarview/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lastcode802%2Fglassarview/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lastcode802","download_url":"https://codeload.github.com/lastcode802/glassarview/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lastcode802%2Fglassarview/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29438976,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-14T05:24:35.651Z","status":"ssl_error","status_checked_at":"2026-02-14T05:24:34.830Z","response_time":53,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","react","reactjs","realtime","tryon","typescript","virtual-try-on","virtual-tryon","virtual-tryon-ecommerce","virtualt","webgl","webgl2"],"created_at":"2026-02-14T07:00:43.227Z","updated_at":"2026-02-14T07:01:14.544Z","avatar_url":"https://github.com/lastcode802.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg width=\"150\" src=\"https://res.cloudinary.com/lastshop802/image/upload/v1662288637/logoSheroz_w9anft.png\" alt=\"MUI logo\"\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003elastcode802\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://res.cloudinary.com/lastshop802/image/upload/v1667798645/glassar_ozycvr.gif\" alt=\"MUI logo\"\u003e\n\u003c/p\u003e\n\n# Glasses Virtual Try-on Widget\n\n\n\nOffer glasses virtual try-on to your users with this JavaScript widget. It can be easily integrated into an e-commerce website or into a mobile web application with a few lines of code. The experience is in real-time: the user see his face like in a mirror, but with glasses on.\n\nYou can find more information in [Find \u0026 contact me](#contact-me).\n\n\n## Table of contents\n\n* [Features](#features)\n* [Demonstrations](#demonstrations)\n  * [Demo app](#demo-app)\n  * [Available Code](#available-code)\n  * [Props](#props)\n* [Glasses 3D models](#glasses-3d-models)\n  * [From GlassesDB](#from-glassesdb)\n  * [As a static file](#as-a-static-file)\n* [Misc](#misc)\n  * [Test GlassesDB SKU availability](#test-glassesdb-sku-availability)\n* [Compatibility](#compatibility)\n* [Optimization](#optimization)\n* [Hosting](#hosting)\n\n\n## Features\n\n* real-time web based glasses virtual try on,\n* light reconstruction (ambient + directionnal),\n* very robust to:\n  * lighting conditions (back light, side light),\n  * facial variations (bearded people, hair partially covering the face, ...),\n* works both on mobile (IOS, Android) and desktop,\n* lightweight (2.1MB transferred for the demo including 3D models),\n* high end 3D engine with:\n  * physically based rendering (PBR),\n  * raytraced shadows,\n  * deferred shading,\n  * temporal antialiasing.\n\n\n## Demonstrations\n\n\n### Demo app\n\n* [Storybook View](https://lastcode802.github.io/glassarview/)\n\n\n## Glasses 3D models\n\n### From GlassesDB\n\nGlasses 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](https://docs.google.com/spreadsheets/d/1MXMHEPIN09zUz_xCiP7d2CM-unbBTgU86aejkshfpwE/edit?usp=sharing) file.  \n\n\n### As a static file\n\nYou can convert your own glasses GLTF 3D Model to a proprietary JSON file accepted by this widget using [Jeeliz Glasses Studio 3D](https://jeeliz.com/glassesStudio3D/). You can download:\n\n* [Some samples of GLTF glasses 3D models](https://jeeliz.com/glassesStudio3D/testFiles/GlassesStudio3DSampleFiles.zip)\n\nYou 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.\nUnlike this widget, *Glasses studio 3D* works:\n\n* Only on desktops, with a fullHD screen resolution (1920x1080), \n* 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).\n\nHowever, the capabilities of *Glasses Studio 3D* are below what we offer with *GlassesDB*. This is a comparison:\n\n| Feature | Glasses Studio 3D | GlassesDB |\n| --- | :-: | :-: |\n| PBR material parameters | X | X |\n| diffuse texture | X | X |\n| normal texture  | X | X |\n| PBR params texture |  | X |\n| 3D model compression |  | X |\n| Guaranteed support |  | X |\n| Hosting |  | X |\n\n#\n## Available Code\n\n```jsx\nimport * as React from 'react';\nimport { GlassArView } from \"@lastcode802/glassarview\";\n\nfunction App() {\n  return (\n    \u003cGlassArView\n      modelname=\"rayban_aviator_or_vertFlash\"\n      canvasheight={500}\n      canvaswidth={500}\n    /\u003e\n  );\n}\n\nexport default App;\n```\n\u003cp\u003e Or \u003c/p\u003e\n\n```jsx\nimport * as React from 'react';\nimport { GlassArView } from \"@lastcode802/glassarview\";\n\nfunction App() {\n  return (\n    \u003cGlassArView\n      modelname=\"rayban_aviator_or_vertFlash\"\n      canvasheight={500}\n      canvaswidth={500}\n      buttonBackgroundColor=\"#FFE5B4\"\n      buttonFontColor=\"white\"\n    /\u003e\n  );\n}\n\nexport default App;\n```\n\n# props\n\t\t\t\n|     prop      |      type     |     default   |   example     |\n| ------------- | ------------- | ------------- | ------------- |\n|  modelname*  | string  | rayban_aviator_or_vertFlash  | This is the default model name you can set name of you choose to check glassdb \n| canvaswidth*   | number  | 1-(screen size)  | you can set any width as per your setting\n|  canvasheight*  | number  |1-(screen size) | you can set height as per your setting\n| buttonFontColor  | color  |  white-(any color) | you can set any color of button fonts\n|  buttonBackgroundColor | color  |#FFE5B4-(any color)  | you can set any color of button background\n\n\n\u003chr\u003e\u003c/hr\u003e\n\n\n\n## Misc\n\n### Test GlassesDB SKU availability\n\nIn some cases, SKU can be generated dynamically from the backoffice of the glasses e-commerce website. It can be `\u003cglassesMakerAsPrefix\u003e_\u003ccollection\u003e_\u003cmodelId\u003e`. We need to test if this SKU is in *GlassesDB* in order to display the Virtual Try-on button to the user.\nTo do this, request with `GET` or `POST` method (using an `XMLHttpRequest` for example):\n\n```\nhttps://glassesdbcached.jeeliz.com/testSku/\u003cskuToTest\u003e\n```\n\nYou can test it here:\n\n* [For existing SKU \"rayban_aviator_or_vertFlash\"](https://glassesdbcached.jeeliz.com/testSku/rayban_aviator_or_vertFlash)\n* [For non-existing SKU \"notASKU\"](https://glassesdbcached.jeeliz.com/testSku/notASKU)\n\n\n\n## Compatibility\n\n* If `WebGL2` is available, it uses `WebGL2` and no specific extension is required,\n* If `WebGL2` is not available but `WebGL1`, we require either `OES_TEXTURE_FLOAT` extension or `OES_TEXTURE_HALF_FLOAT` extension,\n* 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.\n\nIf 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:\n\n* a screenshot of [webglreport.com - WebGL1](http://webglreport.com/?v=1) (about your `WebGL1` implementation),\n* a screenshot of [webglreport.com - WebGL2](http://webglreport.com/?v=2) (about your `WebGL2` implementation),\n* the log from the web console,\n* the steps to reproduce the bug, and screenshots.\n\nIf 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.\nIf the user does not want to share its camera or if its implementation of WebGL is too minimalistic, a `FALLBACKUNAVAILABLE` error will be triggered.\n\n\n## Optimization\n\nIf you meet some performance issues, please first:\n\n* Check that you are using the latest main script ( `/dist/jeelizNNCwidget.js` ),\n* Check that your browser is updated (Chrome is advised), check that your graphic drivers are updated,\n* 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,\n\nThe 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.\n\nSo 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.\n\nThe 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:\n ```\nJEELIZVTO.relieve_DOM(\u003cdurationInMs\u003e)\n```\nFor example,`JEELIZVTO.relieve_DOM(300)` will free the GPU during 300 milliseconds.\n\nIf you need to slow down the rendering to free the GPU during an undertermined period of time, you can use:\n```\nJEELIZVTO.switch_slow(\u003cboolean\u003e isSlow, \u003cint\u003e intervalMs)\n```\nWhere `intervalMs` is the interval in milliseconds between 2 rendering loops.\n\n\n## Hosting\n\nThis 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.\n\n## Special Mentions for Contributors\n\n\u003c!-- readme: contributors -start --\u003e\n\u003cdiv style=\"margin: 0 auto !important; overflow-y:hidden !important;\"\u003e\n\u003ctable style=\"overflow-y:hidden !important;\"\u003e\n\u003ctr\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://github.com/sharozraees802\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/52934734?v=4\" width=\"150;\" alt=\"sharozraees802\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003eCreator: Sharoz Raees\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://github.com/Sahilnenwani\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/59645201?s=400\u0026u=f7a0e3a42e91410494c2cbbfb9d674dcbe291660\u0026v=4\"\n            width=\"150;\" alt=\"SahilNenwani\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003eMaintainer: Sahil Nenwani\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://github.com/nadirdeveloper\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/63139854?v=4\" width=\"150;\" alt=\"NadirAli\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003eMaintainer: Nadir Ali\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctr\u003e\n    \u003c/table\u003e\n    \u003c/div\u003e\n\n# contact me\n\u003cp\u003e\u003ca href=\"https://www.linkedin.com/company/lastcode/\"\u003e\u003cimg alt=\"LinkedIn\" src=\"https://img.shields.io/badge/linkedin%20-%230077B5.svg?\u0026style=for-the-badge\u0026logo=linkedin\u0026logoColor=white\" target=\"_blank\"\u003e\u003c/a\u003e \u003ca href=\"mailto:lastcode802@gmail.com\"\u003e\u003cimg alt=\"Gmail\" src=\"https://img.shields.io/badge/Gmail-D14836?style=for-the-badge\u0026logo=gmail\u0026logoColor=white\" /\u003e\u003c/a\u003e \u003ca href=\"https://www.facebook.com/profile.php?id=100067627036290\"\u003e\u003cimg src=\"https://img.shields.io/badge/Facebook-1877F2?style=for-the-badge\u0026logo=facebook\u0026logoColor=white\" /\u003e\u003c/a\u003e \u003ca href=\"https://www.instagram.com/lastcode802/\"\u003e\u003cimg src=\"https://img.shields.io/badge/Instagram-E4405F?style=for-the-badge\u0026logo=Instagram\u0026logoColor=white\" /\u003e\u003c/a\u003e \u003ca href=\"https://www.youtube.com/channel/UCZfZm4thtZt0drL1j7PKb4w\" target=\"_blank\"\u003e\u003cimg alt=\"Discord\" src=\"https://img.shields.io/badge/Youtube-FF0000.svg?\u0026style=for-the-badge\u0026logo=Youtube\u0026logoColor=white\" /\u003e\u003c/a\u003e  \u003ca href=\"https://chat.whatsapp.com/HDazjAi7if29K9FaRcCy5Y\"\u003e\u003cimg src=\"https://img.shields.io/badge/WhatsApp-25D366?style=for-the-badge\u0026logo=whatsapp\u0026logoColor=white\" /\u003e\u003c/a\u003e \u003ca href=\"https://discord.gg/gZfequNfyW\" target=\"_blank\"\u003e\u003cimg alt=\"Discord\" src=\"https://img.shields.io/badge/Discord-5869e9.svg?\u0026style=for-the-badge\u0026logo=Discord\u0026logoColor=white\" /\u003e\u003c/a\u003e \u003ca href=\"https://github.com/orgs/lastcode802/repositories\" target=\"_blank\"\u003e\u003cimg alt=\"Github\" src=\"https://img.shields.io/badge/GitHub-%2312100E.svg?\u0026style=for-the-badge\u0026logo=Github\u0026logoColor=white\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flastcode802%2Fglassarview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flastcode802%2Fglassarview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flastcode802%2Fglassarview/lists"}