Three.js · Debug & analiz
MeshNormalMaterial: geometrinin renkli dili
Yön = renk — ışık hesabı yok
Bir nesnenin hangi yöne baktığını, kod sayılarına bakmadan tek bakışta okuyabilir misiniz?
MeshNormalMaterial, nesneyi ışığa veya albedo dokusuna göre değil, yüzey
normallerinin baktığı yöne göre boyar. Sahnede ışık olmasa bile gökkuşağına
yakın canlı renkler görürsünüz. Bu materyal süs değil; geometri ve shading hatalarını görmek
için güçlü bir debug aracıdır.
Bu görünüm, albedo veya metalness ile “güzelleştirme” değil; yüzey yönü
haritası
okumaktır — aynı veriyi sayı tablosu yerine görsel olarak taramanızı sağlar.
Önkoşul: MeshToonMaterial (stilize shading ile zıt okuma), MeshLambertMaterial (ışığa tepkili sürekli ton), MeshBasicMaterial (ışıksız referans). Üçlü özet tablo: Basic · Lambert · Normal. Kavramsal çerçeve: Materyal giriş. Sayfa sonunda özet ve komşu ders bağlantıları.
Zihin modeli: yön = renk
Eksen → RGB
- Sağa bakan yüzeyler (+X): kırmızı (R)
- Yukarı bakan yüzeyler (+Y): yeşil (G)
- Size doğru bakan yüzeyler (+Z): mavi (B)
Bu eşleme, “hangi eksene ne kadar hizalı?” sorusunu renk cümlesine çevirir. Dünya uzayında döndürdüğünüz nesnede renklerin dönmesi beklenen davranıştır; çünkü renk artık malzeme rengi değil, yön bilgisidir. Bu yüzden Normal materyal, UV veya doku hatası ararken değil, geometri ve normal vektör alanı ararken kullanılır.
Tangent uzayı ve normal haritaları (ör. normalMap) konusuna geçtiğinizde,
burada gördüğünüz “gökkuşağı” ile doku dosyasındaki normal kodlaması aynı problemi iki
farklı
temsil eder — biri ekranda doğrudan, diğeri shading içinde dolaylı olarak.
Ne kontrol edebilirsin?
İki kritik ayar
- Flat shading: Poligon geçişlerini yumuşatmak yerine her yüzeyi tek renk bloğu gösterir; low-poly / yüzey yönü analizi için uygundur.
- Opacity: İç yapıyı görmek için saydamlık kullanılabilir.
flatShading açıkken her üçgende tek renk görürsünüz; bu, “vertex normal
interpolasyonu gölgeyi gizliyor mu?” sorusunun cevabını verir. Kapalıyken ise yüzey
pürüzsüz görünse bile, altta yatan topoloji hâlâ renk geçişlerinden okunabilir — hangi
modun işe yaradığı tamamen hangi hatayı aradığınıza bağlıdır.
Opacity ile iç içe geçen mesh’leri üst üste okumak, özellikle boolean veya CAD içe aktarımlarında, ters yüzey veya çift yüz (duplicate face) izlerini ortaya çıkarabilir.
Neden her şey gökkuşağı gibi görünür?
Rastgele değil, koordinat
Renkler rasgele değildir: yüzey normal vektörünün bileşenleri (genelde
normalize edilmiş x, y, z) doğrudan
R, G, B kanallarına haritalanır. Nesne pembe–morumsu
görünüyorsa, örneğin yaklaşık +X ve +Z arası çapraz bir yöne
bakan yüzeyler söz konusu olabilir.
Pratikte bu, “neden bu köşe mor?” sorusunu vektör cebiri yerine görsel sezgiyle cevaplama şansı verir. Renklerin “anlamsız” görünmesi genelde modelin dünya uzayında nasıl döndüğü veya ölçeklendiği ile ilgilidir; anlam aslında tam oradadır.
Three.js sürümüne göre tam renk eşlemesinin ince ayrıntıları değişebilir; bu sayfada odak tasarım ilkesidir: Normal materyal bir ölçüm ekranıdır, final sanat pass’i değildir.
Yaygın hata: ışık aramak
Işık eklemek işe yaramaz
Hata: Nesne “karanlık” sanılıp sahneye çok sayıda ışık eklemek.
Sonuç: Normal materyalde neredeyse hiçbir fark oluşmaz.
Gerçek: Bu materyal ışık hesaplarını kullanmaz; renkleri yalnızca geometrik normallerden üretir.
Bu tuzak, PBR veya Phong alışkanlığından gelir: karanlık bölge gördüğünüzde refleks olarak exposure veya ışık sayısını artırırsınız. Normal modda ise “karanlık” diye bir kategori yoktur; yalnızca koyu renkli yönler vardır — yani hâlâ bilgidir, hata değildir.
Debug iş akışı şöyle sadeleşir: önce bu materyale geç, yön haritasını oku; sorun çözülünce
tekrar MeshStandardMaterial gibi üretim materyaline dön.
Ne zaman kullanılmalı?
Kullanım
- Normal map analizi: Haritanın yönlere doğru basılıp basılmadığını kontrol etmek.
- Yüzey yönü (face orientation): Ters (flipped) yüzeyleri fark etmek; ters taraflar farklı renkte görünür.
- Stilize görünüm: Sci-fi / synthwave tarzı dijital estetik için ana materyal olarak (bilinçli seçim).
Üretimde en sık kullanım, sanatçıya teslim etmeden önce QA passidir: içe aktarılan glTF’te ters normaller, çift yüzeyler veya boolean artığı yüzeyler hızlıca görünür. İkinci kullanım, shader geliştirirken “ışık öncesi” geometriyi doğrulamaktır — burada Normal materyal, özel BRDF yazmadan önce referans görüntü sağlar.
Stilize “sci-fi” kullanım bilinçli bir estetik seçimdir; kullanıcıya bunu söylemezseniz “bozuk PBR” sanılabilir — bu yüzden UI veya marka rehberinde materyal dilini netleştirmek gerekir.
İnteraktif: “Debug mode”
Aşağıdaki sahnede karmaşık eğri üzerinde (torus knot) flat ve
smooth normal interpolasyonu arasındaki fark tek tıkla görülür; üstteki
kısa metin (readout) anlık modu özetler, ayrıntı figür altındaki
açıklamada — böylece aynı cümle iki kez üst üste binmez. Ölçüler
demo sabitleri
tablosunda diagram-normal-material.js ile eşlenir.
Torus knot çok yüzeyli bir form; her yüzeyin rengi o noktadaki
normal vektörünün x,y,z bileşenlerinden gelir — sahneye ışık
eklemiş olsan da bu materyal tipik olarak ışık hesabı kullanmaz (yön =
renk). Flat açıkken poligon sınırları “mozaik”; kapalıyken
smooth geçiş. Doku veya harici URL yok.
Demo sabitleri tablosu (Debug mode)
initNormalDemo · yalnızca MeshNormalMaterial + torus knot +
ızgara;
sahneye ışık eklenmez (Normal materyal tipik olarak ışık hesabı kullanmaz).
Tek UI: flat shading onayı.
| Sahne / rol | Parametre | Değer | Tür |
|---|---|---|---|
| Renderer | WebGLRenderer |
antialias: true · alpha: false ·
powerPreference: high-performance ·
setPixelRatio(min(dpr, 2)) · SRGBColorSpace · arka
plan
0x05060c · ton eşlemesi yok (varsayılan)
|
🔒 Sabit |
| Sahne | Scene.background |
0x05060c |
🔒 Sabit |
| Izgara | GridHelper |
boyut 12 · bölüm 24 · renkler
0x3a4a6a / 0x1a2030 · y = -1.15
|
🔒 Sabit |
| Torus knot | TorusKnotGeometry |
yarıçap / tüp 0.92 / 0.3 · radyal / tüp segment
200 / 32 · p = 2 · q = 3 ·
computeVertexNormals()
|
🔒 Sabit |
| Materyal | MeshNormalMaterial |
başlangıç flatShading: false · doku yok |
🔒 + ↔ UI |
| Mesh | Mesh |
konum y = 0.35 |
🔒 Sabit |
| Işıklar | — | demo sahnesinde ışık nesnesi yok | 🔒 Sabit |
| Kamera | PerspectiveCamera |
FOV 45 · yakın/uzak 0.08 / 80 · konum
(0.85, 1.05, 4.6) · lookAt(0, 0.2, 0)
|
🔒 Sabit |
| OrbitControls | damping / mesafe | enableDamping · 0.06 · hedef
(0, 0.2, 0) · mesafe 2.2…12
|
🔒 Sabit |
| HTML · Flat | checkbox |
data-normal-demo-flat · varsayılan kapalı (smooth) |
🔒 + ↔ UI |
Önemli kod kesiti
apply() yalnızca flatShading bayrağını günceller ve
readout metnini moda göre değiştirir.
function apply() {
const flat = !!(flatCb && flatCb.checked);
mat.flatShading = flat;
mat.needsUpdate = true;
if (readout) {
readout.textContent = flat
? "Flat: her üçgen yüzey tek renk bloğu — poligon sınırları ve yön = renk çok net."
: "Smooth: köşe normalleri interpolasyonlu — geçişler yumuşar; yine de renk = yön (ışık yok).";
}
}Uygulama: analiz modu
Aşağıdaki örnek minimum API’yi gösterir: çoğu gerçek senaryoda önce geometride
computeVertexNormals() çağrısı, ardından gerekirse flatShading
bayrağı gelir. Manuel oluşturulan üçgen ağlarında normalleri unutmak, Normal materyalde
“düz renk blokları” gibi yanıltıcı sonuçlar üretebilir.
// Standart analiz materyali
const normalMaterial = new THREE.MeshNormalMaterial({
flatShading: true // Her poligonun yonunu net gormek icin
});
// Manuel geometride normaller siklikla gerekli
geometry.computeVertexNormals();
const mesh = new THREE.Mesh(geometry, normalMaterial);
scene.add(mesh);
Analiz bittikten sonra materyali ve geometriyi üretim yoluna geri alırken, geçici olarak
değiştirilen flatShading veya opacity bayraklarını unutmamak
için küçük bir kontrol listesi (veya git diff) yeterli olur; aksi halde “staging’de her şey
doğruydu” sürprizleri yaşanır.
Basic vs. Lambert vs. Normal
Özet
Tablo “hangi materyal daha iyi?” değil, hangi soruya hangi cevap dilini seçiyorsunuz? sorusuna yanıt verir. Normal satırı, ışık olmadan da anlamlı kalan tek satırdır — bu yüzden sahne kurulumundan bağımsız bir debug katmanı olarak düşünülebilir.
HoloDepth içerik haritasında Normal, PBR zincirinin sonunda “kalite aynası” gibi durur: önce malzeme dilini öğrenirsiniz, en sonda yön dilini kullanarak geometriyi doğrularsınız.
Holodepth production içgörüsü
Geliştirmede X-Ray
MeshNormalMaterial genelde son kullanıcıya gösterilmez; geliştirmede
karmaşık
modellerde shading ve yüzey yönünü anlamak için kullanılır. Işıklar beklenmedik yerlerde
parlıyorsa, önce Normal materyale geçin — suçlu çoğu zaman geometrideki ters normaller
veya yüzey yönleridir.
Takım disiplini: kritik varlıklar için materyal ön ayarlarında (ör. Blender / glTF dışa aktarım) “Normal debug görünümü” ekran görüntüsü istemek, dönüşüm hatalarını erken yakalar. Otomasyonda tam ekran Normal pass şart değildir; ama geliştirici konsolunda hızlı geçiş kısayolu (materyal preset) çoğu zaman yatırımın karşılığını verir.