Yazar: Theodore
Canlı deneyin Bu proje hakkında
ANOMALY, her biri çalışmaması gerekiyormuş gibi görünen bir yapı etrafında kurgulanan on altı gerçek hayvanın arşividir: fıçı gözlü balığın kafatası üzerindeki içi sıvı dolu şeffaf kubbe, mantis karidesinin kavitasyon balonlu darbesi, okyanus güneş balığının eksik kuyruk yüzgeci. A-001'den A-016'ya kadar her kayıtta sürüklenebilen, yakınlaştırılabilen ve sıfırlanabilen ayrı bir Tripo modeli bulunur.
Koleksiyon taksonomiye göre değil, anomalinin kendisine göre —şeffaflık, görüş, biyolüminesans, kamuflaj, avlanma, devleşme ve vücut planı ile bunlardan bağımsız bir derin deniz kesiti— dosyalanır ve bir örnek aynı anda birden fazla kategoriye girebilir: fıçı gözlü balığın kubbesi ile dönebilen boru biçimli gözleri, aynı hayvandaki iki ayrı anomalidir. Bu nedenle her kayıt tür adı yerine anatomik yapıyla açılır. Her şey tek ekrana sabitlenmiştir: bir kategori, karusel kartı veya arama sonucu seçildiğinde içerik yerinde değişir; arşiv plakası, gözlemler ve katlanabilir saha notu solda, 3D sahne ortada, tür verileri ile dağılım haritası sağda kalır.
Öne çıkanlar
- Alttaki şeritten on altı kayıttan birini, 01–16, seçin; sahne ile her iki yan panelin içeriği yerinde değişir. Döndürmek için sürükleyin, yakınlaştırmak için kaydırın; her geçiş kamerayı sıfırladığı için on altı örneğin tamamı karşılaştırılabilir bir boyutta sunulur
- Arşiv plakasına tıklayın; kendi küçük resminden çıkarak arkadan aydınlatmalı bir görüntüleme kutusuna dönüşür — hale, plakanın kenarından sızan ışıktır; 3.2× seviyesine kadar büyütün ve kaydırmak için sürükleyin
- Anomalinin kendisine göre filtreleyin —şeffaflık, görüş, biyolüminesans, kamuflaj, avlanma, devleşme ve vücut planı—, ayrıca habitatla eşleştirilen ve bunlardan bağımsız bir derin deniz kesiti kullanın; bir örnek aynı anda birden fazla kategoriye girebilir ve arama tür adlarını, Latince adları, yapıları ve örnek kimliklerini kapsar
- Bir model indirilirken GSAP, bir kumpas cetveli boyunca ilerlerken örneğin ölçülmüş çizgi plakasını vuruş vuruş çizer — teknik çizim gövdeden önce gelir, ardından 3D yapıya cross-fade ile dönüşür; cache'lenmiş bir model bile plakayı 1.5 saniye boyunca tutar, böylece hiçbir zaman okunamadan bir an parlayıp geçmez
Teknik inceleme
3D varlıklar · Tripo high-poly modellerini web'e taşımak
On altı örnek modeli Tripo ile oluşturulur; özgünlerin her biri ~60 MB ve ~1.9M üçgendir — yayına verilemeyecek heykel kalitesinde bir yoğunluk. Bir gltf-transform meshopt pipeline'ı geometriyi 2.4–11 MB'a indirir: geometri kaynaklanır, 0.0002 hata toleransıyla sadeleştirilir, budanır ve meshopt ile sıkıştırılır. Texture'lar downsampling uygulanmak yerine bilerek 4K'da tutulur — downsampling çok az tasarruf sağlıyor ve yumuşaklığın ana nedeni oluyordu —, 8K olarak teslim edilen her şey ise 4K'ya indirilerek taban renk haritası başına VRAM'i yaklaşık 358 MB'tan 89 MB'a düşürür; ekrandaki boyutta görünür kayıp olmaz.
Her örnek bağımsız bir fallback zinciri izler: GLB → sabit görsel → cutout → elle hazırlanmış çizgi plakası; plaka eksik olsa bile arkasında bir çizim ızgarası bulunur, böylece eksik hiçbir dosya sahneyi boş bırakamaz.
Örnek sahnesi · Otomatik kadrajlama ve context koruması
On altı model ortak bir kurala göre üretilmemiştir ve hiçbirine elle transform uygulanmaz: her biri yükleme sırasında kendi kök matrisine göre ölçülür — dünya uzayında ölçüm yapmak önceden uygulanmış ölçeği geri okur ve modeli her yeniden ölçümde küçültür. Ölçümde ham bir Box3 yerine yüzdelik dilim sınırları kullanılır: bu hayvanların bazılarındaki anten ve filamentler köşelerin çok küçük bir bölümünü taşısa da kutuyu belirleyip gövdeyi küçültürdü; uç değerlerin kırpılması kutunun hayvanın kütlesini sarmasını sağlar, böylece on altı örneğin tümü karşılaştırılabilir bir görsel ağırlıkta sunulur. Otomatik sığdırma en uzun yatay ekseni ekran boyunca çevirir, ortalar ve canvas'ı doldurur — kataloğa eklenen yeni bir örnek kendini otomatik olarak kadraja alır; en fazla örneğe özel küçük bir ayar gerekir (midye bir kapaktır, profil değil).
Canvas örneğe göre key'lenmez; aksi hâlde her geçişte WebGL context'i sökülüp yeniden kurulurdu ve tarayıcılar en eski aktif context'i düşürür. Yalnızca iç Scene key'lenir. primitive ayrıca dispose={null} gerektirir — drei'ın GLTF cache'i klonlar arasında geometri paylaşır ve unmount sırasında R3F'nin dispose yapmasına izin vermek, hâlâ kullanılan buffer'ları yok eder.
Aydınlatma · Reprodüksiyon sehpası değil, vitrin gibi aydınlatılmış
Bir ana modelleme ışığı, arkadan sıyıran iki kenar ışığı ve zeminden hiç yansıma yok — bu hayvanların çoğu koyu renklidir ve koyu bir gövdeyi koyu bir zeminden ayıran şey kenardır; kenar ışıklarının bütün görevi de budur. Environment map, sahnenin içindeki alan ışıklarından yerinde bake edilir (Environment, key'lenmiş Scene'in dışında durduğu için örnek değiştirmek onu hiçbir zaman yeniden bake etmez); HDRI indirmesi ve harici istek yoktur.
Yalnızca yeniden aydınlatmak en koyu örnekleri ayırmaya yetmedi — koyu kızıl-kahverengi bir kalamar ile sıcak kahverengi zemin ton değeri bakımından gerçekten birbirine yakındır —, bu yüzden örnek yumuşak bir ışık havuzunda durur ve temas gölgesi bu havuzun içine işleyerek silüeti açar. Tone mapping, orta tonları sert biçimde aşağı çeken varsayılan ACES yerine 1.34 pozlama ile Khronos PBR Neutral kullanır — bu örnekleri görünmez kılan tam da buydu.
Yükleme · Yalan söylemeyi reddeden bir ilerleme durumu
drei'ın useProgress'i dosyaları sayar, byte'ları değil: kendi kendine yeterli bir GLB tek öğedir; bu nedenle çubuk tüm indirme boyunca sıfırda kalıp sonunda yüzde yüze sıçrar — sayı yalandır. Bu yüzden loader yüzde göstermez: DrawSVGPlugin, bir kumpas cetveli boyunca ilerlerken örneğin ölçülmüş çizgi plakasını vuruş vuruş çizer; ne kadar kaldığını biliyormuş gibi yapmadan yalnızca işin sürdüğünü belirtir.
Model hazır olduğunda plaka cross-fade ile 3D yapıya dönüşür; cache'lenmiş bir model bile plakayı en az 1.5 saniye boyunca tutar, aksi hâlde okunamadan bir an parlayıp geçerdi. prefers-reduced-motion altında dekoratif animasyon durur ve minimum gösterim süresi kaldırılır — hareketi azaltmak işlevi değil hareketi kaldırmalı ve asla bekleme eklememelidir.
