THREE.JS PROCEDURAL ANIMALS

three.js procedural animalsGitHub ↗

Procedural animals

Starting

0

km/h

–

gait

–

alt m

–

fps

Variant

Seed every seed is a different individual

Sex

Age

Quality

Time of day

Time scale

Grasstwo LOD tiles of instanced blades Shadows Fog

The ground is one height function, evaluated on the GPU for the terrain and handed to the animals as ground(x, z); the lake is water(x, z). Birds find perch points on the dead tree and the fence posts.

Coveringsfur shells & fins, feathers, scales Skeleton & IK targets Skin weights SDF primitivesthe shapes the body is sculpted from Footfall diagram Performance HUD

Crowd

Herd of this speciesa handful of seeds reused, 'crowd' quality

Animals 30

The performance HUD shows frame rate, CPU time per animal update, draw calls and geometry.

Compare

Split viewtwo animals, synced actions and movement

Right-hand animal

Seed

Demo reel

Two choreographed minutes of every species, with "how it's made" reveals. Add &aspect=9:16 for a vertical cut.

Play the demo reel

Use in your game

For the animal on screen right now: species, seed, quality and settings.

Footfalls–

–

fps

–

cpu ms / animal

–

animals

–

draw calls

–

triangles

–

vertices

Actions

0 m/s

W A S D move · Shift run · Space/C climb · click the ground to send it there · drag to orbit

Building

three.js procedural animals

Procedural animals

Nothing is downloaded: the body is sculpted from signed distance fields, skinned, and given its coat right here, in Web Workers.

Sculpting and meshing the body
Skinning to the skeleton
Growing the coat
Uploading to the GPU