holodepth

Babylon.js · Motor & sahne

Asset loading: sahneye veri taşıyan boru hattı

Holodepth'te Three.js ve WebGL tarafında dosya formatları, glTF yapısı ve yükleyici (loader) çağrılarını sıkça "elle kurulan boru hattı" olarak anlattık. Babylon.js tarafında mesele aynı dosyaları okumak değil, motorun sahne yaşam döngüsüyle uyumlu, tekrar kullanılabilir bir yükleme disiplini kurmaktır: ne zaman beklenir, ne zaman sahne hazır sayılır, kullanıcıya hangi geri bildirim gösterilir.

Bu sayfa, format ansiklopedisi değildir; yüklemenin üretim akışındaki rolünü netleştirir. Three.js ile çakışmayı önlemek için mikro API ezberi yerine — sahneye veri bağlama, asenkron sözleşme ve hata yüzeyi — öne çıkarılır.

Özet: yükleme boru hattının dört sütunu

Sütun Pratik soru Babylon.js perspektifi
Kaynak Dosya URL'si veya paket içi yol güvenilir mi? Kök yol, CDN ve önbellek başlıkları üretimde tek kaynak gibi ele alınır.
Asenkron sözleşme Yükleme bitmeden sahne mantığı çalışmasın. Promise / async ile beklemek; hazır olma olayları ile kenetlenmek.
Sahne bağlama Gelen ağ ve materyaller nereye eklenir? SceneLoader ailesi; kök düğüm ve isimlendirme disiplini.
Deneyim Kullanıcı beklerken ne görür? İlerleme ve anlaşılır hata; boş sahne yerine kontrollü geri bildirim.

Yükleme neden motor çerçevesinde düşünülür?

Statik bir dosyayı indirmek ile onu grafik dünyasına bağlamak farklı işlerdir. İkincisi, dokuların GPU'ya hazırlanması, materyal önkurulumu ve sahne grafiğine eklenme sırasını içerir. Bu yüzden "indirildi" demek, çoğu zaman "kullanılabilir" demek değildir — özellikle büyük örgülerde ilk kareye kadar kısa bir süre daha vardır.

Bu klasörün önceki sayfalarıyla birlikte düşünün: motor döngüsü ( Motor yaşam döngüsü), sahne örgütü ( Sahne yönetimi), kare disiplini ( Render loop), bakış ( Kamera sistemi). Asset yükleme, bu zincirin veri giriş kapısıdır; yanlış zamanda veya yarış halinde yapılırsa takılma ve görünmez içerik gibi belirtiler üretir.

SceneLoader ve görev tabanlı yükleme

Babylon.js ekosisteminde sahneye dosya eklemenin yaygın yolu SceneLoader yardımcılarını kullanmaktır: tam sahne eklemek, yalnızca belirli örgüleri içeri almak veya içeriği mevcut sahneye eklemek ( append) gibi varyantlar üretim ihtiyacına göre seçilir. Bu çeşitlilik, Three.js'te sık görülen "tek bir GLTFLoader örneği kur" kalıbından farklı olarak, aynı format için farklı birleştirme stratejileri sunar — önemli olan doğru varyantı seçmektir.

İkinci yaygın araç katmanı, birden fazla dosyayı tek bir yönetilen kuyruk altında izlemektir (AssetsManager çevresinde düşünün). Çoklu model, doku ve yapılandırma dosyası olan bir ekranda kullanıcıya tek bir ilerleme çubuğu göstermek için bu soyutlama pratikte işe yarar. 

// Örnek: glTF / glb içeriği sahneye asenkron içe aktarma
// Kök URL ve dosya adı dağıtım yapınıza göre ayarlanır.

await BABYLON.SceneLoader.ImportMeshAsync(
  "",
  "https://example.com/assets/",
  "model.glb",
  scene
);

Üretim kodunda üzerine eklenecekler: kök yolu yapılandırma değişkeninden okuma, hata yakalama ve sahne hazır olduğunda devreye giren mantık — bunlar aşağıdaki bölümlerde özetlenir.

Asenkron disiplin: yarışlar ve hazır olma

Kullanıcı düğmeye bastıktan sonra hem ağ isteği hem sahne güncellemesi vardır; bu iki dünya arasında yarış durumları oluşabilir (örneğin sayfa değişti, istek geç döndü). Çözüm: yükleme kimliği veya iptal bayrağı ile "bu sonuç hâlâ geçerli mi?" sorusunu her adımda sormak. Küçük projelerde zahmetli görünür; büyüdükçe hayat kurtarır.

İkinci bir disiplin: içerik henüz yokken render döngüsünde eksik varsayımlarla mantık çalıştırmamak — örneğin henüz eklenmemiş bir köke bağlı fizik gövdesi oluşturmaya çalışmak. Ya yükleme tamamlanana kadar bekleyin ya da yer tutucu (placeholder) ile güvenli bir başlangıç durumu tanımlayın.

  • Tek sorumlu: yükleme başlatan katman ile sahneyi güncelleyen katmanın sözleşmesi net olsun.
  • İptal yolu: kullanıcı çıktıysa veya rota değiştiyse bekleyen işleri düşürmeyi ihmal etmeyin.
  • Hazır olma: sahne ve içerik için «ilk güvenli kare» tanımını takım içinde sabitleyin.

İlerleme ve kullanıcı yüzeyi

Teknik olarak yükleme sürebilir; kullanıcı için ise "sistem dondu" ile "yükleniyor" arasındaki fark ince çizgidir. Özel yapı: belirsiz ( indeterminate) durumda yüzde üretmek zorunda değilsiniz — aşama metni ( «ağ», «ayrıştırma», «sahneye bağlama»), dosya sayacı ( bilinen manifestte «3 / 12») veya hareketli ipucu ( ince animasyon) aynı güveni sağlar. Tahmini süre şaşsa bile «ne beklediğiniz» yazılı olmalıdır; sessiz bekleme, özellikle yavaş ağda terk oranını artırır.

Babylon.js tarafında görev tabanlı yükleyiciler, bu yüzeyi toplu iş kuyruğu ile eşlemek için uygundur: her görev tamamlanınca arayüzü güncellemek, tek devasa iş bitene kadar dondurmaktan iyidir. İptal ve yarış ( asenkron disiplin) ile birlikte düşünün — kullanıcı çıktığında ilerleme çubuğunun «tersine dönmemesi» için durum sıfırlama açıkça tanımlanmalıdır. Erişilebilirlik için ekran okuyucuya canlı bölge ( live region) ile aşama duyurusu; hareket hassasiyeti için abartılı animasyon yerine sade göstergeler tercih edilebilir.

Render döngüsü ile ilişki: ağır işi döngü içinde yapmayın ( iş bölümü); indirme, ayrıştırma ve büyük örgü oluşturmayı mümkün olduğunca ana kare dışına ( arka plan işi, parça parça teslim) itin; döngüye yalnız hazır paketler ( «bu kök artık sahneye eklenebilir») geri verin. Aksi halde kare süresi uzar; yükleme bitmiş olsa bile sahne «takılı» hissi verir.

  • Belirlenebilir: manifest veya dosya listesi varsa sayaç veya yüzde kullanın.
  • Belirsiz: yalnız aşama metni + iptal; yüzde uydurmayın.
  • Kare: ağır ayrıştırmayı döngü gövdesinden çıkarın; sonucu atomik uygulayın.

Hata yüzeyi ve geri dönüş stratejisi

Özel yapı: hataları tek torbada görmek teşhisi zorlaştırır. Taşıma katmanı ( zaman aşımı, HTTP durum kodu, CORS, yanlış veya eksik MIME) ile ayrıştırma katmanı ( bozuk glTF / önbellekten gelen yarım dosya) ve çalışma zamanı ( materyal, shader veya donanım sınırı) farklı kök nedenlerdir — kullanıcıya gösterilen mesaj ve geri dönüş ( yeniden dene, düşük çözünürlük, basit yer tutucu) buna göre ayrılmalıdır.

Üretimde amaç, konsolu tek başına bırakmak değil; yeniden deneme ( geçici ağ için sınırlı tekrar veya geri çekilme), degrade yedek ( düşük poli model, düz renk materyal) ve gerekiyorsa destek için korelasyon ( istek kimliği, varlık yolu, sürüm etiketi) sunmaktır. Geliştirme ortamında aynı olayı tek satırda bastırmak yerine yükleme katmanına yapılandırılmış günlük ( aşama, süre, sonuç kodu) ekleyin; üretimde tekrarlanan «gri ekran» genelde burada kaybolur.

  • Geçici: ağ / sunucu — yeniden dene, sonra kullanıcıyı bilgilendir.
  • Kalıcı: bozuk paket veya uyumsuz içerik — yedek varlık veya sürüm geri al.
  • Çalışma zamanı: GPU / shader — kalite düşür veya basit materyale düş.

Üretim: barındırma, önbellek ve sürüm

Özel yapı: aynı kod farklı ortamlarda farklı hız verir çünkü maliyet yalnız JavaScript değil — HTTP semantiği ( Cache-Control, ETag, immutable, stale-while-revalidate), CDN kenarındaki coğrafi gecikme ve sıkıştırma ( gzip / Brotli) aynı dosyayı farklı sürede indirir. Tarayıcı önbelleği ile kenar önbelleği ( edge) farklı «yaş» kuralları taşır; yükleme kodu doğru olsa bile kullanıcı eski varlığı görebilir — sorun sahne mantığında aranmamalıdır.

Sürümleme bu yüzden dosya içeriğiyle birlikte adresi değiştirir: dosya adına sürüm eklemek ( model.v2.glb) veya içerik özeti içeren sorgu paramı ( ?h=abc123) yaygın kalıplardır; yalnız «sunucuda dosyayı değiştirdim» yapmak, önbellekte kalan önceki baytları silmez. Üretimde dağıtımı atomik düşünün ( manifest veya sürüm klasörü): yarı yeni paket, yarı eski doku kombinasyonu sessiz bozulma üretir. Bu başlık Babylon'a özel değildir; fakat web'de 3D'nin maliyeti dosya boyutundan geldiği için dağıtım katmanı ihmal edilmemelidir.

  • Başlıklar: statik varlıklar için uzun ömür + içerik adresli sürüm birlikte tasarlanır.
  • CDN: kök bölge ile kullanıcı coğrafyası farkını ölçün; ilk bayt süresi özellikle mobilde kritiktir.
  • Yayın: aynı sürüm etiketiyle tüm bağımlı dosyaları birlikte taşıyın; parça parça güncelleme risklidir.

Three.js ile üst üste okuma

Çakışmayı önleyen çerçeve

Three.js tarafında Holodepth sıklıkla yükleyici + manuel sahne kurulumu öğretir; bu temel ve gereklidir. Babylon.js tarafında ise aynı dosyalar için motor, sahneye birleştirme ve görev kuyruğu gibi soyutlamalarla üretim hızını artırır. İki anlatım çelişmez: biri taşları tek tek koymayı, diğeri taş döşenen bir çatıyı anlatır.

Engine & sahne hattında sıradaki başlık

Varlık akışı netleştikten sonra görüntüleme modeli ve aktif kamera disiplini için Kamera sistemi sayfasına geçebilirsiniz. Önceki adım: Skeleton animation.