Skip to main content
RAGBAZ

Face Expression Mesh Morphing

Canonical app: face.ragbaz.cc

Face is an interactive RAGBAZ Vision surface for exploring expression morphs across a 10 by 10 matrix of face tiles. It renders a full-bleed Three.js canvas, loads MediaPipe-style landmark meshes, and interpolates between two selected expressions while sampling each source texture at its own face-point UVs.

The useful review unit is not only the animation. It is the pipeline:

expression tiles -> landmark meshes -> shared triangles -> dual UV shader -> morph controls

What the viewer demonstrates​

SurfaceWhat it proves
expression matrixthe operator can choose source and destination expressions
morph sliderintermediate geometry and texture states are inspectable
wireframe modetriangle topology remains visible during the blend
random modethe mesh can traverse arbitrary expression pairs
fullscreen / immersivethe artifact can be used as a presentation surface
responsive drawerthe same 100-expression matrix works on phone, tablet, and desktop

Runtime model​

The source app lives in /data/src/face.ragbaz.cc/viewer. The deployable static root is assembled by /data/src/face.ragbaz.cc/build.sh:

viewer/dist/          -> build/
images/              -> build/images/
output/meshes.json   -> build/output/meshes.json

The data model is intentionally compact:

FileRole
images/redhead-cut_r*_c*.pngexpression tile textures
output/meshes.jsonlandmark positions and shared triangulation
viewer/src/components/FaceMesh.jsxR3F mesh, shader, dual UV attributes
viewer/src/components/GridPicker.jsxexpression matrix picker
viewer/src/components/Controls.jsxmorph playback and visual debugging controls

Rendering technique​

Each expression has landmark points in normalized image space. The renderer builds a BufferGeometry from the source and destination landmarks, then updates only the position buffer as morph amount t changes:

point(t) = pointA + (pointB - pointA) * t

The shader keeps two UV attributes:

AttributeSamples
uvAtexture A at source landmark coordinates
uvBtexture B at destination landmark coordinates

The fragment shader blends textureA(uvA) and textureB(uvB) by t. That is why the texture follows the face points instead of sliding over a static plane.

Status boundary​

The current app is an interactive morphing and visualization surface. It is not an identity system, recognition system, medical tool, or biometric verifier. Treat the images and meshes as demonstration assets unless a later project adds consent tracking, provenance, and privacy review.