holodepth

Babylon.js · Mesh & materyal

Node material: düğüm grafiği ile yüzey programı

Hazır PBR materyal parametreleri çoğu ürün için yeterlidir; sınır, önceden tanımlı slotların dışına çıkmak istediğiniz anda gelir. Babylon.js'te bir üst seviye seçenek Node Material adı verilen shader graph yaklaşımıdır: yüzey davranışını tek tek satır GLSL yazmak yerine blokları bağlayarak tanımlarsınız; motor grafiği derleyip sahneye uygun shader programına dönüştürür.

Bu sayfa editörde hangi menünün nerede olduğunu adım adım öğretmez; «grafik düşüncesi» ve motorun sunduğu özel yapılar (blok türleri, bağlantı kuralları, derleme ömrü) üzerinden gider — böylece Three.js tarafındaki materyal öğrenme yolundan çakışmadan ayrılır.

Özet: grafikten shader'a üç adım

Adım Ne yapıyorsunuz? Motor ne yapıyor?
Tasarım Blokları ekleyip çıkışlardan girişlere kablo çekiyorsunuz. Bağlantıların tür uyumunu ve döngüleri kontrol eder.
Derleme Grafik «hazır» dediğiniz an. Grafiği GPU programına çevirir (shader üretimi).
Çalışma Sahne render olurken materyal parametreleri güncellenir. Üretilen shader ile çizim; gerektiğinde yeniden derleme tetiklenir.

Grafik düşüncesi: akış ve çıkışlar

Node materyali düşünmenin en kolay yolu, görüntüyü "fonksiyon kompozisyonu" olarak görmektir: örneğin doku örneklenir, bir renkle çarpılır, sonra parlaklık ile karıştırılır ve en sonda fragment çıkışına bağlanır. Her ara ürün bir bloktan çıkar; kablo, bir blok çıkışını başka bir blok girişine taşır. Sahnedeki her piksel için bu ağ aynı mantıkla çalışır; farklı olan yalnızca koordinat ve ışık verisidir.

Zihinsel model: veri tek yönde akar; döngü kurmak istediğinizde çoğu zaman geri besleme değil, parametre veya doku üzerinden "durumu dışarıda tutma" gerekir — aksi halde hem derleyici hem de ekip arkadaşınız grafikte kaybolur. Alt ağları (ör. tekrarlayan karışım) isimlendirip sınırlandırmak, büyük projelerde okumayı kurtarır.

Bu model Holodepth'teki GLSL veya düşük seviye shader anlatımını iptal etmez — grafik, o dilin üzerinde bir kabuktur. Kabuk sayesinde tekrar kullanılabilir kalıplar paketlenir; fakat hata ayıklarken zemin gerçek hâlâ üretilen programın (vertex + fragment) davranışıdır; grafik yalnızca onu üretmenin görsel editörüdür. Derlemenin ne zaman tetiklendiği ayrı bir disiplindir ( Derleme ömrü).

  • Giriş → ara düğümler → zorunlu çıkış: yarım kalan "güzel ara sonuç" sahneye taşınmaz; son bloklar boşsa motor ya reddeder ya da tanımsız piksel üretir.
  • Tekrar kullanım: aynı alt grafiği birkaç malzeme varyantında kopyalamak yerine, mümkünse tek kaynakta toplayıp parametreyle ayırın — kopya sayısı arttıkça sürüm sapması artar.
  • Okuma sırası: önce nihai çıkışa giden yolu izleyin, sonra daldığınız dalları genişletin; ters yönde taramak yeni başlayanlarda yorgunluk yaratır.

Sahne grafiği değil

Buradaki "grafik", TransformNode / Mesh hiyerarşisini kastetmez; materyal içi veri akışıdır. İkisini aynı kelimeyle düşünmek, "bu düğüm sahneye mi bağlı, renge mi bağlı?" karışıklığını büyütür. Sahne düzeni için Holodepth'teki sahne yönetimi maddeleri ayrı çizgidir — burada yalnız materyal grafiğini sabitliyoruz.

Bloklar ve bağlantıların «tip» sözleşmesi

Grafik editörlerinde kabloyu her girişe takamazsınız; çoğu blok girişi bir veri türüne bağlıdır: örneğin üç bileşenli renk (vec3), tek sayı (float), iki bileşen (vec2) veya özel yüzey verisi. Tür uyuşmazlığında motor ya dönüşüm önerir ya da bağlantıyı reddeder — bu, yazılı şablonda yanlış fonksiyon imzası kullanmaya denktir. Görsel editörde kırmızı veya gri bağlantı, çoğu zaman "imza uyuşmuyor" demektir; zorla bağlanan bir kablo bazen sessiz yeniden yorumlama ile çalışır ve sonra sahne ışığı değişince patlar.

İkinci özel yapı: bazı bloklar sabit rol taşır — örneğin sahneye nihai rengi bildiren fragment çıkışı veya yüzey normalini besleyen özel girişler. Grafik tamamlanmış sayılması için bu çıkışların atanmış olması gerekir; eksik bağlantı ile derleme başarısız olur veya tanımsız görüntü üretir. Bazı motorlarda "varsayılan sıfır" ile derlenmiş gibi görünen yarım grafikler vardır; üretimde buna güvenmeyin — zorunlu girişleri bilinçli doldurun.

Üçüncü pratik katman: aynı anlama gelen iki kabloyu birleştirmeden önce alan adlarını (ör. UV seti, dünya / tangent uzayı) eşleştirin; tür doğru olsa bile yanlış koordinat alanı seçmek, dokunun kaymasına benzer hata üretir — bu sayfa doku adreslemesini anlatmaz; yalnız bağlantı sözleşmesini sabitler ( Texture sistemi ile birlikte okuyun).

  • Önce tür, sonra anlam: vec2 ile vec3 aynı renk değildir; kanal çoğaltma veya düşürme bilinçli blokla yapılmalıdır.
  • Çıkış rolü: nihai yüzey rengi, opaklık, normal gibi hatlar ayrıdır; birini diğerinin yerine bağlamak derlenebilir görünüp ışıkta çöker.
  • Ekip için: blokları yeniden adlandırmak (özellikle maske ve karışım düğümleri) inceleme ve eğitim maliyetini düşürür — görsel grafikte isim tek belgedir.

Pratik okuma ipucu

Bağlantı takılmıyorsa önce çıkışın türünü okuyun (kaç kanallı?), sonra hedef girişin beklediği türü. Ara adım olarak ayırma / birleştirme, kanal seçimi ( swizzle benzeri düğümler) veya skalara indirgeme blokları sık kullanılır; bazen sorun tür değil, alan / uzay (ör. tangent normal beklenirken dünya vektörü verilmesi) farkıdır.

Fragment ve vertex: iki ayrı «program hattı»

Donanım gerçeği gereği vertex ve fragment aşamaları farklıdır: biri köşe başına çalışır, biri piksel başına — dolayısıyla aynı matematik bile farklı sıklıkta yürür. Node materyalde bu ayrılık grafikte de korunur; hangi blokların köşe dünyasında, hangilerinin piksel dünyasında iş gördüğü motor tarafından bilinir. Karışıklık sıklıkla şuradan çıkar: köşe düzeyinde hesaplanması gereken şeyi (ör. yerel pozisyon animasyonu, morf veya benzeri köşe bazlı iş) yanlışlıkla piksel tarafına taşımak veya tersi; semptom genelde titreme, ters yönlü normal veya ışıkla uyumsuz parlama olur.

Sezgisel kural: pahalı doku örneklemesini mümkün olduğunca köşe tarafında bitirip piksele düşük boyutlu sonuç taşımak isterdiniz — fakat motor ve grafik topolojisi izin vermeyebilir; bu noktada doğru blok seçimi, mikro optimizasyon değil doğruluk meselesi haline gelir.

Holodepth'te ayrım Shader genel bakış, Vertex shader ve Fragment shader maddelerinde açılır; burada yalnızca şunu sabitleyin: grafikte iki «dal» düşünün ve veriyi doğru dalda üretin — bu sayfa düşük seviye GLSL sözdizimini tekrarlamaz.

  • Vertex: dönüşüm, animasyon, tekrar kullanılan vektörler; çıktı çoğu zaman interpolasyonla piksele "sulanır".
  • Fragment: nihai renk, opaklık, detaylı ışık–yüzey etkileşimi; burada yapılan hata her kapalı pikselde tekrarlanır.
  • Şüphede: aynı düğümü geçici olarak basitleştirip tek dalda çalıştırın; hangi aşamada bozulduğunu ayırmak hata ayıklamayı hızlandırır.

Yanlış dal imzası

Düz renk veya tek ışıkta "doğru" görünüp gölge veya çevre yansıması açılınca çöküyorsa, önce normal / dünya uzayı üretiminin hangi aşamada yapıldığını kontrol edin. Bu, materyal boru hattının tamamını değil, grafik içi aşama seçimini hedefler.

İki üretim yolu: editör (NME) ve kod

Babylon ekosisteminde görsel bir Node Material Editor ( NME) bulunur; grafikleri tarayıcıda kurup projeye aktarabilirsiniz. Alternatif olarak blokları programatik oluşturup bağlamak mümkündür — takım boyutu ve süreç kararıdır: tasarımcı ağırlıklı iş akışında görsel araç; tekrarlanan kalıpları kodla üretmek için API yolu. Hibrit de yaygındır: ilk tasarım NME'de, üretimde parametre üretimi veya varyantlar kodda — önemli olan hangi kopyanın otorite sayıldığının yazılı olmasıdır.

Önemli ortak nokta: ikisi de aynı mantıksal grafiği tanımlar; fark yalnız yazım ortamındadır. Kod yolu için bu dizide yalnız iskele gösterilir; ayrıntılı blok kurulumu projenize kalır ( Kod iskelesi). Sürüm yükseltmelerinde API isimleri değişebileceği için, motor örnekleriyle eşleme alışkanlığı aynıdır.

Sakın görsel projeyi kaynak kontrolde şeffaf tutmayı ihmal etmeyin — grafik dosyası da bir kaynak dosyadır. İnceleme (diff) alabilmek için dışa aktarma biçimi ve klasör sözleşmesini takım içinde netleştirin; aksi halde "sahnedeki materyal ile repodaki grafik" farklı kalır.

  • NME öne çıkar: keşif, sanat yönlendirmesi, tek seferlik görsel deneme; ekran görüntüsü ve kısa video ile iletişim hızlanır.
  • Kod öne çıkar: üretimde onlarca benzer grafik, birim testi, otomatik üretim veya CI içinde doğrulama gerektiğinde.
  • Ortak risk: grafik büyüdükçe "kimin hangi kabloyu taşıdığı" kaybolur; düzenli küçük refaktör ve blok gruplama, boru hattı disiplinine benzer.

Kaynak kontrol disiplini

Görsel editör "kaynak dışı" değildir. Dışa aktarılan grafik veya üretilen ön yüz dosyaları, tıpkı glTF veya doku gibi versiyonlanmalı ve incelemeden geçmelidir; yalnızca sahne dosyasına gömülü kalırsa geri dönüş zorlaşır. Bu bölüm varlık yükleme akışını anlatmaz — yalnız üretim yolu seçimini sabitler.

Derleme ömrü: grafik değişince ne olur?

Grafik ilk kez derlendiğinde motor shader kodunu üretir. Grafikte anlamlı bir değişiklik olduğunda — yeni blok, kablo kesimi, parametre bağlantısı — yeniden derleme gerekir. Üretimde sık yapılan performans hatası, her karede grafiği baştan derlemektir; çoğu parametre güncellemesi ise mevcut shader içindeki uniform veya sabit köşe verisi ile yapılabilir ( Texture sistemi ile birlikte düşünün).

  • Derle: yapı değiştiğinde (topoloji).
  • Güncelle: parlaklık, renk çarpanı gibi değerlerde çoğu zaman tek tip shader yeter.
  • Kaçın: kullanıcı her hareketinde tam yeniden derleme — maliyet patlar.

Ne zaman node, ne zaman hazır PBR?

Soru «hangisi daha güçlü?» değil, hangi yüzey bakımı ekibinize yük olur? Hazır PBR materyal, metal–rough kanallarını ve glTF ihracatıyla aynı zihin modelini taşır; tasarımcı ve mühendis aynı dosya dilinde kalır. NodeMaterial ise o kanalların arasına giren özel matematik için devreye girer: örneğin tek dokuda olmayan karışım kuralları, zamanla değişen prosedürel maske, seyrek yüzeylerde koşullu okuma veya standart BRDF kabuğunun dışına taşan (bilinçli olarak seçilmiş) ışık–yüzey ilişkisi.

Yalnızca albedo, normal, metal–rough ve ortam ile yetinen varlıklarda PBR genelde yeterlidir; node'a geçmek burada çoğu zaman gereksiz derleme ve inceleme maliyeti ekler ( Derleme ömrü). Tam tersi, aynı görseli PBR'de on iki geçici harita ve örtük kural yığınıyla taklit etmeye kalkıştığınızda grafik tek düğümde toplanmış olsa da okunabilirlik kaybolur — o noktada node, kaosu görünür hale getirmenin aracıdır.

«Her şeyi node ile kurma» eğilimi, özellikle prototipte caziptir; fakat grafik büyüdükçe kod incelemesi, sürüm farkı ve hata ayıklama diff'i zorlaşır. Karar ürün aşamasına göre değişir: erken deneme özgürlüğü yüksek, canlıya yakın dönemde ise basit yüzey = basit materyal kuralı sık kazanır.

  • Node düşünün: tek cümleyle anlatılamayan karışım; harita sayısını patlatmadan koşullu davranış; aynı mantığın hem editörde hem kodda tekrarlanması gerekiyorsa grafik tek kaynak olsun isteği.
  • PBR'de kalın: standart dış görünüm yok; ihracat aracı zaten beklenen kanalları üretiyor; ekip çoğunlukla materyal dosyası «slot listesi» okuyabiliyorsa.
  • Şüphede: önce PBR ile sınırı zorlayın; yetersiz kaldığı anı yazılı karar (kısa gerekçe) olarak kaydedin — altı ay sonra «neden grafik var?» sorusuna yanıt kalır.

Düşük sürtünme, varsayılan PBR

Motorun sunduğu PBRMaterial yolu, gölgelendirme ve ortam ile birlikte zaten test edilmiş bir yoldur. Node ile aynı sonucu yeniden kurmak mümkündür; amaç sadece «parlaklığı biraz kıs» ise önce boru hattı ve sahne varsayılanlarını ( PBR · ortam) kontrol etmeden node açmak, çoğu zaman yanlış kata inmektir. Bu sayfa boru hattı sırasını anlatmaz; yalnız seçim çerçevesini sabitler.

Özet: node materyal ifade gücü için, hazır PBR sözleşme ve sürtünme düşürme için tercih edilir. İkisi rakip değil; aynı projede yan yana durabilir — tutarlılık, hangi yüzey türünün hangi yolu «resmi» saydığınızda gizlidir.

Three.js ile üst üste okuma

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

Holodepth Three.js hattında özel yüzey için sıklıkla ShaderMaterial, RawShaderMaterial veya giderek TSL ( Three.js Shading Language) öğretilir — metin ve kod üzerinden. Babylon.js tarafında ise grafik tabanlı birinci sınıf materyal ve düzenleyici ekosistemi öne çıkar. İkisi aynı GPU gerçeğine iner; fark, motorun sunduğu üretim yüzeyi ve görsel akıştır.

Kod iskelesi (programatik yol)

Aşağıdaki blok yalnızca NodeMaterial örneğinin oluşturulduğunu gösterir; gerçek grafik blokları projenize göre eklenir ve sonunda derlenir. 

const nodeMat = new BABYLON.NodeMaterial("customSurface", scene, {
  emitEffects: true,
});

// ... bloklar oluşturulur ve birbirine bağlanır ...
// Varsayılan mod genellikle NodeMaterialModes.Material (yüzey materyali)

nodeMat.build(false);

Sürüme göre yapılandırma anahtarları değişebilir; resmi örneklerle doğrulayın. build(false) birinci argümanı genelde ayrıntılı derleme günlüğü ( verbose) içindir; geliştirirken gerektiğinde true kullanılabilir. Grafik hazır olduğunda derleme çağrısını yaşam döngünüze yerleştirin.

Sıradaki başlık

Özel gölgelendirme yüzeyini üretimde tutmak için hazır yüzey modeli olarak PBR materyal sayfasına geçebilirsiniz. Önceki adım: Mesh builder.