Cada pieza 3D de nuestras versiones de Antes y ahora empezó siendo un archivo de Python. Superman, Batman, Wolverine, Spider-Man, Iron Man, Hulk, R2-D2 y la Game & Watch los construye cada uno un script que maneja Blender, exporta un modelo y se lo pasa a una página que lo ilumina en directo con three.js. Nada se esculpió con el ratón.
Suena a truco de fiesta. Resultó ser la decisión más práctica del proyecto.
Por qué construir 3D con código
Un modelo hecho a mano es un objeto terminado. Un modelo hecho por un script es una receta, y las recetas se pueden cambiar. Cuando nos dijeron que "sus puños parecen guantes" sobre Hulk, no reabrimos un archivo para empujar vértices; cambiamos cómo se construía el puño y lo volvimos a ejecutar. Cuando los antebrazos eran demasiado cortos, o una capa tenía que caer sobre los hombros en lugar de por detrás, el arreglo eran unas pocas líneas, y el modelo entero se reconstruía en minutos.
También significa que cada pieza es reproducible. Los scripts viven en el repositorio junto a la web, y un kit compartido se ocupa de lo que necesita cada busto: el torso, el pedestal, el pintado de color y la exportación.
Las caras son difíciles, así que no empezamos de cero
Nuestras primeras cabezas se construyeron con primitivas y se deformaron con matemáticas. Se leían como cabezas, pero no como personas. Las caras son donde el ojo menos perdona, y ningún ruido ingenioso arregla una nariz un poco demasiado larga.
Así que cambiamos de enfoque. Blender Studio publica un conjunto de mallas humanas base con licencia CC0, libres para cualquiera. Ahora empezamos cada cara a partir de esa cabeza realista y la remodelamos con un script: una frente más pesada y una mandíbula más ancha para Hulk, una mandíbula cuadrada y la barbilla partida para Superman, un gruñido para Wolverine. Las manos salen del mismo conjunto, colocadas con un script en un agarre, una palma abierta o un puño.
Los pequeños detalles que más tiempo llevaron
Unas cuantas lecciones que pasaríamos a cualquiera que haga lo mismo:
- Estanco o nada. Unir piezas con remallado y después reducir el resultado para ahorrar tamaño de archivo puede plegar la superficie sobre sí misma, y los pliegues se ven como agujeros oscuros. Nuestro build ahora se niega a terminar si un modelo no es una superficie cerrada y válida.
- Un material por malla. El exportador glTF de Blender solo conserva los colores de vértice en el primer material de una malla, así que cada parte pintada es su propia malla.
- Bocas cerradas hasta que hagan falta. Hulk y Wolverine mantienen los labios cerrados en reposo; el rugido y el gruñido son cambios de forma que solo se reproducen mientras mantienes pulsado, con los dientes ocultos hasta que se abre la boca.
- Versiona cada modelo. Los navegadores guardan los modelos en caché con insistencia, así que cada archivo se carga con una etiqueta de versión que cambia cuando cambia el modelo.
La luz es la mitad del modelo
En la página, cada pieza se ilumina en tiempo real con three.js. Iron Man y Superman añaden bloom, un efecto de resplandor para los ojos, el reactor ARC, el repulsor y la visión calorífica. Hizo falta ajustarlo. Nuestro primer Iron Man brillaba tanto que el casco desaparecía, así que ahora el bloom empieza pequeño y solo se abre mientras cargas un disparo.
Cada pieza tiene también su propia escena: una azotea de Gotham bajo la lluvia, el anochecer sobre Nueva York, los soles gemelos de Tatooine, un escritorio de nogal para las consolas portátiles.
Mantenerlo rápido
Es fácil hacer que el 3D vaya lento. Unas pocas reglas mantienen el nuestro usable en un móvil:
- Los modelos se cargan cuando la página está inactiva, nunca antes que el texto.
- Las escenas se construyen de una en una, en trozos pequeños, para que la página nunca se congele mientras prepara los gráficos.
- La preparación de los gráficos se hace en segundo plano antes de dibujar el primer fotograma.
- Los equipos sin un chip gráfico utilizable reciben una imagen fija en lugar de una página atascada.
La vitrina de museo en la parte superior de Antes y ahora muestra las ocho piezas a la vez, así que usa versiones ligeras de cada modelo: simplificadas, comprimidas y cargadas solo cuando hace falta.
Hacia dónde va
Las técnicas detrás de estos bustos pasan directamente al trabajo para clientes: configuradores de producto, explicaciones interactivas, momentos estelares que cargan rápido y responden al tacto. Construirlos con código significa que pueden cambiar tan rápido como el producto al que acompañan.
Mientras tanto, ve a hacer enfadar a Hulk.