Three.js · glTF pipeline · Materyal
Yüzeyin dili: Material mapping (texture → materyal ilişkisi)
Material mapping, bir dokunun üç boyutlu yüzeyle nasıl eşleşeceğini ve her pikselde nasıl okunacağını tanımlar. «Hangi dosya hangi slota?» sorusu Texture bağlama konusunda; bu sayfada ise UV adresleri, sarma, çevresel yansıma ve shader içindeki birleşim mantığı öne çıkar — yani aynı slotlara konan verinin yüzey üzerinde nereden ve nasıl örneklenip aydınlatma ile birleşeceği.
Aynı doku dosyası bile yanlış UV veya yanlış anlamda kullanıldığında tamamen farklı bir yüzey izlenimi verir; sorun çoğu zaman dosyada değil, eşlemededir. Önceki adımda slot isimlerini ve PBR bağlama iskeletini gördük; burada «dosya → slot» sonrası adres ve davranış katmanına iniyoruz. Zaman çizelgesi ve hedef düğümlerle birleşen taraf Animation clips konusunda devam eder.
Önce okuyun: Texture bağlama, UV mapping, Wrapping & repeat, Materyal girişi.
Aşağıdaki demo, harici model yüklemeden tek bir yüksek segmentli küp üzerinde mapping davranışını gösterir: aynı doku ve materyal ayarlarıyla UV düzgün / bozuk, repeat ve offset, ile normal yalnızca gölgelendirmeyi oynatırken displacement’in silüeti gerçekten değiştirmesi yan yana okunabilir.
Mapping
Doku adresi ve UV düzleminde döşeme / kaydırma
Surface detail
Işık / gölgelendirme veya gerçek geometri — mapping ile aynı kategori değil
Okuma rehberi: Önce UV’yi «bozuk» yapın: doku dosyası aynı kalsa bile yüzeyde süzülme ve dikiş hissi bozulur — sorun çoğu zaman «yanlış dosya» değil, adreslemedir. Repeat ve offset ile örüntünün sıklaşması ve kayması aynı küp üzerinde anında görülür. Son olarak detay modunda yalnız normal, yalnız displacement ve ikisini birden deneyerek silüet ile mikro gölgelendirme farkını ayırın. Texture bağlama sayfası slot isimlerine odaklanır; burada o slotların yüzeyde nasıl örneklenip hareket ettiği öne çıkar.
UV koordinat sistemi: haritalamanın temeli
Haritalama, dokunun yüzey üzerinde nereye yapışacağını söyler. Bunun için geometride köşe başına düşen UV çiftleri tutulur; buna UV mapping denir ve modelleme sırasında oluşturulur veya düzeltilir.
U ve V
Doku düzleminin iki eksenidir; genelde U yatay, V dikey okunur (görüntü dosyasındaki piksel eksenleriyle örtüşür).
Tipik kullanımda her köşe için 0–1 aralığında adresler görürsünüz;
GPU bu adreslerden texel örnekler. UV’ler
kırılmış, üst üste binmiş veya dikişleri hizasız ise doku sünmüş, kaymış veya yırtılmış
görünür — önce geometri adresini düzeltmek, sonra doku atamak genelde daha az uğraştırır.
Sayfanın üstündeki mapping
labında aynı küp ve aynı doku ile «düzgün / bozuk UV»
geçişini canlı görebilirsiniz.
Surface detail (normal ve displacement)
Aynı düz renk yüzeyi bile farklı haritalarla «tok» veya «pürüzlü» okunabilir. Renk haritası malzemenin tonunu verir; detay hissi ise çoğunlukla normal veya yer değiştirme (displacement) yollarından gelir.
Normal mapping
Yüzeyin mikro yönünü tangent space teğetleriyle kandırır; çatlak, gözenek gibi ince detaylar ışıkla «oynatılır». Üçgen sayısı aynı kalır; silüet değişmez, yan açıdan bakınca illüzyon zayıflayabilir.
Displacement mapping
Yükseklik haritasına göre köşeleri iter; gölge sınırı ve silüet gerçekten değişir. İnce sonuç için yeterince yoğun ağ veya tesselasyon gerekir; bu yüzden maliyet, çoğu projede normal haritadan daha yüksektir.
Mapping labında aynı küp üzerinde yalnız normalMap, yalnız displacement ve ikisini birden seçerek farkı hızlıca kıyaslayabilirsiniz (küp segmentli olduğu için yer değiştirme okunur).
Environment mapping (çevresel yansıma)
Çevreyi yansıma hissi, MeshStandardMaterial üzerindeki envMap
yuvasıyla gelir; kaynak çoğu zaman küp doku veya equirectangular HDRI
ön izlemesidir. Ayrıntılı kurulum için
Environment & HDRI sayfasına bakabilirsiniz.
Yansımanın gücü yalnızca metalde değil, düşük pürüzlülükte de hissedilir; fakat tam metalik
yüzeylerde çevre haritası neredeyse tek başına «parlaklık karakterini» belirler. Son
görünüm,
envMap kalitesinin yanında metalness, roughness ve
varsa ilgili haritaların birlikte okunmasıyla şekillenir — burada odak, haritanın
ışıkla birlikte nasıl okunduğudur; slot isimleri yine
bağlama
sayfasındaki çerçevede kalır.
Texture tiling & offset
Aynı materyalde bile her doku kendi Texture örneğini taşır; döşeme ve kaydırma
bu nesne üzerinden ayarlanır (repeat, offset,
wrapS / wrapT). Böylece zemin için sık döşeme, duvar için tek
kopya gibi farklı davranışlar kurulabilir.
Tiling (repeat)
Dokunun yüzeyde kaç kez tekrarlanacağını belirler. Tekrar istiyorsanız wrapping modunu buna uygun seçmeyi unutmayın.
Offset
UV düzlemde kaydırma; akan su, kayan bant veya hafif parallax hissi için kare başına küçük artışlar yaygındır.
Mapping labındaki repeat kaydırıcısı ve offset eksenleri bu iki parametreyi aynı küp üzerinde doğrudan gösterir.
Örüntü sınırları, dönüş ve merkez ayarı gibi konular için bkz. Wrapping & repeat.
Multi-mapping: katmanlı hesaplama
Üretimde tek MeshStandardMaterial satırında albedo,
normal, roughness, metalness, AO ve daha fazlası aynı anda
bulunabilir. Her biri ayrı bir «harita»dır; shader aynı yüzey
noktasında bu örnekleri okuyup aydınlatma denkleminde bir araya getirir.
Hangi kanalın hangi slota bağlanacağı Texture bağlama konusunda; burada önemli olan, hepsinin aynı UV setiyle (gerekirse ikinci UV ile) mantıklı hizalanmasıdır. Bir harita yanlış ölçekte veya yanlış renk uzayında ise tüm kombinasyon bozulur. glTF tarafında materyal uzantıları veya farklı PBR varyantları bu birleşimi etkileyebilir; yükleyicinin ürettiği Three.js materyalinde hangi alanların dolduğunu sahne içinde doğrulamak pratik bir alışkanlıktır.
JavaScript teknik örneği
Aşağıdaki örnek, döşenen bir renk haritası ile normal ve yer değiştirme haritalarının aynı
materyalde birleşimini gösterir. dispTexture ve normalTexture
için yükleyici çağrılarını kendi varlık yolunuza göre eklemeniz yeterlidir. Canlı
karşılaştırma için üstteki
labda normal / displacement
modlarını kullanın. Bu blokta
odak repeat / wrap ile haritaların aynı yüzeyde üst üste
okunmasıdır; needsUpdate ve dispose için
bağlama
sayfasındaki notlara dönün.
// Örnek: döşeme + PBR haritaları (dokuların yüklü olduğu varsayılır)
const brickTexture = new THREE.TextureLoader().load("bricks.jpg");
brickTexture.wrapS = brickTexture.wrapT = THREE.RepeatWrapping;
brickTexture.repeat.set(4, 4);
const material = new THREE.MeshStandardMaterial({
map: brickTexture,
displacementMap: dispTexture,
displacementScale: 0.1,
normalMap: normalTexture,
normalScale: new THREE.Vector2(1, 1),
});HoloDepth «Mapping» checkpoint’i
Özet
İyi haritalama, dosyayı yüklemekten fazlasıdır: adres (UV), sarma (wrap / repeat) ve shader’ın beklediği kanal düzeni birlikte düşünülmelidir. Tek bir zayıf halka, tüm PBR okumasını çarpıtabilir.
Sıradaki konu: zaman ekseninde hareket için Animation clips — materyal eşlemesi sabit kaldığında bile dönüşümler ve morf hedefleri bu katmandan beslenir.
HoloDepth özet stratejisi
- Shader akışı: Haritalar ayrı ayrı girdi; son görüntü tek pikselde birleşir. Hangi kanalın ne işe yaradığını materyal belgelerinden teyit edin.
- Yüzey detayı: Hafif maliyetle derinlik hissi için normal; silüeti oynatmak için displacement — bütçeye göre seçin.
- UV önce: Adres defteri düzgün değilse hangi haritayı bağlarsanız bağlayın sonuç yanıltıcı kalır; modeli erken aşamada doğrulayın.