holodepth

Babylon.js · Motor & sahne

Motor ve kullanım ömrü: Babylon.js'te yaşam döngüsü

Web'de 3D göstermek, yalnızca bir sahne grafiği kurmak değildir; tarayıcıda bir grafik bağlamı açılır, her karede GPU işi planlanır ve uygulama kapanırken kaynaklar geri verilir. Babylon.js'te bu işin merkezinde Engine (motor) durur: canvas ile WebGL veya WebGPU dünyasını yönetir, sahneyi kare kare ilerletir ve ömrün başından sonuna kadar tutarlı davranış sağlar.

Bu sayfada "motor" ve "kullanım ömrü" terimlerini Three.js'teki renderer + elle yazılmış döngü ezberinden ayırarak okuyacağız: Babylon.js tarafında yaşam döngüsü, engine-first bir deneyim olarak kurgulanır — yani çoğu projede akış, motorun sunduğu çerçeve içinde tanımlanır.

Özet: motor ömrünün ana hatları

Aşama Pratikte ne ifade eder? Babylon.js tarafında tipik karşılık
Başlatma Çizim yüzeyi (canvas) ve grafik API bağlantısı kurulur. Engine oluşturma; sahne genelde Scene(engine) ile motora bağlanır.
Çalışma Her görüntülenen karede sahne güncellenir ve GPU'ya gönderilir. engine.runRenderLoop içinde scene.render() (veya eşdeğeri).
Uyarlama Pencere, çözünürlük veya sekmeye göre motor yeniden ölçeklenir veya duraklar. engine.resize(), görünürlük / odak olaylarıyla döngü kontrolü.
Kapanış WebGL kaynakları ve dinleyiciler serbest bırakılır; sızıntı riski azaltılır. scene.dispose(), engine.dispose() sırası ve bağlı nesneler.

Motor (Engine) nedir?

Babylon.js'te motor, soyut bir "işlem çipi" metaforundan çok, canvas ömrünün yöneticisi olarak düşünülmelidir. Üzerinde şunlar toplanır: hangi grafik arka ucunun (çoğu projede WebGL, isteğe bağlı WebGPU) kullanılacağı, çizim yüzeyinin fiziksel boyutu ile dahili render hedefleri arasındaki ilişki, donanım ölçeklemesi (pixel ratio) ve her karede sahneyi ilerletme sorumluluğu.

Sahne (Scene) ise motorun "ürettiği dünya"dır: ışık, kamera, mesh ve sistemler burada yaşar; motor ise bu dünyayı ne sıklıkta ve hangi bağlamda ekrana dökeceğini organize eder. Bu ayrım, Three.js'te sık gördüğünüz sahne + renderer ikilisine benzer; fakat Babylon.js'te döngü ve bağlam yaşamı çoğu zaman Engine API'sinin etrafında toplanır.

Yaşam döngüsü: başlangıçtan kapanışa

Başlatma ve bağlantı

Yaşam döngüsünün ilk adımı, kullanıcı arayüzündeki bir <canvas> öğesinin motora verilmesidir. Motor oluşturulduğunda tarayıcıda bir grafik bağlamı talep edilir; bu adım başarısız olursa (örneğin WebGL'in devre dışı olduğu ortamlar) uygulamanızın bunu kullanıcıya anlaşılır biçimde raporlaması gerekir — yaşam döngüsü burada hiç başlamamış olur.

Ardından Scene genellikle aynı motor örneğiyle kurulur; böylece sahne, hangi grafik bağlamına "ait" olduğunu bilir ve render yolu tutarlı kalır. Bu ilişki, projede birden fazla motor veya sahne kullanırken özellikle kritiktir: her kombinasyonun kendi ömrü ve dispose sırası vardır.

Çalışma: render döngüsünün motor üzerinden tanımı

İkinci ve en uzun aşama, motorun render döngüsünü işletmesidir. runRenderLoop, her karede çağrılacak bir geri çağrı alır; tipik kullanımda bu geri çağrının görevi sahneyi çizmektir ( scene.render()). Böylece "kare üretimi" tek bir yerde toplanır: ya animasyon mantığınızı bu döngünün içinde ilerletirsiniz ya da motorun işaret ettiği zaman örneklemesine uyumlu başka sistemleri (fizik, ağ, ses) senkronize edersiniz.

Bu yapı, Three.js'te yaygın olan "requestAnimationFrame içinde renderer.render" kalıbının üzerine motor tarafından soyutlanmış bir alternatiftir: bağlam yeniden çizimi, bazı koruma ve optimizasyon noktaları ile motorun sorumluluğunda kalır; siz sahne mantığına odaklanırsınız.

Uyarlama: yeniden boyutlandırma ve duraklatma

Ömür boyunca pencere yeniden boyutlanır, cihaz döner veya kullanıcı başka sekmeye geçer. Motor düzeyinde bunların karşılığı: çözünürlük ve görünür alanın güncellenmesi ( engine.resize()), gerektiğinde döngünün durdurulması veya düşük güç senaryolarında kare hızını bilinçli biçimde sınırlamak. Yaşam döngüsü burada "sürekli çiz" yerine "doğru zamanda çiz" haline gelir; özellikle mobil ve dizüstü pil tüketimi için bu ayrım pratikte anlam kazanır.

Kapanış: dispose ve güvenli sonlandırma

Son aşama, sayfa kapatılırken veya 3D görünümü tamamen devreden çıkarırken motorun ve sahnenin dispose edilmesidir. GPU tamponları, shader programları ve sahneye bağlı nesne ağaçları uygun sırayla serbest bırakılmazsa bellek ve bağlam sızıntıları oluşabilir. Çok sayfalı (SPA) uygulamalarda kullanıcı sahne değiştirdiğinde bu adım atlanırsa performans zamanla düşer — yaşam döngüsü teknik olarak bitmiş olsa da kaynaklar yaşamaya devam eder.

Three.js ile çakışmadan düşünmek

Three.js tarafında sıkça öğrettiğimiz şey: sahne + kamera + renderer üçlüsünü kurup döngüyü siz yazarsınız. Babylon.js'te vurgu, motorun yaşam döngüsü çerçevesinde aynı işi kalıplaştırmasıdır — tekrarlayan kurulum kodunu azaltmak için değil, "grafik bağlamı ve kare üretimi" sorumluluğunu net bir omurgada toplamak için. İki dünyada da GPU sonuçta çizer; fakat Babylon.js'i burada alternatif bir mini API değil, motor deneyimi olarak konumlandırmak bu sayfanın ana mesajıdır.

runRenderLoop ve sahne üretimi

Yaşam döngüsünün kalbi, motorun her animasyon karesinde çağırdığı geri çağrıdır. Bu geri çağrı içinde tipik olarak animasyon güncellemeleri, giriş okuması veya minimal mantık çalıştırılır; ardından sahne bir karelik görüntüye dönüştürülür. Çoklu sahne senaryolarında aynı döngüde hangi sahnenin aktif olduğu veya özel bir kamera geçişinin nasıl yönetileceği uygulama kararıdır — motor ise çerçeveyi sağlar.

Önemli bir tasarım ilkesi: döngü gövdesini gereksiz yere ağırlaştırmayın. Ağır işleri CPU'da her kareye yığmak yerine; zamanlamayı sabitleyen, sonuçları ara tamponlarda tutan ve sahneye yalnız son halini yansıtan bir yapı yaşam döngüsünü sürdürülebilir tutar. Bir sonraki Holodepth sayfasında render döngüsünü yalnızca "çiz" değil, bütçe ve öncelik olarak ele alacağız: Render loop. 

// Tipik omurga: motor → sahne → kare başına render
// (Projenizde BABYLON içeri aktarımı ortamınıza göre değişir.)

const canvas = document.getElementById("renderCanvas");
const engine = new BABYLON.Engine(canvas, true);
const scene = new BABYLON.Scene(engine);

engine.runRenderLoop(() => {
  scene.render();
});

window.addEventListener("resize", () => {
  engine.resize();
});

Üretim kodunda hata ayıklama, telemetri veya özel senkronizasyon için döngü gövdesini genişletirsiniz; fakat yaşam döngüsü sözleşmesi değişmez: motor çalışırken sahne düzenli olarak ilerletilir, durdurulduğunda ise GPU işi durur.

Dispose sırası ve ömür sonu disiplini

Kapanışta izlenecek empatik kural: önce sahnenin ve ona bağlı içeriklerin yaşamını bitirin, sonra motoru durdurun ve bağlamı serbest bırakın. Sahne ağacındaki materyaller, geometriler ve dokular tek tek ya da toplu dispose gerektirebilir; motor ise bağlam düzeyindeki kaynakları temizler. Yanlış sıra veya eksik dispose, özellikle çoklu giriş-çıkış yapılan ön yüzlerde belirsiz çöküşler ve kare düşüşleri olarak geri döner.

Route değişimi veya bileşen unmount senaryolarında yaşam döngüsünü her zaman simetrik kurun: oluşturduğunuz Engine için mutlaka bir kapanış yolu tanımlayın; yalnızca sahneyi gizlemek GPU maliyetini ortadan kaldırmaz.

  • Döngüyü durdurun: mümkünse render döngüsünün çalışmadığı bir anda dispose edin.
  • Sahneyi temizleyin: kullanıcı tanımlı dinleyiciler ve sahne özel nesneleri.
  • Motoru serbest bırakın: canvas başka amaçla kullanılacaksa bile bağlamın kapandığından emin olun.

Bu klasörde sıradaki başlıklar

Motor yaşam döngüsü netleştikten sonra kare bütçesi ve scene.render() sözleşmesi için Render loop sayfasına geçebilirsiniz. Önceki adım: Kamera sistemi.