Real-Time · 3D · WebRTC
facecard
Read the room — live-face table games where your real face is the avatar.
The concept
facecard is a browser live-face table-games platform — Poker, Mafia & Tonk — where every seated player’s real webcam face is reconstructed as a live, video-textured 3D mesh around the table, so you can read the actual tells, not an emoji. An authoritative server runs each game; faces and spatial voice stream peer-to-peer.
It started as a question: can a browser carry real human presence into a 3D scene, in real time, without a native app? It can.
The hard parts
Live-face 3D reconstruction
Webcam → MediaPipe FaceLandmarker (a 478-point mesh) plus selfie and hair segmentation → a deforming, hair-clipped, video-textured Three.js mesh, streamed peer-to-peer through a LiveKit SFU.
Authoritative server poker engine
A self-authored, fully-tested no-limit Hold’em state machine — hand evaluator, side pots, blinds, all-in, showdown — runs on the server; clients only render state. Dedicated stress and unit suites guard it.
Secrets never touch the client
The LiveKit API secret stays server-side; the server mints short-lived tokens and serves the SPA, sockets and minting from one origin — no CORS, no leaked keys.
Custom wire codecs
Hand-rolled landmark and mask codecs plus a gaze ladder compress face data over the network, and audio is positioned spatially per seat.
Performance-adaptive rendering
The mobile path drops shadow maps and per-fragment lights, folds ambient into a hemisphere light, and runs a perf probe; gyro look and pinch-zoom keep it playable on a phone.
How it’s built
Client: TypeScript, Three.js (r184), @mediapipe/tasks-vision, livekit-client and socket.io-client on Vite. Server: Node 20, Express 5, Socket.IO and livekit-server-sdk. The whole thing — SPA, signalling and token minting — deploys as a single free Render service, with LiveKit Cloud carrying the media.