Freelance / Investigación · 2023
Atlas 3D
Atlas de anatomía interactivo para un libro
Atlas de anatomía 3D en el navegador hecho para un libro de una facultad de medicina: los estudiantes rotan y hacen zoom sobre huesos con etiquetas ancladas a la geometría.
Tecnologías: Next.jsthreejsreact-three-fiberframer-motion
Resumen
Atlas 3D es un atlas de anatomía web que renderiza modelos esqueléticos humanos en el navegador con Three.js mediante react-three-fiber. Los estudiantes rotan, hacen zoom y se desplazan alrededor de cada hueso mientras las anotaciones muestran nombres anatómicos anclados a coordenadas 3D específicas. Se construyó como complemento interactivo de un libro impreso para una cátedra de anatomía de una facultad de medicina.
El problema
Un amigo que estaba escribiendo ese libro tenía una limitación que ninguna ilustración resuelve: un hueso es un objeto tridimensional y una página muestra un ángulo. Los estudiantes memorizan el dibujo en vez de la forma, y después no reconocen el mismo hueso desde otra vista.
Necesitaba algo que los estudiantes pudieran abrir al lado del libro, girar en la mano y leerle las etiquetas, sin instalar nada y sin conocimiento técnico.
Decisiones
- react-three-fiber dentro de Next.js en vez de Three.js crudo: la escena se compone declarativamente como componentes React, así las anotaciones y la UI viven en el mismo modelo que el contenido 3D.
- Anotaciones atadas a coordenadas 3D del mundo, no a posiciones de pantalla: las etiquetas quedan sobre la parte correcta del hueso en cualquier rotación y nivel de zoom, que es todo el punto en un contexto académico.
- Nivel de detalle progresivo al cargar los modelos: el primer render llega rápido en la notebook de un estudiante y el detalle entra después, en vez de una espera larga en blanco.
- Draw calls perfilados y optimizados para sostener 60 fps en hardware de gama media: el dispositivo objetivo era la notebook o el celular de un estudiante, no una workstation.
- Gestos táctiles como entrada de primera clase: pinch para zoom, rotación con dos dedos y swipe entre huesos, porque la mayor parte del estudio pasa en el celular al lado del libro.
- Framer Motion solo para las transiciones de interfaz entre el catálogo y el detalle de cada hueso: al canvas 3D no se lo toca.
Resultado
El atlas está online y funciona como complemento del libro: cualquier estudiante abre un hueso, lo gira y lee las etiquetas sobre la geometría real, desde una notebook o un celular.
Fue además mi primer proyecto sostenido con un cliente no técnico, y eso me enseñó tanto como el renderizado: relevar requerimientos con un anatomista, mostrar avances con demos en vez de jerga, partir un proyecto complejo en hitos y decidir cuándo resistir un pedido. Esas ideas las vi formalmente en las materias de ingeniería de software después, con la práctica ya hecha.