Expressive 2D Canvas Face Decals on 3D Clay Heads: Blinking, Reading, and Sleeping States
3D Engineering · October 8, 2026 · 5 min read
How our procedural face atlas (`faceAtlas.ts`) draws crisp, resolution-independent eyes, eyebrows, blush, and glasses onto curved 3D geometry.
Why 2D Drawn Faces Beat 3D Eyeball Meshes for Chibi Art
In clay-toy and anime-inspired 3D art (like Animal Crossing or Nendoroid figures),boolean-cut 3D eye sockets often create uncanny shadows under steep lighting. Flat decals projected onto a smooth, rounded head surface preserve the charm of 2D illustration while turning naturally in 3D space.
In `src/scene/faceAtlas.ts`, we render expressions onto an offscreen HTML5 2D canvas using crisp Bezier curves for eyelids, pupils, eyebrows, rosy cheek blush, freckles, and mouths. Each expression is uploaded once to a shared texture atlas.
Status-Driven Facial Animation
In the study hall, you never have to manually pick an emote. Your character’s face reflects your live activity: calm downward-glancing eyes with natural double-blinks while reading and writing at the table, warm smiles while relaxing on break, and peaceful closed eyes when your status switches to Away.