{"id":50975372,"url":"https://github.com/ehsanwwe/openmakeupsdk","last_synced_at":"2026-06-19T07:02:21.152Z","repository":{"id":364480726,"uuid":"1257197625","full_name":"ehsanwwe/OpenMakeupSDK","owner":"ehsanwwe","description":"Open-source AR makeup try-on for the web: foundation, lipstick, blush, eyeliner, mascara, eyeshadow + face reshaping — MediaPipe + WebGL, no SDK lock-in.","archived":false,"fork":false,"pushed_at":"2026-06-13T06:20:26.000Z","size":10441,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-06-13T08:09:03.391Z","etag":null,"topics":["augmented-reality","beauty-tech","blendshapes","computer-vision","face-landmarks","face-mesh","face-morphing","face-tracking","glsl","makeup-ar-makeup","makeup-sdk","mediapipe","shaders","threejs","virtual-try-on","web-ar","webgl"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ehsanwwe.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-06-02T13:03:30.000Z","updated_at":"2026-06-13T06:20:29.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/ehsanwwe/OpenMakeupSDK","commit_stats":null,"previous_names":["ehsanwwe/openmakeupsdk"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/ehsanwwe/OpenMakeupSDK","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ehsanwwe%2FOpenMakeupSDK","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ehsanwwe%2FOpenMakeupSDK/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ehsanwwe%2FOpenMakeupSDK/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ehsanwwe%2FOpenMakeupSDK/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ehsanwwe","download_url":"https://codeload.github.com/ehsanwwe/OpenMakeupSDK/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ehsanwwe%2FOpenMakeupSDK/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34520433,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-19T02:00:06.005Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["augmented-reality","beauty-tech","blendshapes","computer-vision","face-landmarks","face-mesh","face-morphing","face-tracking","glsl","makeup-ar-makeup","makeup-sdk","mediapipe","shaders","threejs","virtual-try-on","web-ar","webgl"],"created_at":"2026-06-19T07:02:16.376Z","updated_at":"2026-06-19T07:02:21.142Z","avatar_url":"https://github.com/ehsanwwe.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n# 💄 OpenMakeupSDK\n\n### Open-source, real-time AR **virtual makeup** \u0026 **face reshape** SDK for the web\n\nThe open alternative to closed commercial AR beauty SDKs — runs **entirely in the browser**, no backend, no per-call fees, no licensing lock-in.\n\n\u003cbr/\u003e\n\n[![npm version](https://img.shields.io/npm/v/open-makeup-sdk?color=cb3837\u0026logo=npm\u0026label=npm)](https://www.npmjs.com/package/open-makeup-sdk)\n[![npm downloads](https://img.shields.io/npm/dm/open-makeup-sdk?color=cb3837\u0026logo=npm)](https://www.npmjs.com/package/open-makeup-sdk)\n[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](./LICENSE)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/ehsanwwe/OpenMakeupSDK/pulls)\n[![GitHub stars](https://img.shields.io/github/stars/ehsanwwe/OpenMakeupSDK?style=social)](https://github.com/ehsanwwe/OpenMakeupSDK/stargazers)\n\n[![Live Demo](https://img.shields.io/badge/%E2%96%B6%20live%20demo-try%20it%20now-e0567a?style=for-the-badge)](https://ehsanwwe.github.io/open-makeup-sdk/)\n\n[![Three.js](https://img.shields.io/badge/Three.js-000000?logo=three.js\u0026logoColor=white)](https://threejs.org)\n[![WebGL](https://img.shields.io/badge/WebGL-2.0-990000)](https://www.khronos.org/webgl/)\n[![MediaPipe](https://img.shields.io/badge/MediaPipe-FaceMesh-00897B)](https://developers.google.com/mediapipe)\n[![GLSL](https://img.shields.io/badge/Shaders-GLSL-5586A4)](https://www.khronos.org/opengl/wiki/Core_Language_(GLSL))\n[![TypeScript](https://img.shields.io/badge/types-included-3178c6?logo=typescript\u0026logoColor=white)]()\n\n\u003c/div\u003e\n\n---\n\n\u003c!-- 👉 Tip: drop a short demo GIF here for an even stronger first impression --\u003e\n\u003cdiv align=\"center\"\u003e\n\n### ▶️ [**Try the live demo →**](https://ehsanwwe.github.io/open-makeup-sdk/)\n\n\u003cem\u003ePoint your webcam, pick a look, and reshape your face in real time — no install, no upload.\u003c/em\u003e\n\u003cbr/\u003e\n\u003csub\u003eRuns fully in the browser · needs camera access · best on Chrome (desktop / Android)\u003c/sub\u003e\n\n\u003c/div\u003e\n\n---\n\n## ✨ Why OpenMakeupSDK?\n\nCommercial AR beauty SDKs (YouCam / Perfect Corp, Banuba, ModiFace…) are powerful — but they're **closed-source, licensed, and often metered per call**. OpenMakeupSDK gives you the same core experience as a **free, MIT-licensed package** you can read, fork, self-host, and ship without asking anyone for permission.\n\nIt's a real-time AR makeup mirror **and** a beauty face-reshape engine, built on **MediaPipe face tracking + custom WebGL/GLSL shaders**, running fully client-side.\n\n---\n\n## 🚀 Features\n\n### 💋 Virtual makeup\n- **Real-time face tracking** — 468-point MediaPipe FaceMesh, live on a webcam.\n- **6 makeup categories** — `foundation`, `blush`, `lipstick`, `eyeliner`, `mascara`, `eyeshadow`.\n- **73 ready-to-use pattern textures** out of the box.\n- **Material finishes** — `matte`, `shimmer`, `glossy`, `glitter` (where supported).\n- **Custom GLSL shaders** for believable blending, gloss, and glitter — not flat overlays.\n- **Smart defaults** — every parameter has one; plug in your own AI color provider for lipstick.\n\n### 🧬 Face reshape (morph / blend shapes)\nProject the live camera image onto a morphable 3D mesh so the user's **actual face** reshapes in real time — brow, lips, nose, cheeks, and jaw. The editable Blender rig is included.\n\n### 🧰 Developer experience\n- **Drop-in, framework-agnostic** — plain ES modules, works with any stack.\n- **Zero backend** — everything runs client-side.\n- **TypeScript types included.**\n- **Config-driven assets** — one base URL points every shader, model, and pattern.\n\n---\n\n## 📦 Installation\n\n```bash\nnpm install open-makeup-sdk three @mediapipe/face_mesh @mediapipe/camera_utils\n```\n\n`three` and the two `@mediapipe/*` packages are peer dependencies — install them alongside the SDK.\n\n---\n\n## ⚡ Quick start\n\nYou need three things: a `\u003cvideo\u003e` (webcam), a `\u003ccanvas\u003e` (output), and the assets served somewhere. The easiest setup loads MediaPipe and the assets straight from a CDN — no extra build config.\n\n```html\n\u003c!-- MediaPipe runtime: sets window.FaceMesh / window.Camera --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils@0.3/camera_utils.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/@mediapipe/face_mesh@0.4.1633559619/face_mesh.js\"\u003e\u003c/script\u003e\n\n\u003cvideo id=\"cam\" playsinline\u003e\u003c/video\u003e\n\u003ccanvas id=\"out\"\u003e\u003c/canvas\u003e\n\n\u003cscript type=\"module\"\u003e\n  import { OpenMakeup } from 'open-makeup-sdk';\n\n  const mk = new OpenMakeup({\n    video:        document.querySelector('#cam'),\n    renderCanvas: document.querySelector('#out'),\n    // Serve the assets yourself, or use the published CDN copy:\n    assetsBaseUrl:    'https://cdn.jsdelivr.net/npm/open-makeup-sdk/assets',\n    mediapipeBaseUrl: 'https://cdn.jsdelivr.net/npm/@mediapipe/face_mesh@0.4.1633559619',\n  });\n\n  await mk.init();                                           // boots tracking + camera\n\n  await mk.apply('lipstick',  { color: '#b4002e', finish: 'glossy' });\n  await mk.apply('eyeshadow', { color: '#7a3b9d', pattern: 3, finish: 'glitter' });\n  await mk.apply('eyeliner',  { pattern: 1 });               // defaults to black\n\n  mk.morph({ noseSlim: 0.6, cheeks: 0.3, jawWide: 0.4, browLift: 0.5 });\n\u003c/script\u003e\n```\n\n\u003e **Hosting the assets yourself?** Copy `node_modules/open-makeup-sdk/assets` into your public folder and set `assetsBaseUrl` to its URL (e.g. `'/assets'`).\n\n---\n\n## 🎛️ API reference\n\n```js\nconst mk = new OpenMakeup(options);\n```\n\n| Method | Description |\n|---|---|\n| `await mk.init(onReady?)` | Boot the engine, load assets, start the camera. |\n| `await mk.apply(category, opts)` | Apply/update a layer: `{ color, finish, pattern }`. |\n| `mk.clear(category)` | Remove one makeup layer. |\n| `mk.clearAll()` | Remove all makeup. |\n| `mk.morph(map)` | Reshape: `{ noseSlim: 0.6, cheeks: 0.3, ... }`. |\n| `mk.setMorph(name, value)` | Set a single reshape control. |\n| `mk.resetMorph()` | Reset the face shape. |\n| `mk.getPatterns(category)` | List patterns for a category. |\n| `mk.getMorphTargets()` | List the model's reshape targets. |\n| `mk.setWireframe(on)` | Toggle the debug face mesh. |\n| `mk.start()` / `mk.stop()` / `mk.dispose()` | Control / release the engine. |\n\n**Constructor options:** `video`, `renderCanvas`, `assetsBaseUrl`, `mediapipeBaseUrl`, `defaults`, `aiColor`.\n\n---\n\n## 🎨 Categories \u0026 finishes\n\n| Category | Color | Finish | Patterns |\n|---|:---:|:---:|:---:|\n| `foundation` | ✅ | matte · shimmer · glossy · glitter | ✅ |\n| `blush` | ✅ | matte · shimmer · glossy · glitter | ✅ |\n| `lipstick` | ✅ | matte · shimmer · glossy · glitter | ✅ |\n| `eyeshadow` | ✅ | matte · shimmer · glossy · glitter | ✅ |\n| `eyeliner` | ✅ | — | ✅ |\n| `mascara` | ✅ | — | ✅ |\n\n## 🧬 Reshape controls\n\n| Control | Effect |\n|---|---|\n| `browLift` | Lift the outer brow corner |\n| `lipPlump` / `lipPlump2` | Plump the lips |\n| `noseSlim` | Narrow the nose |\n| `noseBridge` | Reduce the nose-bridge prominence between the eyes |\n| `cheeks` | Fuller cheeks |\n| `jawAngle` | Define the jaw angle |\n| `jawWide` | Widen the jaw angle away from the ear |\n\nWeights are typically `0..1`; negative values and values above 1 exaggerate the effect.\n\n---\n\n## 🆚 OpenMakeupSDK vs. commercial SDKs\n\n| | **OpenMakeupSDK** | Commercial AR beauty SDKs |\n|---|:---:|:---:|\n| Price | **Free** | Paid license / per-call fees |\n| Source | **Fully open (MIT)** | Closed |\n| Runs in the browser | ✅ | ✅ |\n| Backend required | **None** | Often |\n| Self-hostable | ✅ | ❌ |\n| Editable shaders \u0026 3D rig | ✅ | ❌ |\n| Face reshape (morph) | ✅ | Usually premium |\n| Lock-in | **None** | Yes |\n\n---\n\n## 🗺️ Roadmap\n\n- [x] Real-time makeup engine (6 categories, finishes, 73 patterns)\n- [x] Public `OpenMakeup` API with smart defaults\n- [x] Face reshape via blend shapes\n- [x] Interactive playground + hosted live demo\n- [x] TypeScript types\n- [x] **Published to npm** 🎉\n\n\u003e v1 is live. Next up: more patterns, demo recipes, and community-contributed looks.\n\n---\n\n## 🤝 Let's build something together\n\nI'm **Ehsan** — I've spent years building real-time AR, 3D rendering, SLAM, computer-vision and AI systems, end to end. OpenMakeupSDK is a slice of that work, opened up.\n\nIf this project resonates with you:\n\n- 🧑‍💻 **Hiring** for AR / WebGL / 3D / computer-vision work? I'm open to remote contract \u0026 freelance projects — let's talk.\n- 🧩 **Integrating** this into your product, or want a custom feature? Reach out.\n- 🛠️ **Contributing**? PRs and issues are very welcome.\n\n**Get in touch**\n- GitHub: [@ehsanwwe](https://github.com/ehsanwwe)\n- LinkedIn: [ehsan-hightech](https://www.linkedin.com/in/ehsan-hightech)\n- Email: ehsan.hightech@gmail.com\n\n\u003cdiv align=\"center\"\u003e\n\n### ⭐ If OpenMakeupSDK saved you a five-figure SDK license, drop it a star — it genuinely helps.\n\n[![Star History Chart](https://api.star-history.com/svg?repos=ehsanwwe/OpenMakeupSDK\u0026type=Date)](https://star-history.com/#ehsanwwe/OpenMakeupSDK\u0026Date)\n\n\u003c/div\u003e\n\n---\n\n## 📄 License\n\n[MIT](./LICENSE) © Ehsan Moradi — use it, ship it, build on it.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fehsanwwe%2Fopenmakeupsdk","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fehsanwwe%2Fopenmakeupsdk","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fehsanwwe%2Fopenmakeupsdk/lists"}