Auteur: Theodore
Essayer en direct À propos de ce projet
Foldscape Memories (aussi intitulé Nature Memories · Duo dans le dépôt) est un site interactif qui déplie des photos de voyage en souvenirs tridimensionnels, construit avec React, Three.js, GSAP et Vite. La présentation de l’appareil découle de la réplique navigateur de l’iPhone Duo pliable réalisée plus tôt par l’auteur (SkentSun / iPhone Duo Depth Lab) — une maquette complète avec écrans interne et externe, sept poses et deux finitions, le tout animé — et ce projet ajoute par-dessus la couche des souvenirs.
La page d’accueil s’ouvre sur un appareil fermé et une seule photo. Faites défiler : les photos candidates arrivent par la droite le long d’une trajectoire cylindrique et se fondent à travers le bord de l’écran externe ; appuyez sur Open memory et l’appareil met cinq secondes à se déplier et à abaisser la caméra pendant que le lieu de la photo s’élève hors de l’écran. Il y a pour l’instant cinq souvenirs : Round Island Light, un voilier rouge dans les glaces du Groenland, la maison côtière de Kálfeyri en Islande, Santorin et le château d’Osaka. Glissez pour orbiter, faites défiler pour zoomer, et Rewind replie la photo le long de la même chronologie. Un Wallpaper Studio distinct, en haut à droite, habille les écrans interne et externe à partir d’une image ou d’une vidéo importée et génère la profondeur dans le navigateur.
Les photos et les modèles GLB des cinq cas sont livrés avec le dépôt, la consultation ne demande donc aucune clé d’API ; la génération de profondeur optionnelle dans le navigateur télécharge un modèle d’inférence à la demande. Le site est déployé sur Vercel (sortie de build dist/client) sous licence MIT, le modèle officiel d’Apple et les ressources de fonds d’écran étant déclarés séparément dans THIRD_PARTY.md et exclus de cette licence.
Points forts
- La page d’accueil est une galerie de photos circulaire : faites défiler, glissez ou utilisez les flèches du clavier, et chaque photo suit une trajectoire cylindrique jusqu’au bord de l’appareil avant de se fondre dans l’écran externe ; le défilement inverse reprend le même chemin et peut s’arrêter à n’importe quel point.
- Open memory amène d’abord la photo choisie jusqu’à l’appareil et attend le chargement de sa scène, puis passe cinq secondes à déplier l’appareil, abaisser la caméra et ajuster le zoom avant une orbite automatique lente à 4°/s ; glissez pour orbiter, faites défiler pour zoomer, et Rewind fait tourner la chronologie à l’envers jusqu’à la photo refermée.
- Cinq souvenirs — Round Island Light, un voilier rouge dans les glaces du Groenland, la maison côtière de Kálfeyri en Islande, Santorin et le château d’Osaka — chacun une photo plus une scène GLB livrée dans le dépôt, si bien que la consultation ne demande aucune clé d’API.
- Le Wallpaper Studio (?view=wallpaper) remplace les fonds des écrans interne et externe à partir d’une image ou d’une vidéo importée, calcule une carte de profondeur rapide dans le navigateur et l’affine avec un petit modèle pour une parallaxe et une profondeur de champ pilotées par le pointeur ; deux finitions, Star White et Night Sky ; le son est coupé par défaut et, une fois activé, se compose d’un bruit de côte procédural et d’un accord d’ambiance original ; le mode « réduire les animations » désactive le mouvement de la scène, l’orbite automatique et l’inertie.
Analyse technique
Ressources 3D · Cinq scènes GLB de souvenirs et un appareil pliable reconstruit à partir du modèle d’Apple
Chacun des cinq souvenirs est une photo plus une scène GLB (lighthouse-memory-v2.glb pèse environ 25 Mo) stockée dans public/scenes ; à l’exécution, seule la moitié supérieure de la photo sert de couverture, et le README précise que la consultation ne nécessite aucune clé d’API Tripo — la clé ne sert qu’à la production des ressources.
L’appareil pliable provient de l’USDZ officiel de l’iPhone Duo d’Apple : scripts/prepare-model.mjs pilote Playwright pour charger l’USDZ dans la page de développement, nomme les moitiés mobile et fixe folding-half / stationary-half, remplace les matériaux des écrans interne et externe par des surfaces blanches remplaçables et exporte un GLB binaire via GLTFExporter (textures plafonnées à 512). Seul le cadre métallique peut être recoloré — écrans, verre, objectifs et détails de la charnière sont intouchables — et THIRD_PARTY.md exclut les ressources Apple de la licence MIT du dépôt.
Voyage de la photo · Une seule progression GSAP pilote la galerie, la photo physique et l’écran externe
La galerie circulaire est la Circular Gallery de React Bits portée d’OGL vers Three.js : elle conserve le maillage subdivisé en 100×50, l’ondulation sinusoïdale des sommets selon la vitesse et l’échantillonnage d’image à coins arrondis, puis prolonge l’arc en une trajectoire cylindrique avec profondeur et orientation, en partageant une PerspectiveCamera avec l’appareil. GSAP Observer prend en charge la molette, le pointeur et le tactile ainsi que le seuil de glissement, tandis qu’une Timeline chorégraphie le voyage en approach → receive-and-melt → settle ; toute nouvelle entrée interrompt l’animation en cours et le glissement peut l’échantillonner à rebours.
La file de photos, le maillage de la photo physique et l’image réelle de l’écran externe sont pilotés par la même progression, avec des coordonnées de texture identiques au bord de l’écran : le maillage extérieur est découpé là où il entre dans l’écran, et l’écran complète l’image correspondante. Les transitions de couverture utilisent la branche Melt de Morph Slider (intensity 0.95 / scale 4.9 / aberration 0.35), avec un uTime piloté par la progression du voyage plutôt que par l’horloge — c’est ce qui rend possibles le rembobinage et les arrêts sur image.
Portail d’écran · La visibilité n’est décidée que par le volet réellement en mouvement
La scène reste construite sur le plan entièrement déplié et n’est jamais reconstruite ni remise à l’échelle image par image ; ce que l’on voit dépend de l’angle entre l’écran gauche mobile et l’écran droit fixe — l’ouverture libère d’abord l’espace au-dessus de l’écran droit, puis la moitié gauche se révèle quand le volet dépasse la verticale et s’approche de l’horizontale. Immobilisez le volet et l’image se fige ; le rembobinage retraverse le même volume. Les faces de coupe temporaires, là où le volet traverse la scène, sont triangulées à partir des vraies intersections de maillage avec rejet spatial, mises en cache pour les plans inchangés avec des tampons GPU réutilisables, remplies en glace pâle ou pierre neutre et masquées aux positions fermée et ouverte ; une approche par stencil a été écartée car les maillages livrés ont des bords ouverts. Le reflet de l’eau à gauche n’apparaît qu’à l’approche de l’horizontale pour éviter une double silhouette inclinée.
La passe d’optimisation du démarrage du 16/09/2026 a déplacé ce découpage géométrique à la charnière dans un module worker : chacune des cinq scènes demandait auparavant 1 à 1,6 s de préparation synchrone, le thread principal ne passe plus que 8 à 29 ms à restaurer des tampons transférables ; les scènes fraîchement montées appliquent l’état de pliage courant avant le rendu, les caméras du reflet de l’eau ne voient que la scène naturelle et non le téléphone ni la galerie, et les préréglages ainsi que le worker d’IA du Wallpaper Studio ne se chargent qu’à l’entrée dans cette vue.
Wallpaper Studio · Estimation de profondeur dans le navigateur et optique du pliage
Une image importée reçoit d’abord une carte de profondeur rapide, qu’un petit modèle affine ensuite (@huggingface/transformers tourne dans depth.worker.js ; le worker d’IA n’est créé qu’au moment où l’on appuie réellement sur générer) ; premier plan et arrière-plan sont déplacés et floutés selon l’écart de profondeur, si bien que l’image gagne un vrai relief quand le pointeur bouge. Les cinq fonds prédéfinis embarquent des cartes de profondeur pré-générées en 512×288, et le préréglage vidéo utilise celle de son image d’affiche. Les couches des écrans interne et externe sont composées à l’exécution à partir de mises en page JSON et de 20 icônes SVG individuelles en textures GPU transparentes, de sorte que modifier une icône n’oblige jamais à redessiner tout l’écran.
Le pliage lui-même tient dans des paramètres : des coefficients de rayon de flou de 3,5 et 1,8 pour les écrans interne et externe, si bien que l’écran externe se floute en premier quand le volet se ferme ; la charnière est entièrement pliée à 96 %, les 4 % restants laissant l’écran se remettre au point ; la luminosité baisse avec la pose selon une courbe sinusoïdale, au plus sombre vers 90° ; et la parallaxe latérale projette les sommets de l’écran sur un « plan virtuel entièrement déplié » avant l’échantillonnage, de sorte que la géométrie se plie tandis que le fond glisse comme sur une vitre plane devant vous, sans jamais se déformer en trapèze.
