@tryonit/web — Moteur d'essayage virtuel côté client pour le navigateur

@tryonit/web est le moteur de TryOnIt. Il ouvre la caméra, suit le visage, les mains, le corps ou les cheveux avec MediaPipe exécuté sur l'appareil via WebAssembly, et affiche le produit par-dessus en temps réel : rouges à lèvres et maquillages complets, coloration des cheveux, stickers, lunettes, chapeaux, boucles d'oreilles, montres et bagues en 3D, et vêtements en mode expérimental. Les images de la caméra ne quittent jamais l'appareil : aucun serveur à faire tourner, aucun coût par essai.

J'ai écrit les moteurs de rendu moi-même. Le maquillage est rastérisé à partir de polygones de points du visage dans un masque adouci, puis fusionné de façon à préserver la texture de la peau et des lèvres sans jamais colorer les dents. Les produits 3D sont modélisés en millimètres et placés avec une caméra qui reproduit la géométrie du visage de MediaPipe, avec des occulteurs invisibles pour que les branches de lunettes et la boucle d'oreille éloignée disparaissent derrière la tête. Les vêtements sont déformés sur le torse par homographie.

La performance a été une contrainte dès le départ. Le point d'entrée initial pèse environ 23 Ko min+gzip ; MediaPipe, chaque modèle de suivi et three.js ne se chargent que lorsqu'un produit en a besoin. La détection tourne une fois par nouvelle image de la caméra, à un rythme adaptatif de 30 à 15 ips, tandis que le rendu tourne à chaque frame d'animation, et destroy() libère chaque piste caméra, tâche MediaPipe et ressource WebGL. Pour les sites sans React, mount() ajoute l'interface complète en quelques lignes.