Yazar: Theodore
Canlı deneyin Bu proje hakkında
Altı panel, sahnenin içindeki gerçek WebGL geometrisidir — kalınlıkları ve eğrilikleri vardır, karakteri örter ve karakter tarafından örtülürler; derinlik sıraları her açıdan doğru kalır. Bunlar canvas üzerinde yüzen DOM kartları değildir.
Tüm etkileşim tek bir görev paylaşımına dayanır: 3D keşif, 2D ise kontrol içindir. Paneller gezinme ve seçimi üstlenir; karakterin etrafında süzülür ve hareketlerinizle döner. Asıl oynatma kontrolü, alttaki ekran uzayına sabit arayüze aittir. Bir şarkı seçmek durum değişikliği değil, kesintisiz bir devir teslimdir — panelin kendisi aşağı uçarak oynatıcıya dönüşür; başka bir parça seçildiğinde eski panel özgün 3D yuvasına geri uçar.
Öne çıkanlar
- Boş alanı sürüklediğinizde müzik kartları karakterin etrafında döner ve bırakılınca ataletle hareket etmeyi sürdürür; karakteri sürüklediğinizde ise kamera ve paneller etkilenmeden yalnızca karakter döner. İki taraf da zıt yönlerde yavaşça süzülür — kümeyi bir arka plan yerine yörüngedeki bir cisim gibi gösteren şey bu karşıt harekettir
- Bir panele tıklandığında 3D alandan kopar, karakterin önünden süzülür ve altta yatay bir oynatıcıya açılır; başka bir panel seçildiğinde aynı anda iki panel havadadır — eskisi tam olarak özgün yuvasına katlanırken yenisi öne gelir
- Fare tekerleği kamerayı 4.6 ile 16 dünya birimi arasında dolly eder: yaklaştığınızda ön plandaki paneller kadrajın dışına taşar, uzaklaştığınızda tüm alan yukarıdan görülen tek bir müzik takımyıldızında toplanır
- Özel imlecin dört köşeli çerçevesi, her panelin gerçek projeksiyon quad'ına kilitlenir — köşeli ayraçlar gerçek perspektif köşelerine oturur ve panelin eğimiyle birlikte döner
Teknik inceleme
3D varlıklar · Dokunulmamış Tripo dışa aktarımı
Artist.glb tam olarak Tripo'dan dışa aktarıldığı hâliyle sunulur: 59 MB, 1.02M köşe, 8192² taban renk haritası — sadeleştirme yok, yeniden boyutlandırma yok, oluşturulan tüm ayrıntılar korunur. Bunun bedeli hesaba katılmıştır (mipmap sonrasında ~350 MB VRAM, her frame yeniden çizilen bir milyon köşe) ve iki karar maliyeti yönetilebilir tutar: ağır mesh raycasting dışında bırakılır — her işaretçi hareketinde bir milyon üçgen ana thread'i durdururdu — ve onun yerine modelin kendi sınırlarından boyutlandırılan görünmez bir kapsül kullanılır; dışa aktarımda animasyon klibi olmadığından, uydurma bir iskelet yerine karaktere grup düzeyinde idle hareketi (yavaş bir salınım ve bir milimetrelik nefes) verilir.
scripts/ içindeki bir meshopt pipeline'ı aynı dosyayı 2.9 MB'a indirir; model yükleme sırasında ölçülüp normalize edildiği için build'leri değiştirmek kod değişikliği gerektirmez.
Materyaller · Tripo dışa aktarımlarındaki hacim materyalini sadeleştirme
Tripo dışa aktarımları mesh'i KHR_materials_volume ile işaretler; bu, three.js tarafında bu sahnenin ne istediği ne de maliyetini karşılayabileceği bir transmission/thickness yoluna sahip MeshPhysicalMaterial olarak karşılık bulur. Yükleme sırasında her materyal, tam PBR map seti korunarak MeshStandardMaterial'a düşürülür — aynı görünüm, maliyet ortadan kalkar.
Özel ShaderMaterial'lar colorspace_fragment bölümünü açıkça içerir: aksi hâlde doğrusal değerleri doğrudan sRGB framebuffer'a yazar ve neredeyse siyah render edilirler.
Müzik panelleri · Eğri üzerinde gerçek geometri
Her panel dört tür geometriden oluşur — bir ön yüz, gerçek kalınlık için süpürülmüş bir kenar şeridi, yarı saydam bir arka plaka ve görünmez hit quad'ları — hepsi cache'lenmiş tek bir buffer setini paylaşır; kartlar arasında yalnızca grup transform'u değişir. Her şey düz olarak oluşturulup büyük bir dikey silindirin üzerine sarılır: ilerleme oluğu ve saat, ona child olarak bağlanmak yerine aynı eğriye bake edilir; ilerleme dolgusu ise MeshBasicMaterial içine enjekte edilen bir UV cutoff'tur — bir mesh'i scale etmek uzak ucunu eğriden kaldırırdı.
Panel görselleri güncellenme sıklığına göre üç canvas'a ayrılır: 1320×680 yüz bir kez çizilir, zaman şeridi gösterilen saniye değiştiğinde, ikon ise yalnızca oynatma durumu değiştiğinde yeniden çizilir — render loop içinde pahalı hiçbir işlem yoktur. Altı şeffaf panelin tamamı depth write'ı atlar ve her frame kamera mesafesine göre bantlanmış renderOrder alır; böylece occlusion her açıdan doğru kalır.
3D'den 2D'ye geçiş · Bir kart oynatıcı olarak yerine oturuyor
Bir WebGL mesh'i DOM düğümüne dönüşemez; bu yüzden süreklilik üç olgu üzerinden kurulur: bir yansıtıcı, gizli olanlar da dâhil her kartın ekran uzayındaki kutusunu her frame güncel tutar — çünkü dönüş uçuşunun ineceği bir yere ihtiyacı vardır; DOM panelinin ilk frame'i, kartın WebGL dokusu için hâlihazırda çizilmiş canvas bitmap'inin ta kendisidir, hiçbir zaman tam hizalanmayacak bir HTML yeniden üretimi değil; kart da aynı frame'de gizlenir — aynı yerde iki öğe, biri görünmez.
Genişleme, uçuşun ~35% kadarı tamamlanana kadar bekler — 2:1 oranındaki bir kartı uçuşun ortasında 11:1 bir çubuğa germek görseli çamura çevirir — ve iz, yana doğru kavislenen ikinci dereceden bir Bézier eğrisidir; böylece sol üstten yanaşan kart sanatçının çevresinden süzülür. Hedef her frame yeniden okunur: takımyıldız hâlâ sürüklenmektedir ve kalkışta örneklenen bir rect, paneli kartının yanına indirirdi.
