ProyectosProyectos personales

Locomoción procedural para Three.js

three-procedural-locomotion: una librería que hace caminar, correr, girar, agacharse y saltar a un personaje humano en Three.js sin animaciones grabadas, con la marcha medida contra capturas de movimiento reales.

Estado
En desarrollo
Periodo
2026.10 — actualidad
Tipo
Librería / paquete
Rol
Proyecto individual, Animación, Sistemas procedurales, Investigación, Documentación, Contribución open source
Tecnologías
  • Three.js
  • TypeScript
  • Vite
  • VitePress
  • Blender
Log de desarrollo
9 entradas

Contexto y objetivo

En un juego o una experiencia 3D, un personaje suele moverse reproduciendo animaciones hechas de antemano: caminar, correr, girar. El problema es que esas animaciones no saben nada del entorno, y los pies resbalan, atraviesan los escalones o flotan sobre una pendiente.

La idea de esta librería es la contraria: no hay animaciones bakeadas. Cada frame se calcula a partir de una velocidad y un rumbo dónde apoyar cada pie, cómo doblar las piernas para llegar ahí y cómo acompaña el resto del cuerpo. Así el personaje reacciona al suelo que tiene debajo y a lo que lo rodea.

Qué hace

  • Camina y corre sin modos aparte: pasa de una marcha a otra de forma gradual, con fase de vuelo, rebote de caderas e inclinación del torso.
  • Point and click: moveTo(punto) lleva al personaje hasta el destino; si queda detrás, gira en 2–3 pasos, como una persona.
  • Pies sobre el terreno: talón, planta y punta; se adaptan a baches, pendientes y escalones bajos.
  • Agacharse y saltar, con preparación, impulso y amortiguación.
  • Tocar al pasar: apoya la mano en columnas, paredes o barandas al pasar a su lado, y la desliza mientras camina.
  • Cualquier tamaño y proporción: escala longitudes, velocidades y ritmo con el largo de pierna del modelo, de un niño a un gigante.
  • Rigs de Mixamo y de Rigify, y cualquier otro con un mapping de huesos.
  • 116 parámetros, cuatro estilos (tired, sneaky, athletic, heavy) y once controles básicos que mueven varios parámetros a la vez.
  • Rápida: unos 0,1–0,2 ms por personaje y frame.

Descripción técnica

Cada frame, la librería encadena varias etapas:

  1. Gait: el ritmo de los pasos según la velocidad (la cadencia crece con la raíz de la velocidad).
  2. Footstep planning: dónde va a aterrizar cada pie, teniendo en cuenta el giro pendiente.
  3. Trayectoria del pie: el pie en el aire sale con la velocidad del despegue, sube pronto y planea hasta el apoyo, rodando de talón a punta.
  4. Two-Bone IK: cadera, rodilla y tobillo se resuelven con la ley de los cosenos.
  5. Foot placement: rayos contra el suelo para apoyar cada pie a la altura y con la inclinación del terreno.
  6. Postura del cuerpo: pelvis, columna, pecho, cabeza, brazos y dedos, con muelles amortiguados y huesos de torsión opcionales.
const human = createProceduralHuman({
  model: gltf.scene,
  mapping: rigifyMapping,
  ground: [floorMesh],
  preset: 'athletic',
});

human.moveTo(point, { run: true });
human.update(dt); // cada frame

Naturalidad medida

Que se vea natural no queda librado al ojo. La marcha del personaje se analiza igual que la de personas reales, con capturas de movimiento de la base de datos de CMU, a la misma velocidad relativa: cadencia, zancada, fases de apoyo, ángulos de cadera, rodilla y tobillo, pelvis, hombros y brazos, curva a curva a lo largo del ciclo.

Un test compara cada cambio con esas referencias y falla si la marcha se aleja de la de una persona. Una segunda base, la de SFU, se usa solo para medir en local.

Web y laboratorio

La librería tiene una web bilingüe (inglés y español) con la documentación, una demo en vivo en la portada y un laboratorio para probarla: se elige el modelo, se ajustan los parámetros viendo el efecto en tiempo real, con el personaje caminando en el sitio, y se copia el código listo para pegar. Todavía no está publicada.

Resultados y limitaciones

  • La librería es pública, con licencia MIT, documentación en inglés y español, tests e integración continua.
  • No tiene colisiones ni física: el cuerpo no choca con obstáculos, y moveTo va en línea recta, sin buscar caminos.
  • No planifica escaleras ni saltos a otra altura; solo baches y escalones bajos.
  • Está probada con Mixamo y con el metarig de Rigify; otros rigs deberían funcionar con su mapping, pero no están verificados.

Créditos

  • Capturas de movimiento: The data used in this project was obtained from mocap.cs.cmu.edu. The database was created with funding from NSF EIA-0196217. También la base de SFU, solo para medir en local.
  • Modelos de la demo y los tests: Human Base Meshes, de Blender Studio (CC0).
  • Desarrollada con Claude como asistente de programación.
LOG

Log de desarrollo

  1. Web, documentación y laboratorio

    Una web bilingüe con la documentación, una demo en vivo y un laboratorio que da el código listo para pegar.

  2. La librería, pública

    Repositorio público con licencia MIT, documentación en inglés y español, y un modelo de pruebas propio.

  3. Tocar al pasar

    El personaje apoya la mano en columnas, paredes y barandas al pasar, y la desliza mientras camina.

  4. Hueso por hueso: pelvis y pecho

    Un inventario de cuánto gira cada hueso frente a personas reales, y la basculación de la pelvis.

  5. Paradas y vueltas como una persona

    Un solo paso de cierre al llegar, y vueltas de 2–3 pasos cuando el destino queda detrás.

  6. La marcha, medida contra personas reales

    Comparé la marcha con capturas de movimiento de CMU y la ajusté curva a curva.

  7. Ajustes en dos niveles y caminar en el sitio

    Once controles de alto nivel sobre los parámetros, y un modo para caminar en el sitio mientras se ajusta.

  8. Una librería de movimiento procedural humano

    Primera versión de la librería: camina, corre, se agacha, salta y va a un punto, sin animaciones grabadas.

  9. Primer prototipo: piernas con IK

    El punto de partida: piernas resueltas con IK de dos huesos y pies que se quedan apoyados.