Devlog

Devlog

Notas sobre cómo construimos las pequeñas escenas interactivas de esta web: animación procedural, 3D en tiempo real y los trucos que les dan vida.

Actualizado en Por ShengyuStudio

Cómo animar un monigote con IK de dos huesos

Animación procedural en canvas HTML: un solucionador de IK de diez líneas a partir de la ley de los cosenos, ciclos de marcha, pies que no resbalan, pistas de fotogramas clave con easing, squash and stretch y pelo con física verlet.

Leer el artículo →

Un océano en plena tormenta con three.js

Un mar hecho con una suma de senos como única fuente de verdad, normales por diferencias finitas, espuma en las crestas con onBeforeCompile, un barco que sube, cabecea y se balancea sin motor de física, y la niebla, la lluvia y los relámpagos que venden la tormenta.

Leer el artículo →

Cómo hicimos un bosque 3D para recorrer en three.js

Terreno procedural excavado alrededor de un arroyo serpenteante, una cinta de agua refractiva, 25.000 briznas de hierba instanciadas con un parche de viento en onBeforeCompile, árboles de tarjetas de hojas, clic para caminar con un raycast contra el suelo, y bloom más una corrección de color.

Leer el artículo →

Cada artículo trata de una escena con la que puedes jugar en nuestra web: la página del monigote (ahora Stickman Spear Run, un runner en el que saltas y atacas con estocadas de lanza, con el laboratorio de movimiento como segundo modo), Tormenta a proa y Paseo por el bosque. Si buscas listas por género y recomendaciones, consulta nuestras guías.