https://github.com/ehsanwwe/openmakeupsdk
Open-source AR makeup try-on for the web: foundation, lipstick, blush, eyeliner, mascara, eyeshadow + face reshaping — MediaPipe + WebGL, no SDK lock-in.
https://github.com/ehsanwwe/openmakeupsdk
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
Last synced: 21 days ago
JSON representation
Open-source AR makeup try-on for the web: foundation, lipstick, blush, eyeliner, mascara, eyeshadow + face reshaping — MediaPipe + WebGL, no SDK lock-in.
- Host: GitHub
- URL: https://github.com/ehsanwwe/openmakeupsdk
- Owner: ehsanwwe
- License: mit
- Created: 2026-06-02T13:03:30.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2026-06-13T06:20:26.000Z (27 days ago)
- Last Synced: 2026-06-13T08:09:03.391Z (27 days ago)
- 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
- Language: JavaScript
- Homepage:
- Size: 9.96 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 💄 OpenMakeupSDK
### Open-source, real-time AR **virtual makeup** & **face reshape** SDK for the web
The open alternative to closed commercial AR beauty SDKs — runs **entirely in the browser**, no backend, no per-call fees, no licensing lock-in.
[](https://www.npmjs.com/package/open-makeup-sdk)
[](https://www.npmjs.com/package/open-makeup-sdk)
[](./LICENSE)
[](https://github.com/ehsanwwe/OpenMakeupSDK/pulls)
[](https://github.com/ehsanwwe/OpenMakeupSDK/stargazers)
[](https://ehsanwwe.github.io/open-makeup-sdk/)
[](https://threejs.org)
[](https://www.khronos.org/webgl/)
[](https://developers.google.com/mediapipe)
[](https://www.khronos.org/opengl/wiki/Core_Language_(GLSL))
[]()
---
### ▶️ [**Try the live demo →**](https://ehsanwwe.github.io/open-makeup-sdk/)
Point your webcam, pick a look, and reshape your face in real time — no install, no upload.
Runs fully in the browser · needs camera access · best on Chrome (desktop / Android)
---
## ✨ Why OpenMakeupSDK?
Commercial 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.
It'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.
---
## 🚀 Features
### 💋 Virtual makeup
- **Real-time face tracking** — 468-point MediaPipe FaceMesh, live on a webcam.
- **6 makeup categories** — `foundation`, `blush`, `lipstick`, `eyeliner`, `mascara`, `eyeshadow`.
- **73 ready-to-use pattern textures** out of the box.
- **Material finishes** — `matte`, `shimmer`, `glossy`, `glitter` (where supported).
- **Custom GLSL shaders** for believable blending, gloss, and glitter — not flat overlays.
- **Smart defaults** — every parameter has one; plug in your own AI color provider for lipstick.
### 🧬 Face reshape (morph / blend shapes)
Project 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.
### 🧰 Developer experience
- **Drop-in, framework-agnostic** — plain ES modules, works with any stack.
- **Zero backend** — everything runs client-side.
- **TypeScript types included.**
- **Config-driven assets** — one base URL points every shader, model, and pattern.
---
## 📦 Installation
```bash
npm install open-makeup-sdk three @mediapipe/face_mesh @mediapipe/camera_utils
```
`three` and the two `@mediapipe/*` packages are peer dependencies — install them alongside the SDK.
---
## ⚡ Quick start
You need three things: a `` (webcam), a `` (output), and the assets served somewhere. The easiest setup loads MediaPipe and the assets straight from a CDN — no extra build config.
```html
import { OpenMakeup } from 'open-makeup-sdk';
const mk = new OpenMakeup({
video: document.querySelector('#cam'),
renderCanvas: document.querySelector('#out'),
// Serve the assets yourself, or use the published CDN copy:
assetsBaseUrl: 'https://cdn.jsdelivr.net/npm/open-makeup-sdk/assets',
mediapipeBaseUrl: 'https://cdn.jsdelivr.net/npm/@mediapipe/face_mesh@0.4.1633559619',
});
await mk.init(); // boots tracking + camera
await mk.apply('lipstick', { color: '#b4002e', finish: 'glossy' });
await mk.apply('eyeshadow', { color: '#7a3b9d', pattern: 3, finish: 'glitter' });
await mk.apply('eyeliner', { pattern: 1 }); // defaults to black
mk.morph({ noseSlim: 0.6, cheeks: 0.3, jawWide: 0.4, browLift: 0.5 });
```
> **Hosting the assets yourself?** Copy `node_modules/open-makeup-sdk/assets` into your public folder and set `assetsBaseUrl` to its URL (e.g. `'/assets'`).
---
## 🎛️ API reference
```js
const mk = new OpenMakeup(options);
```
| Method | Description |
|---|---|
| `await mk.init(onReady?)` | Boot the engine, load assets, start the camera. |
| `await mk.apply(category, opts)` | Apply/update a layer: `{ color, finish, pattern }`. |
| `mk.clear(category)` | Remove one makeup layer. |
| `mk.clearAll()` | Remove all makeup. |
| `mk.morph(map)` | Reshape: `{ noseSlim: 0.6, cheeks: 0.3, ... }`. |
| `mk.setMorph(name, value)` | Set a single reshape control. |
| `mk.resetMorph()` | Reset the face shape. |
| `mk.getPatterns(category)` | List patterns for a category. |
| `mk.getMorphTargets()` | List the model's reshape targets. |
| `mk.setWireframe(on)` | Toggle the debug face mesh. |
| `mk.start()` / `mk.stop()` / `mk.dispose()` | Control / release the engine. |
**Constructor options:** `video`, `renderCanvas`, `assetsBaseUrl`, `mediapipeBaseUrl`, `defaults`, `aiColor`.
---
## 🎨 Categories & finishes
| Category | Color | Finish | Patterns |
|---|:---:|:---:|:---:|
| `foundation` | ✅ | matte · shimmer · glossy · glitter | ✅ |
| `blush` | ✅ | matte · shimmer · glossy · glitter | ✅ |
| `lipstick` | ✅ | matte · shimmer · glossy · glitter | ✅ |
| `eyeshadow` | ✅ | matte · shimmer · glossy · glitter | ✅ |
| `eyeliner` | ✅ | — | ✅ |
| `mascara` | ✅ | — | ✅ |
## 🧬 Reshape controls
| Control | Effect |
|---|---|
| `browLift` | Lift the outer brow corner |
| `lipPlump` / `lipPlump2` | Plump the lips |
| `noseSlim` | Narrow the nose |
| `noseBridge` | Reduce the nose-bridge prominence between the eyes |
| `cheeks` | Fuller cheeks |
| `jawAngle` | Define the jaw angle |
| `jawWide` | Widen the jaw angle away from the ear |
Weights are typically `0..1`; negative values and values above 1 exaggerate the effect.
---
## 🆚 OpenMakeupSDK vs. commercial SDKs
| | **OpenMakeupSDK** | Commercial AR beauty SDKs |
|---|:---:|:---:|
| Price | **Free** | Paid license / per-call fees |
| Source | **Fully open (MIT)** | Closed |
| Runs in the browser | ✅ | ✅ |
| Backend required | **None** | Often |
| Self-hostable | ✅ | ❌ |
| Editable shaders & 3D rig | ✅ | ❌ |
| Face reshape (morph) | ✅ | Usually premium |
| Lock-in | **None** | Yes |
---
## 🗺️ Roadmap
- [x] Real-time makeup engine (6 categories, finishes, 73 patterns)
- [x] Public `OpenMakeup` API with smart defaults
- [x] Face reshape via blend shapes
- [x] Interactive playground + hosted live demo
- [x] TypeScript types
- [x] **Published to npm** 🎉
> v1 is live. Next up: more patterns, demo recipes, and community-contributed looks.
---
## 🤝 Let's build something together
I'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.
If this project resonates with you:
- 🧑💻 **Hiring** for AR / WebGL / 3D / computer-vision work? I'm open to remote contract & freelance projects — let's talk.
- 🧩 **Integrating** this into your product, or want a custom feature? Reach out.
- 🛠️ **Contributing**? PRs and issues are very welcome.
**Get in touch**
- GitHub: [@ehsanwwe](https://github.com/ehsanwwe)
- LinkedIn: [ehsan-hightech](https://www.linkedin.com/in/ehsan-hightech)
- Email: ehsan.hightech@gmail.com
### ⭐ If OpenMakeupSDK saved you a five-figure SDK license, drop it a star — it genuinely helps.
[](https://star-history.com/#ehsanwwe/OpenMakeupSDK&Date)
---
## 📄 License
[MIT](./LICENSE) © Ehsan Moradi — use it, ship it, build on it.