holodepth

Three.js · Doku ve UV

UV mapping mantığı: boyutlar arası köprü

Üç boyutlu bir objenin yüzeyine doku yerleştirmek, bir hediye paketini ambalajlamaya benzer — fakat bilgisayar grafiklerinde süreç genelde tersinedir: 3B formu kesip 2B düzleme yayarız. Bu yayılma ve koordinat sistemine UV mapping denir.

UV, modelleme ile teknik geliştirme arasındaki köprüdür; yanlış bir UV haritası, en iyi dokuyu bile düz veya bozuk gösterebilir.

Bağlam: Doku temelleri, Materyal girişi, Sahne (Scene).

UV sözlüğü: hızlı köprü

Kavram Ne işe yarar? Bu sayfada / komşu
U / V Doku düzleminin eksenleri; XYZ ile karışmaz. Bölüm 1
0–1 normalize Çözünürlük değişse bile aynı köşe aynı dokudaki göreli yerde kalır. Doku temelleri · 0–1
Unwrap · dikiş 3B yüzeyi 2B’ye «yayma» planı; kesim çizgileri. Bölüm 2
Texel yoğunluğu Bozulma ve netlik; damalı test. Bölüm 3

Neden «U» ve «V»?

Üç boyutlu uzayda eksenlerimiz X, Y ve Z’dir. Doku koordinatlarını bunlarla karıştırmamak için alfabenin farklı harfleri seçilmiştir; aynı köşede hem dünya konumu (XYZ) hem de doku adresi (UV) ayrı ayrı tutulabilsin diye isimler ayrılır.

U ekseni

U çoğu arayüz ve varsayılan düzende yatay doğrultuyu (horizontal) temsil eder; doku görüntüsünde soldan sağa gidiş bu eksenle ilişkilendirilir.

V ekseni

V dikey doğrultuyu (vertical) temsil eder. Bazı DCC paketlerinde V yönü için ek gösterim seçenekleri olabilir; WebGL / Three.js tarafında önemli olan, geometrinin buffer’ındaki UV ile doku örnekleme arasında tutarlı bir eşleşmedir.

0 ile 1 aralığı (normalize)

UV koordinatları dokunun çözünürlüğünden bağımsızdır. Objenin bir köşesi örneğin U = 0,5, V = 0,5 noktasındaysa, doku 512 px de olsa 4K da olsa bu nokta dokuda tam merkeze denk gelir. Bu özellik, aynı materyalin farklı çözünürlükteki sürümleri arasında taşınabilirlik sağlar (VRAM ve çözünürlük ile birlikte düşünün).

Unwrapping (açma): küpten düzleme

Bir küpü düşünün: karton kutu gibi kenarlardan kesip masaya düz yaydığınızda oluşan şekil, o küpün UV map’idir. Modelleme yazılımında «unwrap» dediğinizde yapılan şey de kabaca budur: hangi 3B yüzeyin 2B levhanın hangi bölgesine oturacağını planlamak.

Seams (dikiş izleri)

Dikiş, objenin nereden kesileceğini belirleyen çizgilerdir. Kesim, 3B normallerin sürekliliğini kırdığı için dikişleri genelde kamera veya ışığın az vurduğu bölgelere (örneğin bir karakterin koltuk altı, mobilyanın arka yüzü) gizlemek yaygın bir pratiktir; aksi hâlde yüzey boyunca doku sürekliliği koptuğu yerden «çizgi» hissi oluşabilir.

UV islands (adalar)

Kesilen her parça, UV düzleminde bir «ada» oluşturur. Adaların birbirinin üzerine bilerek binmediğinden emin olmak gerekir — aksi hâlde iki farklı 3B parça aynı doku bölgesini paylaşır ve detaylar birbirine karışır. İstisna: performans için bilinçli overlap (bölüm 4).

Distortion (bozulma) ve texel yoğunluğu

UV mapping’in en büyük düşmanı bozulmadır: haritadaki bir parça 3B modeldeki gerçek ölçeğe göre çok küçük veya büyük açılmışsa doku yüzeyde gerilmiş, büzülmüş veya «bulanık–keskin karışık» görünür. Bu, kötü sanat değil; çoğu zaman kötü alan dağılımıdır.

Texel density (texel yoğunluğu)

Texel yoğunluğu, 3B modelin birim yüzeyine düşen doku pikseli (texel) miktarıdır. Aynı 2K dokuda bile bir yüz çok dar bir ada içinde sıkıştırılmışsa o yüzeyde efektif çözünürlük düşer; tersine aynı doku alanı genişletilirse detay «yayılır» ve yumuşak görünür.

Öncelik ve alan payı

Oyuncuya en yakın parçaların (örneğin yüz) UV adaları doku alanında daha geniş yer kaplamalıdır; daha az kritik bölgeler (ayak tabanı, iç yüzey) daha dar tutulabilir. Böylece sınırlı doku çözünürlüğünü göz önünde olan yere harcarsınız.

Checkerboard testi

Damalı bir doku giydirildiğinde kareler her yerde eşit büyüklükte ve kare ise harita genelde sağlıklıdır. Karelerin bir tarafta uzayıp diğerinde sıkışması, UV alanı ile 3B ölçek arasında dengesizlik olduğunun hızlı görsel kanıtıdır.

Overlapping ve atlaslama

Bazen UV adalarını üst üste bindirmek (overlapping) kasıtlı bir performans / bellek hilesidir: aynı doku bölgesini birden fazla 3B parça paylaşır; böylece doku dosyası küçülür ve örnekleme daha verimli olabilir.

Simetri ile tasarruf

Örneğin arabanın iki yanı aynı görünüyorsa, iki yanın UV’sini üst üste koyarak doku alanından kabaca %50 tasarruf edebilirsiniz. Bu, ayrıntıyı ikiye katlamaz; görünür taraf aynı deseni paylaşır — oyun ve ürün görselleştirmede sık tercih edilir.

Texture atlas

Birçok küçük objenin (kalem, kitap, bardak…) UV’lerini tek büyük dokuda toplamak, draw call sayısını azaltarak sahneyi hızlandırmaya yardım eder. Atlasın riski, tek dosyada hata yapıldığında birçok objenin birden bozulması ve güncelleme maliyetidir; bu yüzden düzen (padding, ada sınırları) planlı olmalıdır.

Three.js tarafında materyal başına doku bağlama modeli değişmeden kalır; kazanç genelde batching ve içerik tarafındaki tek dosya yönetimindedir (Doku optimizasyonu · atlas).

Three.js içinde UV erişimi

Bir geometri oluşturduğunuzda, köşe başına UV çiftleri genelde geometry.attributes.uv içinde tutulur. Parametrik primitiflerde bu buffer hazır gelir; özel modellerde DCC dışa aktarımı sırasında üretilir.

BufferAttribute

Her vertex, kendi UV koordinatını taşır; aynı 3B köşede farklı UV değerleri (çoğunlukla dikiş yüzünden) vertex çoğaltılarak elde edilir. Bu yüzden «kaç üçgen var?» sorusu ile «kaç benzersiz UV köşesi var?» sorusunun cevabı her zaman aynı olmayabilir.

Shader ve vUv

Shader’da dokuyu çoğu zaman vUv üzerinden okuruz. Dokuyu kodla kaydırmak (offset) veya döndürmek aslında bu UV’lerle oynamaktır; materyaldeki texture dönüşümü de aynı fikrin paketlenmiş halidir. 

// BufferGeometry üzerinde UV buffer’ı
const uvAttr = geometry.attributes.uv;
if (uvAttr) {
  // uvAttr.array: u,v çiftleri (vertex başına 2 float)
  // uvAttr.needsUpdate = true; // değiştirirseniz
}

HoloDepth «UV» checkpoint’i

Özet

UV mapping, 3B modelleme ile teknik geliştirme arasındaki köprüdür. Harita zayıfsa, en iyi doku bile sahneye «ucuz» oturur.

HoloDepth özet stratejisi

  • Görünmez dikişler — Seam’leri mümkün olduğunca gizli kenarlara al.
  • Eşit texel yoğunluğu — Checkerboard testini atlama; bozulmayı erken yakala.
  • Doku tasarrufu — Simetrik parçaları kasıtlı overlap ile birleştir; çözünürlüğü verimli kullan.
  • Hizalama — Doku dikeyse UV adalarını da dikey hizala; ekranda aliasing / kırılmayı azaltmaya yardım eder.

Mesh ve materyal hattı

UV nihai görüntüyü tek başına belirlemez: aynı haritada doğru doku, doğru filtre ve doğru renk uzayı gerekir (Doku temelleri · renk uzayı). Sahneye giren Mesh Standard/Physical materyalde kanallar aynı UV setini paylaşır; bu yüzden oyun içi «tek atlas» kararları çok erken verilir.

Sonraki durak: Bellek, mip ve sıkıştırma tarafında UV kararlarını maliyete bağlayan Doku optimizasyonu.