Babylon.js · Mesh & materyal
Material pipeline: içerikten shader yoluna üretim zinciri
«Pipeline» kelimesi web grafikte sık iki anlama gelir: biri tam sahne son işleme (post-process, parlama, ton eşleme), diğeri materyalin kendi gölgelendirme yolu — hangi veriyi hangi formülle noktaya uyguladığınız. Bu sayfa ikincisini merkeze alır: Babylon.js motoru içinde örgüye materyal bağlamaktan, shader varyantına ve çizim sırasına kadar uzanan zinciri.
Holodepth Three.js tarafında render tree ve efekt zinciri ayrı başlıklarda işlenir; burada çakışmayı önlemek için mikro API ezberi yerine üretim kararları ve motorun sunduğu özel yapılar (şeffaflık sırası, gruplama) öne çıkar.
Özet: zincirin dört halkası
| Halka | Soru | Pratik karşılık |
|---|---|---|
| Atama | Bu örgü hangi materyal sınıfını kullanıyor? | PBR, standart, node — esneklik merdiveni. |
| Derleme | Hangi shader programı seçildi? | Materyal türü + özellik bayrakları (ör. normal haritası var mı). |
| Sıra | Şeffaf nesneler birbirini nasıl örtüyor? | Çizim sırası, derinlik yazımı, rendering group. |
| Maliyet | Karede kaç kez «materyal değişti»? | Geçiş sayısı ve toplu çizim (batch) baskısı. |
Bu sayfada «pipeline» neyi kapsıyor?
Dosyadan gelen örgü → sahneye eklenen mesh → üzerine bağlanan materyal → seçilen shader yolu, üretimde tek bir ürünün «görünür olma» yoludur. Bu zincirin kopması «model yok» kadar sık değildir; çoğu zaman yanlış materyal sınıfı, eksik doku bağlantısı veya şeffaflık sırası ile kendini gösterir.
Önceki sayfalar bu halkanın parçalarını verir: Mesh builder, PBR materyal, Node material, Texture sistemi. Burada parçaları aynı hat üzerinde birleştiriyoruz.
Materyal türleri: esneklik merdiveni
Motor, her üçgen için «tek bir evrensel formül» çalıştırmaz; materyal sınıfınız hangi kod yolunun seçileceğini belirler. Hazır fiziksel yüzey ( PBR), daha basit aydınlatma modelleri veya düğüm grafiği ( node) farklı shader üretir. Özel yapı: aynı görsel hedef için birden fazla yol vardır — «hepsi node olsun» her zaman en iyi bakım maliyeti değildir ( Node · ne zaman?).
- Düşük sürtünme: sahne büyük ölçüde PBR ve paylaşılan dokular.
- Orta: özelleştirilmiş karışım ve maskeler → node veya eklenti düzeyi.
- Yüksek kontrol: tamamen özel yüzey matematiği → node grafik veya düşük seviye müdahale.
Şeffaflık: derinlik yazımı ve çizim sırası
Opak yüzeylerde derinlik tamponu (Z-buffer) çoğu zaman sezgiseldir: yakın olan önde görünür. Yarı saydam karışımda (alpha blending) işler karmaşıklaşır: önce çizilen renk, sonra üstüne karışan ikinci katman — sıra önemlidir. Bu yüzden «neden cam arkası yanlış» sorusunun cevabı sıklıkla materyal parametresi değil çizim sırasıdır.
İkinci özel yapı: şeffaf materyalde derinlik tamponuna yazıp yazmama ( depth write) seçimi. Yanlış kombinasyon UZAK nesneyi YAKIN sanmayı veya iç içe cam katmanlarında patlamayı doğurur. Tasarım gereği şeffaf nesneleri azaltmak veya sırayı kontrollü tutmak üretim gerçekliğidir.
Babylon.js pratiği: rendering group
Motor, mesh'leri çizim grubu ( rendering group) ile ayrılabilir; opak ve şeffaf kümeleri ayırmak için kullanılır. Grup numarası yüksek olanlar sonra çizilir gibi basit kurallar, sahne düzenini öngörülebilir kılar — tek tek «şu mesh önce» demekten daha sürdürülebilir.
Ön geçiş ve derinlik disiplini (kısa bakış)
Bazı efekt ve kalite ayarları için motor, tam renk öncesi derinlik veya yardımcı tampon üretir. Bu, tam sahne post efektinden farklıdır: amaç çoğu zaman belirli materyal özelliklerini doğru birleştirmek veya sonradan yeniden aydınlatma için veri hazırlamaktır. Ön geçiş, çoğu zaman aynı kare içinde, belirli mesh kümesi veya tampon hedefi için çalışır; ekranı sonradan «güzelleştiren» tam ekran zincirden ( bir sonraki bölüm) ayrı düşünün.
Detay sürüme ve özellik bayraklarına bağlıdır; üretimde mesele, «neden bu kombinasyonla X artefaktı çıkıyor?» sorusuna hangi ara tamponun açık olduğunu bilerek yaklaşmaktır. Örneğin yarı saydam yüzey + ön derinlik yazımı + belirli gölge modu aynı anda açıldığında, beklenmedik örtüşme sıklıkla tek bir materyal hatası değil, tampon sözleşmesinin ihlalidir — kökü şeffaflık ve sıra disiplinine dayanır.
Hata ayıklama pratiği: önce ilgili özellikleri tek tek kapatıp hangi ara geçişin artefaktı taşıdığını bulun; sonra motor sürüm notlarıyla eşleştirin. Bu sayfa Babylon bayrak sözlüğü vermez; yalnız hangi sınıf sorunun (ön geçiş mi, kare sonrası mı, sıra mı) olduğunu sabitler.
- Ön geçiş: genelde veri hazırlığı; maliyet ekler, amaç doğru birleştirme veya sonraki geçişe girdi sağlamak.
- Post: genelde tam ekran; yüzey normalinizi «düzeltmez», kare sonucunu işler.
- Kare bütünlüğü: güncelleme ve çizim yükünün ayrımı Render loop · iş bölümü ile uyumlu düşünülür — döngüde ne zaman hesaplanıp ne zaman çizildiğini unutmayın.
Post-process: aynı pipeline değil
Tam ekran bulanıklık, renk düzeltmesi veya parlama genelde kare tamamlandıktan sonra uygulanır; materyalin kendi gölgelendirme adımının içinde değildir. İkisini karıştırmak hata ayıklamayı zorlaştırır: önce yüzey doğru mu, sonra ekran düzeltmesi mi sorunu üretiyor netleştirin. Post zinciri açıkken «metal yanlış» hissi, bazen ortam ve ton eksikliği değil, ton eşlemesi + bloom üst üste bindiği içindir — yüzeyi düzeltmeden postu kapatmak teşhisi ayırır.
Çok geçişli post yığınlarında sıra önemlidir: önce HDR hedefinde mi işleniyor, sonra LDR'ye mi iniliyor, en sonda ekran uzayında mı oynanıyor? Yanlış sıra, kenar parlaması veya soluk UI üst üste bindirme gibi «motor hatası» sanılan sonuçlar üretir. Bu sayfa belirli bir post paketini öğretmez; kare içi vs kare sonrası sınırını sabitler.
Teşhis sırası
- Post tamamen kapalı — yüzey ve ışık doğru mu?
- Yalnız renk düzeltmesi — ton doğru mu?
- Derinlik / maske isteyen efektler — önceki bölümdeki ara tamponlarla uyumlu mu?
Bu sırayı bozmak, doğru ayarı yanlış yerde aratmaktır.
Performans: materyal geçişleri
Donanım verimliliği çoğu zaman «kaç üçgen»den çok «aynı ayarlarla kaç çizim» ile ilgilidir. Binlerce küçük mesh'e binlerce farklı materyal atanması, bin tek materyalli örgüye göre daha pahalı olabilir. Üretim boru hattında materyal varyantlarını bilinçli sınırlamak ( ortak doku atlası, paylaşılan parametreler) sürdürülebilirlik getirir. Geçiş maliyeti yalnız «farklı shader» ile sınırlı değildir: aynı programda kalsanız bile doku kümesi veya blend modu her seferinde değişiyorsa sürümler farklı kümeler oluşturur.
Pratik üretim kuralı: önce varyant sözlüğünü sayın (benzersiz materyal + anahtar parametreler); sonra sanat ekibine «bu sınırı aşmayın» diye yazılı bütçe verin. Doku tarafında adresleme ve mip disiplini Texture sistemi ile birlikte okunur — bu bölüm atlas matematiğini tekrar etmez.
Instancing veya toplu çizim kısayolları geçiş sayısını düşürür; fakat her örnek farklı materyal taşıyorsa kazanç sınırlanır. «Performans için instance» demeden önce aynı materyal örneği paylaşımını doğrulayın.
- Kümele: opak / maskeli / tam şeffaf ayrımı çizim sırasıyla birlikte düşünün (Şeffaflık).
- Azalt: küçük renk farkları için ayrı dosya yerine materyal üzerinde uniform / varyant anahtarı.
- Ölç: tek sahne değişkeniyle geçiş sayısını düşürmek mümkün mü — yoksa içerik planını revize edin.
Three.js ile üst üste okuma
«Üst üste okuma» burada API eşlemesi değildir. Three.js öğretisinde
EffectComposer, ShaderMaterial ve sahne ışığı aynı
örnekte yan yana durabilir; zihin modeli birleşik kalır. Babylon.js tarafında ise motor,
sık kullanılan parçaları ürünleştirilmiş modüller olarak ayırır — fakat
GPU hâlâ önce geometri ve yüzey, sonra tampon hedefleri, en sonda
ekran düzeltmeleri sırasını yürütür.
Çakışmayı önleyen çerçeve
Three.js öğrenirken materyaller ve son işleme bazen aynı örnek dosyada birleşir; Holodepth bunları bilinçle ayırır. Babylon.js tarafında motor, materyal sistemini ve isteğe bağlı tam sahne boru hatlarını ürünleştirilmiş parçalar olarak sunar — yine de kavramsal sınır aynıdır: yüzey hesabı ile kare sonrası düzeltme farklı aşamalardır.
Aynı Holodepth haritasında Node materyal · Three kutusu özel gölgelendirme yüzeyini anlatır; bu sayfa ise boru hattı sırası ve tampon sınırlarıni sabitler — ikisini birbirinin yerine okumayın.
- Önce yüzey: PBR ve doku / ortam doğrulaması; post yalnız ince ayar değildir, bazen hatayı maskeler.
- İsim avı yapmayın: Three ve Babylon aynı efekti farklı paket adlarıyla sunabilir; davranışı motor dokümanıyla eşleyin.
- Üç soru: kare içi mi, ön geçiş mi, kare sonrası mı? — cevap hata sınıfını seçtirir.
Mesh & materyal: sıradaki adım
Boru hattı sırası netleştikten sonra örgü üretimi ve düğüm yaşam ömrü için Mesh builder sayfasına geçebilirsiniz. Önceki adım: UI texture logic.