Muse est une expérience de réalité augmentée : on vise une image avec son téléphone, la vidéo s'anime dessus et Muse s'en échappe en 3D, avec son ombre projetée sur l'image. L'expérience fonctionne directement dans le navigateur, sans application : ar.raphaelerba.art
Muse is an augmented reality experience: point your phone at an image, the video comes to life on it and Muse steps out in 3D, casting her shadow on the image. It runs straight in the browser, no app needed: ar.raphaelerba.art
1. Le personnage — Muse est modélisée et animée dans Cinema 4D. Son corps est rigué (Toon Rig), puis tout le personnage glisse le long d'une trajectoire grâce à un Spline Wrap et un Twist qui la font onduler. Ses cheveux et ses rubans sont des Sweeps, et ses traînées sont générées par un Tracer MoGraph.
2. La vidéo de fond — Une vidéo carrée de 16 secondes sert de fenêtre dans laquelle Muse évolue. Elle est collée sur l'image en réalité augmentée et joue en boucle.
1. The character — Muse is modelled and animated in Cinema 4D. Her body is rigged (Toon Rig), then the whole character glides along a path with a Spline Wrap and a Twist that make her ripple. Her hair and ribbons are Sweeps, and her trails come from a MoGraph Tracer.
2. The background video — A 16-second square video acts as the window Muse moves through. In AR it is pinned onto the image and loops.
3. L'image de référence — La première image de la vidéo est retravaillée avec des symboles graphiques denses (cercles, losanges, traits, cadre) pour que le téléphone la reconnaisse de façon fiable. C'est elle qu'on imprime ou qu'on affiche.
3. The reference image — The first frame of the video is reworked with dense graphic symbols (circles, diamonds, lines, frame) so the phone recognises it reliably. This is the image you print or display.
4. Les prototypes — Un premier prototype web (MindAR + three.js), puis une application iPhone (Unity + ARKit) ont permis de tester la détection de l'image, le placement du personnage et l'ombre.
5. La version finale, dans le navigateur — Construite avec 8th Wall Desktop (WebAR, sans application). Les déformations du personnage ne pouvant pas être exportées telles quelles, l'animation est exportée image par image (30 images/s) et synchronisée avec la vidéo. Ombre en temps réel sur l'image, traînées reconstruites à la volée, et inversion noir/blanc de Muse entre les images 150 et 210.
4. Prototypes — A first web prototype (MindAR + three.js), then an iPhone app (Unity + ARKit) were used to test image tracking, character placement and the shadow.
5. The final version, in the browser — Built with 8th Wall Desktop (WebAR, no app). Since the character's deformations can't be exported as is, the animation is exported frame by frame (30 fps) and synced to the video. Real-time shadow on the image, trails rebuilt on the fly, and a black/white inversion of Muse between frames 150 and 210.
6. En ligne — L'expérience est hébergée sur ar.raphaelerba.art. Scannez le QR code depuis un ordinateur, ou ouvrez le lien sur votre téléphone, puis visez l'image.
6. Online — The experience is hosted at ar.raphaelerba.art. Scan the QR code from a computer, or open the link on your phone, then point it at the image.
Outils / Tools : Cinema 4D, After Effects, 8th Wall, three.js, Unity / ARKit, GitHub Pages.