← labVOLUMA · 3D

Laboratorio de materiales

El cuerpo que estás viendo salió de Mixamo y llegó aquí como un solo archivo .glb. La malla y el esqueleto vienen de allá; el material se pone acá y se cambia en caliente, sin volver a exportar nada. Eso es lo que hace que el flujo sirva: Mixamo pone el cuerpo, nosotros ponemos la piel.

Falta el Y Bot, que es el otro maniquí de Mixamo, porque descargarlo pide tu cuenta de Adobe y no la tengo. En cuanto lo bajes: conviértelo a .glb, déjalo en public/lab/3d/ y agrégalo a la lista CUERPOS de esta página — un renglón. El encuadre, las animaciones y los materiales se acomodan solos, que es justo lo que se probó con estos tres.

Por qué esto importa para el show · la lección que dio el laboratorio

Prende cromo y apaga las dos luces: pantallas y reflejo de cuarto. El cuerpo casi se borra — quedan cuatro brillos sueltos y nada más. Un material reflectivo no tiene color propio: lo único que hace es devolver lo que tiene enfrente, así que en un cuarto negro un cromo perfecto es invisible. Las tres pantallas del venue no son el fondo del show: son la fuente de luz. Lo que se proyecte en ellas es literalmente lo que se va a ver encima de Hugo y de los 150. Eso cambia el orden de las decisiones: primero se diseña lo que emiten las pantallas, después lo que refleja.

Lo mismo con el vidrio, y más fuerte: un cuerpo transparente sobre negro desaparece. Solo existe si hay algo brillante detrás que se pueda deformar.

El flujo de trabajo · de Mixamo a la pantalla

1. Mixamo (gratis con cuenta de Adobe). En Characters eliges el cuerpo — el Mannequin es el correcto para nosotros: no tiene cara, no tiene ropa, no tiene género, y eso lo vuelve un cuerpo cualquiera en lugar del cuerpo de alguien.
2. En Animations eliges el movimiento y lo ajustas con los deslizadores. Descarga con FBX Binary, With Skin, 30 fps y sin reducción de cuadros. Para animaciones extra del mismo cuerpo, descarga Without Skin: te ahorras repetir la malla y luego se pegan todas en un solo archivo.
3. FBX no sirve para web. Hay que convertirlo a .glb, que es el formato que el navegador entiende de un trago. Por Blender: importar FBX, exportar glTF 2.0 marcando animación. O por terminal, sin abrir nada:
   npx fbx2gltf -b -i cuerpo.fbx -o cuerpo.glb
4. Aplastarlo, porque sale pesadísimo:
   npx @gltf-transform/cli optimize cuerpo.glb listo.glb --compress draco
   Medido con estos cuatro cuerpos: de 10.2 MB pasaron a 2.9 MB. El Y Bot solo bajó de 2.3 MB a 255 KB, nueve veces menos, sin que se note nada.
   El precio es que el navegador necesita el descompresor, y hay que decírselo con setDRACOLoader — si no, los archivos simplemente no abren.
   Y ojo con la letra chica: optimize no solo comprime, también quita triángulos. Al X Bot le bajó de 49,118 a 23,117, la mitad. Aquí no se nota y hasta conviene, pero en una pieza donde importe el detalle fino hay que pedir --no-simplify o el modelo llega adelgazado sin que nadie lo haya decidido.
5. Y ya en el sitio, el material se decide en código. Este paso no vuelve a pasar por Mixamo ni por Blender nunca.

Los dos tropiezos · que cuestan una tarde si nadie los avisa

Uno. El esqueleto deforma la malla en la tarjeta de video, dentro del shader. Si escribes un shader tuyo desde cero, el cuerpo se congela en pose T y parece que se rompió la animación, cuando lo que pasó es que tu shader no sabe de huesos. La salida es no escribir el shader desde cero sino injertarlo en uno que ya sabe — es lo que hace el material de rayos X de aquí arriba:

mat.onBeforeCompile = function(sh){
  sh.fragmentShader = sh.fragmentShader.replace(
    '#include <opaque_fragment>',
    /* aquí va lo tuyo, y el esqueleto sigue funcionando */
  );
};

Dos. El vidrio de verdad (transmission) obliga a dibujar la escena una segunda vez, aparte, para poder mirarla a través del cuerpo. Se ve en el contador: pasa de 6 a 9 llamadas de dibujo con solo cambiar el material. En esta Mac ni se siente; en teléfono es lo primero que se cae.

Tres. Este pasó de verdad al convertir el Y Bot. Mixamo exporta en centímetros, así que en Blender el esqueleto entra con escala 0.01. La tentación es aplicar esa escala antes de exportar — y ahí truena: aplicarla también multiplica las llaves de traslación de la cadera, y el cuerpo aparece nueve metros bajo el piso, del tamaño correcto y perfectamente animado, pero invisible. La altura estaba bien; lo que estaba mal era dónde. No apliques la escala: el exportador de glTF ya sabe llevársela como escala de nodo, y el navegador la entiende.

Los cuadros por segundo no sirven para comparar aquí: la pantalla los topa en 120 y todos los materiales llegan al tope, así que se ven iguales aunque no cuesten lo mismo. Por eso el dato que hay que mirar es el de las llamadas.

Qué cuesta cada material · medido aquí, no supuesto

Material	Cómo se hace	Cuidado
Mate	Standard, rugosidad alta	Ninguno. Es la referencia.
Cromo	metalness 1 · roughness .05	Sin algo que reflejar, es negro.
Vidrio	Physical · transmission 1	De 6 a 9 llamadas de dibujo.
Tornasol	Physical · iridescence 1	Se come el naranja de la marca.
Rayos X	Fresnel injertado	Barato y es el que mejor se ve de lejos.
Alambre	wireframe	A 30 m se deshace en ruido.
Volumen	Normales como color	Sirve para revisar, no para mostrar.

Se carga three.js desde un CDN porque es un laboratorio. Si algo de esto pasa al sitio de verdad, la librería se guarda con nosotros: no vamos a poner el show a depender de que el servidor de alguien más esté de buenas.