Yazar: Theodore
Canlı deneyin Bu proje hakkında
Foldscape Memories (depo içinde Nature Memories · Duo olarak da adlandırılır), seyahat fotoğraflarını üç boyutlu anılara açan etkileşimli bir sitedir; React, Three.js, GSAP ve Vite ile geliştirilmiştir. Cihaz sunumu, yazarın katlanabilir iPhone Duo için daha önce yaptığı tarayıcı replikasından (SkentSun / iPhone Duo Depth Lab) doğar — iç ve dış ekranlı, yedi duruşlu ve iki kaplamalı, tamamı animasyonlu eksiksiz bir maket — ve bu proje onun üzerine anı katmanını ekler.
Ana sayfa kapalı bir cihaz ve tek bir fotoğrafla açılır. Kaydırın; aday fotoğraflar sağdan silindirik bir yol boyunca girer ve dış ekranın kenarından eriyerek içeri geçer; Open memory’ye basın, cihaz beş saniyede açılıp kamerayı alçaltırken fotoğraftaki yer ekrandan yükselir. Şimdilik beş anı var: Round Island Light, Grönland buzları arasında kırmızı bir yelkenli, İzlanda’daki Kálfeyri kıyı evi, Santorini ve Osaka Kalesi. Döndürmek için sürükleyin, yakınlaştırmak için kaydırın; Rewind fotoğrafı aynı zaman çizelgesi boyunca geri katlar. Sağ üst köşedeki ayrı bir Wallpaper Studio, yüklenen bir görsel veya videoyla iç ve dış ekranları giydirir ve derinliği tarayıcıda üretir.
Beş vakanın fotoğrafları ve GLB modelleri depoyla birlikte gelir, bu nedenle görüntülemek için API anahtarı gerekmez; isteğe bağlı tarayıcı içi derinlik üretimi bir çıkarım modelini istek üzerine indirir. Site Vercel üzerinde (derleme çıktısı dist/client) MIT lisansıyla yayındadır; Apple’ın resmi modeli ve duvar kâğıdı varlıkları THIRD_PARTY.md içinde ayrıca beyan edilmiş ve bu lisansın dışında tutulmuştur.
Öne çıkanlar
- Ana sayfa dairesel bir fotoğraf galerisidir: kaydırın, sürükleyin veya ok tuşlarını kullanın; her fotoğraf silindirik bir yol boyunca cihazın kenarına gider ve dış ekranın içinde erir; ters kaydırma aynı yolu geri izler ve herhangi bir noktada durabilir.
- Open memory önce seçilen fotoğrafı cihaza taşır ve sahnesinin yüklenmesini bekler, ardından 4°/sn hızında yavaş bir otomatik dönüş başlamadan önce beş saniyeyi cihazı açmaya, kamerayı alçaltmaya ve yakınlaştırmayı ayarlamaya harcar; döndürmek için sürükleyin, yakınlaştırmak için kaydırın; Rewind zaman çizelgesini kapalı fotoğrafa kadar geriye doğru oynatır.
- Beş anı — Round Island Light, Grönland buzları arasında kırmızı bir yelkenli, İzlanda’daki Kálfeyri kıyı evi, Santorini ve Osaka Kalesi — her biri bir fotoğraf ve depoyla birlikte gelen bir GLB sahnesi; görüntülemek için hiçbir API anahtarı gerekmez.
- Wallpaper Studio (?view=wallpaper), yüklenen bir görsel veya videodan iç ve dış ekran duvar kâğıtlarını değiştirir; tarayıcıda hızlı bir derinlik haritası hesaplar ve işaretçiyle yönlendirilen paralaks ile alan derinliği için onu küçük bir modelle inceltir; iki kaplama: Star White ve Night Sky; ses varsayılan olarak kapalıdır, açıldığında prosedürel kıyı gürültüsü ve özgün bir ambiyans akorudur; azaltılmış hareket ayarı sahne hareketini, otomatik dönüşü ve ataleti devre dışı bırakır.
Teknik inceleme
3D varlıklar · Beş anı sahnesi GLB’si ve Apple’ın modelinden yeniden kurulan katlanabilir cihaz
Beş anının her biri bir fotoğraf ve public/scenes altında saklanan bir GLB sahnesidir (lighthouse-memory-v2.glb yaklaşık 25 MB); çalışma zamanında fotoğrafın yalnızca üst yarısı kapak olarak kullanılır ve README, görüntülemek için Tripo API anahtarı gerekmediğini belirtir — anahtar yalnızca varlıklar üretilirken gerekir.
Katlanabilir cihaz Apple’ın resmi iPhone Duo USDZ dosyasından gelir: scripts/prepare-model.mjs, USDZ’yi geliştirme sayfasında yüklemek için Playwright’ı sürer, hareketli ve sabit yarıları folding-half / stationary-half olarak adlandırır, iç ve dış ekran malzemelerini değiştirilebilir beyaz yüzeylerle değiştirir ve GLTFExporter aracılığıyla ikili bir GLB dışa aktarır (dokular 512 ile sınırlı). Yalnızca metal çerçeve yeniden renklendirilebilir — ekranlar, cam, lensler ve menteşe ayrıntıları dokunulmazdır — ve THIRD_PARTY.md, Apple varlıklarını deponun MIT lisansının dışında tutar.
Fotoğraf yolculuğu · Tek bir GSAP ilerlemesi galeriyi, fiziksel fotoğrafı ve dış ekranı sürer
Dairesel galeri, React Bits’in OGL’den Three.js’e taşınan Circular Gallery bileşenidir: 100×50 alt bölümlü ağı, hıza bağlı sinüs tepe noktası salınımını ve yuvarlatılmış görüntü örneklemesini korur, ardından yayı derinlik ve yönelim içeren silindirik bir yola genişletir ve cihazla tek bir PerspectiveCamera paylaşır. GSAP Observer tekerlek, işaretçi ve dokunma girişleriyle sürükleme eşiğini yönetir; bir Timeline ise yolculuğu approach → receive-and-melt → settle olarak koreografiler; yeni giriş eski animasyonu keser ve sürükleme onu tersine örnekleyebilir.
Fotoğraf kuyruğu, fiziksel fotoğraf ağı ve gerçek dış ekran görüntüsü aynı ilerlemeyle sürülür ve ekran kenarında doku koordinatları eşleşir: dış ağ ekrana girdiği yerde kırpılır, ekran ise karşılık gelen görüntüyü tamamlar. Kapak geçişleri Morph Slider’ın Melt dalını kullanır (intensity 0.95 / scale 4.9 / aberration 0.35); uTime duvar saati yerine yolculuk ilerlemesiyle sürülür — geri sarmayı ve donmuş kareleri mümkün kılan da budur.
Ekran geçidi · Görünürlüğe yalnızca gerçekten hareket eden kapak karar verir
Sahne tamamen açılmış düzlem üzerinde kurgulanmış kalır ve hiçbir zaman kare başına yeniden inşa edilmez veya ölçeklenmez; ne kadar görüleceğine hareketli sol ekran ile sabit sağ ekran arasındaki açı karar verir — kapağı açmak önce sağ ekranın üzerindeki alanı serbest bırakır, sol yarı ise kapak dikeyi geçip düze yaklaştıkça ortaya çıkar. Kapağı sabit tutun, görüntü sabit kalır; geri sarma aynı hacmi geri izler. Kapağın sahneyle kesiştiği yerlerdeki geçici kesit yüzeyleri, uzamsal eleme ile gerçek ağ kesişimlerinden üçgenlenir, değişmeyen düzlemler için önbelleğe alınır ve yeniden kullanılabilir GPU arabellekleriyle çalışır, soluk buz veya nötr taş rengiyle doldurulur ve kapalı ile açık uç noktalarda gizlenir; teslim edilen ağların açık sınırları olduğu için stencil yaklaşımı reddedildi. Soldaki su yansıması eğik bir çift silüetten kaçınmak için yalnızca düze yakınken belirir.
16.09.2026 tarihli başlangıç optimizasyonu bu menteşe geometrisi kırpmasını bir module worker’a taşıdı: beş sahnenin her biri eskiden 1–1,6 sn eşzamanlı hazırlık alıyordu, şimdi ana iş parçacığı aktarılabilir arabellekleri geri yüklemek için yalnızca 8–29 ms harcıyor; yeni bağlanan sahneler render öncesi mevcut katlanma durumunu uygular, su yansıması kameraları telefon ve galeriyi değil yalnızca doğal sahneyi görür ve Wallpaper Studio’nun hazır ayarları ile yapay zekâ worker’ı yalnızca o görünüme girildiğinde yüklenir.
Wallpaper Studio · Tarayıcıda derinlik tahmini ve katlanmanın optiği
Yüklenen bir görsel önce hızlı bir derinlik haritası alır, ardından küçük bir model bunu inceltir (@huggingface/transformers depth.worker.js içinde çalışır; yapay zekâ worker’ı yalnızca gerçekten üret düğmesine basıldığında oluşturulur); ön plan ve arka plan derinlik farkına göre kaydırılır ve bulanıklaştırılır, böylece işaretçi hareket ettikçe görüntü gerçek bir derinlik kazanır. Beş hazır duvar kâğıdı 512×288 boyutunda önceden üretilmiş derinlik haritalarıyla gelir; video hazır ayarı ise poster karesininkini kullanır. İç ve dış ekran katmanları, JSON düzenlerinden ve 20 ayrı SVG simgesinden çalışma zamanında saydam GPU dokularına birleştirilir; böylece tek bir simgeyi değiştirmek asla tüm ekranı yeniden çizmek anlamına gelmez.
Katlanmanın kendisi parametrelerde yaşar: iç ve dış ekran için 3,5 ve 1,8 bulanıklık yarıçapı katsayıları, böylece kapak kapanırken önce dış ekran bulanıklaşır; menteşe %96’da tamamen katlanır ve son %4 ekranın odağa oturmasına bırakılır; parlaklık duruşla birlikte bir sinüs eğrisi boyunca kısılır, en karanlık nokta 90° civarındadır; yanal paralaks ise örneklemeden önce ekran tepe noktalarını “tamamen açılmış sanal bir düzleme” yansıtır, böylece geometri katlanırken duvar kâğıdı önünüzdeki düz bir cam levha üzerindeymiş gibi kayar ve hiçbir zaman yamuk şeklinde çarpılmaz.
