跪拜 Guibai
← All articles
Frontend

A JSON Recipe Generates Every Vinyl Doll: Head, Hair, and Floating Gloves at Runtime

By 前端繁华如梦 ·
Read original on juejin.cn ↗ Google Translate ↗ Alt translation

Procedural character pipelines usually collapse under part collisions and inconsistent placement logic. Centralizing layout into a single measurement pass and clamping features to surface constraints lets a style table specify exaggerated values safely—the system absorbs the variance, so artists and generators don't have to.

Summary

The entire character is driven by a `CharacterRecipe` seed that deterministically generates a unique doll. A centralized `computeLayout()` function acts as the single source of truth for all part placement, using a facial coordinate system mapped onto an implicit superellipsoid surface to prevent clipping. Eyes are three-layer extruded patches (ink outline, white sclera, large pupil) rather than spheres, and expressions are pure offset tables applied per frame without rebuilding geometry.

Hair is a single sculpted toroidal shell with flow-field grooves and scalloped edges, controlled by a compact style table that drives 19 variants from one generator. The anatomy deliberately omits arms and legs: a small pill-shaped torso, floating gloves, and floating shoes use the air gaps between them to create character identity. Clothing wraps the torso as expanded profile shells, and puff sleeves attach directly to the floating gloves so they follow hand motion.

Studio-grade clearcoat gloss comes from a PMREM-baked environment of three overexposed softboxes and dark pillars, not from material roughness tweaks. A hidden 192px renderer bakes all 48 library thumbnails sequentially using the same pure functions as the editor, yielding the main thread every four images for progressive display.

Takeaways
A deterministic seed via mulberry32 drives the entire character; 48 presets need only 48 seeds stored, with thumbnails baked on demand.
All part placement flows through one `computeLayout()` function that maps (−1…1) face coordinates onto the implicit superellipsoid surface, using the gradient for normals so features don't skew on flattened heads.
Eye size is clamped to four simultaneous constraints (head top, chin, cheeks, opposite eye) so large eyes and large mouths coexist without collision.
Eyes are three extruded patches—ink outline, white sclera, large pupil—not spheres; the pupil is the only independently moving facial element.
Five expressions are pure offset tables (scale/position per frame); no geometry is rebuilt for a smile or blink.
Autonomous blinking and saccades run on a critically damped spring's closed-form solution, eliminating jitter at low frame rates.
Hair is a single toroidal shell with flow-field grooves carved from the whorl; 19 hairstyles share one generator differentiated by a table of hairline positions and volume parameters.
Rayman-style anatomy uses a pill torso, floating gloves, and floating shoes with deliberate air gaps; the head sinks into the torso as the only socket joint.
Clothing shells wrap the torso profile with a 1.1× width + 4mm offset to prevent z-fighting; puff sleeves attach to floating gloves, not shoulders.
Clearcoat gloss relies on a PMREM-baked studio environment of three overexposed softboxes and dark pillars, not roughness adjustments.
A single hidden 192px WebGLRenderer bakes all 48 library thumbnails sequentially, yielding the main thread every 4 images for progressive loading.
Conclusions

The 'containment clamping' pattern for eyes and mouth is a generalizable alternative to careful manual tuning: let style tables specify aspirational sizes, and let the layout system shrink them to whatever the surface actually accommodates.

Using the implicit surface gradient for normals, rather than a radial direction from a sphere center, is a subtle fix that prevents systematic facial-feature skew on any non-spherical head shape.

The deliberate absence of arms and legs—replaced by floating gloves and shoes with air gaps—shows that negative space can carry more character identity than anatomically correct limb geometry.

Attaching puff sleeves to floating gloves instead of shoulders is a small rigging decision that eliminates an entire class of skinning artifacts during arm motion.

Baking studio lighting into a PMREM environment map and sharing it across all clearcoat materials means the 'vinyl' look is an environmental constant, not a per-material tuning problem.

Concepts & terms
Superellipsoid
A geometric shape generalizing ellipsoids with an exponent controlling squareness; used here for the character's head to achieve a flattened, cute proportion where width exceeds height.
Implicit surface gradient
The normal vector computed from the mathematical gradient of an implicit surface equation, rather than from a geometric center. Essential for correct feature orientation on non-spherical shapes like flattened heads.
Catmull-Clark subdivision
A recursive surface-smoothing algorithm that refines a coarse control mesh into a smooth, rounded surface. Used here for hair shells, gloves, and shoes to get organic shapes from few control points.
PMREM (Prefiltered Mipmapped Radiance Environment Map)
A precomputed environment map with multiple blur levels for different roughness values, generated by three.js's PMREMGenerator. Used here to bake a virtual photo studio into reflections for clearcoat materials.
Critically damped spring (closed-form)
A spring tuned to return to equilibrium as fast as possible without oscillation, solved analytically rather than via numerical integration. Used for saccade and blink animation to guarantee smooth motion at any frame rate.
LatheGeometry
A three.js geometry that spins a 2D profile around an axis to create a surface of revolution. Used for the flared skirt; requires bottom-up point ordering to avoid flipped normals.
Source: juejin.cn ↗ Google Translate ↗ Backup ↗