Notes

Development logs, experiments and standalone notes, in chronological order.

  1. Website, documentation and lab

    A bilingual website with the documentation, a live demo and a lab that gives you ready-to-paste code.

    Procedural locomotion for Three.js

  2. The library goes public

    A public, MIT-licensed repository with documentation in English and Spanish and a test model of its own.

    Procedural locomotion for Three.js

  3. Touching on the way

    The character rests a hand on columns, walls and railings as it walks past, and slides it along.

    Procedural locomotion for Three.js

  4. Bone by bone: pelvis and chest

    An inventory of how much each bone rotates compared with real people, and the pelvis tilt.

    Procedural locomotion for Three.js

  5. Stopping and turning like a person

    A single closing step on arrival, and 2–3 step turns when the destination is behind.

    Procedural locomotion for Three.js

  6. The gait, measured against real people

    I compared the gait with CMU motion capture and tuned it curve by curve.

    Procedural locomotion for Three.js

  7. From the Blender tree to the demo

    A GLB format for the tree, a converter from Sapling Tree Gen and a validator.

    Falling Leaves

  8. Leaves that fall and grow back

    The published demo: shake the tree, watch the leaves fall and watch them grow again.

    Falling Leaves

  9. A demo to try out the rocks

    The published demo, with a panel so anyone can change how the rocks fall and orbit.

    Accretion

  10. Hits, orbits and the pointer

    The rock reacts to every hit, a few pebbles stay in orbit and the pointer can move the rocks.

    Accretion

  11. Rocks that fall and stick

    The rock in a dark studio with WebGPU, and the first fragments that fall on it and stay attached.

    Accretion

  12. A procedural human movement library

    First version of the library: it walks, runs, crouches, jumps and goes to a point, with no recorded animations.

    Procedural locomotion for Three.js

  13. Two-level tuning and walking in place

    Eleven high-level controls over the parameters, and a mode to walk in place while tuning.

    Procedural locomotion for Three.js

  14. First prototype: legs with IK

    The starting point: legs solved with two-bone IK and feet that stay planted.

    Procedural locomotion for Three.js

  15. First test with Gaussian Splatting and Three.js

    A crocheted dinosaur, reconstructed with COLMAP and gsplat, with an inner light and a deformation that pulses with it.

    Gaussian Splatting research for 3D web visualisation

  16. Configurable loading zone

    The loading zone is set up with assets that can be dragged into the pickup.

    Rastrojero

  17. Loading and unloading zone

    A zone where the pickup can load the objects sitting on a pallet.

    Rastrojero

  18. A new collider for the pickup

    A convex hull for the front and four cuboids for the bed.

    Rastrojero

  19. More accurate colliders for the assets

    I adjusted the colliders of several assets so they follow the shape of the objects more closely.

    Rastrojero

  20. Edit mode rebuilt, with new gizmos

    I rebuilt several parts of edit mode and added new gizmos to move and rotate.

    Rastrojero

  21. Saving the asset layout

    Placed assets are now saved in the browser.

    Rastrojero

  22. New assets: signs, tyres, barriers and speed bumps

    New assets for the track and a zoomed-out view to place them.

    Rastrojero

  23. Spawn bug fixed

    After quite a while, the bug in the pickup's spawn is fixed.

    Rastrojero

  24. Editing different assets

    The panel supports different assets, the camera can be dragged and placed objects can be moved and rotated.

    Rastrojero

  25. Edit panel

    A panel to place cones and edit the floor and its limits.

    Rastrojero

  26. The first objects: cones

    Cones are the first asset of the test track.

    Rastrojero

  27. Floor with grid and limits

    The floor material adds the grid with presets and a shader that marks the limits of the driving area.

    Rastrojero

  28. Steering tuned: the basics are ready

    With the steering tuned, the basic driving is ready.

    Rastrojero

  29. Ambient occlusion from Blender

    I exported the ambient occlusion from Blender and I like the result better.

    Rastrojero

  30. Rear brakes

    Brakes that apply a different force depending on direction, and gentle braking when you release the throttle.

    Rastrojero

  31. Lighting system

    Headlights, brake lights, hazard lights and reversing lights working.

    Rastrojero

  32. Materials and suspension with Rapier

    Back in Three.js: the model's materials and a stable suspension.

    Rastrojero

  33. Retopology: from 80,000 to 22,000 vertices

    I rebuilt the model's geometry so it is lighter in the browser.

    Rastrojero

  34. First test in Three.js

    The Rastrojero model, now inside Three.js.

    Rastrojero

  35. 1971 Rastrojero in Blender

    The finished model, for now: a 1971 Rastrojero made in Blender.

    Rastrojero

  36. Bed, wheels and colour

    Third progress update in Blender: the pickup gets the wooden bed, the wheels and the light-blue paint.

    Rastrojero

  37. The cab takes shape

    Second progress update in Blender: the cab gets materials, grille, headlights and bumper

    Rastrojero

  38. Modelling the Rastrojero in Blender

    With the physics working, I started modelling the pickup, beginning with the cab’s bodywork.

    Rastrojero

  39. First steps: from a cube to a chassis on wheels

    Where the Rastrojero started: testing the physics with Rapier before the model existed.

    Rastrojero