@tryonit/web — Motor de prueba virtual en el cliente para el navegador

@tryonit/web es el motor de TryOnIt. Abre la cámara, sigue la cara, las manos, el cuerpo o el pelo con MediaPipe ejecutándose en el dispositivo mediante WebAssembly, y dibuja el producto encima en tiempo real: pintalabios y maquillajes completos, color de pelo, stickers, gafas, sombreros, pendientes, relojes y anillos en 3D, y ropa en modo experimental. Las imágenes de la cámara nunca salen del dispositivo, así que no hay servidor que mantener ni coste por prueba.

Escribí los renderizadores yo mismo. El maquillaje se rasteriza a partir de polígonos de puntos de la cara en una máscara suavizada y se mezcla de forma que se conserva la textura de la piel y los labios y los dientes nunca se colorean. Los productos 3D se modelan en milímetros y se colocan con una cámara que reproduce la geometría facial de MediaPipe, con oclusores invisibles para que las patillas de las gafas y el pendiente más lejano desaparezcan detrás de la cabeza. La ropa se deforma sobre el torso mediante una homografía.

El rendimiento fue una condición desde el principio. La entrada inicial ocupa unos 23 KB min+gzip; MediaPipe, cada modelo de seguimiento y three.js solo se cargan cuando un producto los necesita. La detección se ejecuta una vez por cada fotograma nuevo de la cámara, a un ritmo adaptativo de 30 a 15 fps, mientras que el renderizado se ejecuta en cada frame de animación, y destroy() libera cada pista de cámara, tarea de MediaPipe y recurso WebGL. Para webs sin React, mount() añade la interfaz completa en pocas líneas.