MaisonPrisma Aurum
A 3D luxury boutique: walk the salon, customize eyewear, makeup, watches, rings, hats and hair color, and try them on with your webcam or a photo. WebGPU + MediaPipe, running 100% in your browser.
Maison Prisma Aurum is a fictional brand, built as a portfolio proof of concept.
What you can do
- Explore: walk a 3D showroom with three pairs of glasses, a lipstick, a face paint, a watch, a ring, a hair color and headwear on pedestals.
- Customize: change frame finish and color, lens effect, lipstick finish and shade, face paint design and style, watch case, dial and strap, ring metal, stone and finger, hair color, finish and intensity, hat style and colors; the price updates live.
- Try on: see the product on your face, hair or hand through your webcam or on a photo, or the whole cart at once. Tracking runs in the page; no image leaves your device.
- Photo: capture and download a photo-booth picture.
How it is built
Next.js static export, React Three Fiber, three.js WebGPURenderer with a WebGL2 fallback, materials and post-processing written in TSL, MediaPipe Face and Hand Landmarkers and hair segmenter running locally in WebAssembly, Zustand. No server, no tracking, no third-party requests.
Source code: https://github.com/michael-mas/3d-virtual-store