Autor: Theodore
Pruébalo en vivo Sobre este proyecto
ANOMALY es un archivo de dieciséis animales reales, cada uno definido por una estructura que parece imposible que funcione: la cúpula transparente llena de líquido sobre el cráneo del pez de cabeza transparente, el golpe con burbuja de cavitación del camarón mantis, la aleta caudal ausente del pez luna. Cada ficha, desde A-001 hasta A-016, incluye su propio modelo de Tripo para arrastrarlo, ampliarlo y restablecerlo.
La colección se organiza por la propia anomalía, no por taxonomía —transparencia, visión, bioluminiscencia, camuflaje, depredación, gigantismo y plan corporal, además de un filtro transversal de aguas profundas—, y un espécimen puede pertenecer a varias categorías a la vez: la cúpula del pez de cabeza transparente y sus ojos tubulares giratorios son dos anomalías distintas en un mismo animal. Por eso cada ficha comienza por la estructura anatómica y no por el nombre de la especie. Todo permanece en una sola pantalla: al elegir una categoría, una tarjeta del carrusel o un resultado de búsqueda, el contenido se sustituye en el mismo lugar, con la placa de archivo, las observaciones y una nota de campo plegable a la izquierda, el escenario 3D en el centro y los datos de la especie junto con el mapa de distribución a la derecha.
Puntos clave
- Elige cualquiera de las dieciséis fichas, 01–16, de la barra inferior y tanto el escenario como los dos paneles laterales cambiarán en el mismo lugar; arrastra para girar, desplázate para ampliar y cada cambio restablece la cámara para que los dieciséis especímenes se presenten a un tamaño comparable
- Al hacer clic en la placa de archivo, esta se transforma desde su propia miniatura en una caja de visualización retroiluminada —el halo es la luz que escapa por el borde de la placa—; se puede ampliar hasta 3.2× y arrastrar para desplazar la vista.
- Filtra por la propia anomalía —transparencia, visión, bioluminiscencia, camuflaje, depredación, gigantismo y plan corporal—, además de un filtro transversal de aguas profundas basado en el hábitat; un espécimen puede pertenecer a varias categorías a la vez, y la búsqueda abarca nombres de especies, nombres latinos, estructuras e IDs de especímenes
- Mientras se descarga un modelo, GSAP traza la lámina de dibujo acotado del espécimen, trazo a trazo, mientras un calibre recorre su regla —el blueprint llega antes que el cuerpo y después se funde con la construcción 3D—; incluso un modelo almacenado en caché mantiene la lámina durante 1.5 segundos para que nunca pase en un destello sin poder leerse
Análisis técnico
Recursos 3D · Cómo llevar modelos high-poly de Tripo a la web
Los dieciséis modelos de especímenes se generan con Tripo; cada original ocupa ~60 MB y contiene ~1.9M triángulos —una densidad propia de escultura que no se puede distribuir—. Una pipeline gltf-transform meshopt reduce la geometría a 2.4–11 MB: soldada, simplificada con una tolerancia de error de 0.0002, podada y comprimida con meshopt. Las texturas se mantienen deliberadamente en 4K en vez de reducirse —el downsampling ahorraba poco y era la principal causa de pérdida de nitidez—, mientras que todo lo que llega en 8K baja a 4K, lo que reduce la VRAM de aproximadamente 358 MB a 89 MB por mapa de color base, sin pérdida visible al tamaño mostrado en pantalla.
Cada espécimen aplica su propia cadena de fallback: GLB → imagen fija → recorte → lámina lineal creada a mano, con una cuadrícula de dibujo incluso cuando falta la lámina, para que ningún archivo ausente pueda dejar vacío el escenario.
Escenario de especímenes · Encuadre automático y protección del contexto
Los dieciséis modelos no se crearon siguiendo una convención común y ninguno recibe transformaciones manuales: cada uno se mide al cargarlo con respecto a su propia matriz raíz —medir en world space recupera la escala ya aplicada y encoge el modelo en cada nueva medición—. La medición usa límites percentiles en lugar de un Box3 bruto: varios de estos animales tienen antenas y filamentos que reúnen una fracción diminuta de los vértices, pero que aun así definirían la caja y reducirían el cuerpo; al recortar los extremos, la caja envuelve la masa del animal, de modo que los dieciséis se presentan con un peso visual comparable. El ajuste automático gira el eje horizontal más largo para colocarlo a lo ancho de la pantalla, lo centra y llena el canvas —un nuevo espécimen entra en el catálogo y se encuadra por sí solo, con, como máximo, un pequeño ajuste por espécimen (una almeja es una tapa, no un perfil)—.
El Canvas no usa el espécimen como key: hacerlo desmontaría y reconstruiría el contexto WebGL en cada cambio, y los navegadores descartan el contexto activo más antiguo. Solo la Scene interna lleva key. El primitive también requiere dispose={null} —la caché GLTF de drei comparte geometría entre clones, y permitir que R3F ejecute dispose al desmontar destruye buffers que siguen en uso—.
Iluminación · Iluminado como una vitrina, no como una mesa de reproducción
Una luz principal de modelado, dos luces de contorno rasantes desde atrás y ningún rebote desde el suelo —la mayoría de estos animales son oscuros, y un borde es lo que separa un cuerpo oscuro de un fondo oscuro; esa es precisamente la función de las luces de contorno—. El mapa de entorno se hornea in situ a partir de luces de área dentro de la escena (Environment se sitúa fuera de la Scene con key, de modo que cambiar de espécimen nunca vuelve a hornearlo), sin descarga de HDRI ni solicitudes externas.
Cambiar la iluminación por sí solo no bastaba para separar los especímenes más oscuros —un calamar marrón rojizo oscuro y un fondo marrón cálido tienen valores tonales realmente próximos—, por lo que el espécimen se alza en un suave charco de luz y la sombra de contacto se hunde en él, abriendo así la silueta. El tone mapping usa Khronos PBR Neutral con una exposición de 1.34 en lugar del valor predeterminado ACES, que comprime con fuerza los tonos medios —justo lo que ocultaba estos especímenes—.
Carga · Un estado de progreso que se niega a mentir
useProgress de drei cuenta archivos, no bytes: un GLB autocontenido es un solo elemento, por lo que la barra permanece en cero durante toda la descarga y salta a cien al final —la cifra miente—. Por eso el loader no muestra ningún porcentaje: DrawSVGPlugin traza la lámina de dibujo acotado del espécimen, trazo a trazo, mientras un calibre recorre su regla, y solo comunica que hay trabajo en curso sin fingir que sabe cuánto falta.
Una vez listo el modelo, la lámina se funde de forma cruzada con la construcción 3D; incluso un modelo almacenado en caché mantiene la lámina durante al menos 1.5 segundos, pues de otro modo pasaría en un destello sin poder leerse. Con prefers-reduced-motion, la animación decorativa se detiene y se elimina el tiempo mínimo de permanencia —reducir el movimiento debe quitar movimiento, no funcionalidad, y nunca añadir espera—.
