Building Hushroom’s Procedural 3D Chibi Characters in Three.js Without External GLTF Assets

The Problem with Traditional GLTF Asset Pipelines in Web Games

When we transitioned Hushroom from our early 2D pixel-art prototype to a real-time 3D diorama, our first instinct was the standard game-dev workflow: model a base character mesh in Blender, export dozens of hats, hairstyles, hoodies, overalls, and shoes as GLTF files, and load them over the network on demand. Within a week, we hit friction. Every time we tweaked the chibi head-to-body ratio (settling on 2.6 heads tall) or adjusted shoulder weights for seated writing poses, we had to re-export and re-test thirty separate asset files.

Even worse, loading dozens of modular mesh attachments over mobile connections introduced network waterfalls and GPU draw-call overhead when ten characters sat around the same study table. We wanted Hushroom to boot almost instantaneously on a student’s phone or Chromebook without a 25 MB asset download bar.

A Lathed, Extruded, Vertex-Baked Geometry Kit in TypeScript

Instead of shipping external 3D files, we built a procedural geometry kit directly in TypeScript (`charKit.ts`, `charBody.ts`, `charHead.ts`, and `characterBuild.ts`). Every single piece of clothing, hair lock, beanie rib, puffer vest quilt, and sneaker sole is constructed mathematically from lathed profiles, super-ellipsoids, spheres, and tapered capsules at startup.

Because we generate the geometry in code, we can bake vertex colours and subtle ambient-occlusion gradients directly into the vertex attributes before merging static parts per bone. A character in the study hall renders with minimal draw calls while supporting two distinct level-of-detail (LOD) tiers: a high-subdivision mesh for the close-up Character Stage and a streamlined mesh budget for the ten-seat room diorama.

Procedural Rigging and Seated vs. Walking Poses

Each character rig exposes clean hierarchical pivot groups—hips, torso, neck, head, upper/lower arms, hands, and legs. Because all nine outfits and six hairstyles are authored against the same parametric rig constants, a character wearing a cable-knit sweater, backpack, and cat-ear beanie transitions seamlessly from walking through the study hall door to pulling out a chair, leaning over a notebook, and stretching by the window on break.