holodepth

Three.js · Doku ve UV

Texture ayarları: wrapping & repeat (sarma ve tekrarlama)

Üç boyutta bir doku yüklemek yetmez; doku koordinatları 0–1 aralığının dışına taştığında yüzeyin nasıl davranacağını da seçmeniz gerekir. Wrapping, tam olarak bu sınır davranışını belirler; repeat ve offset ile birlikte döşeme, kaydırma ve dönüş efektlerinin temelidir.

Yanlış wrap ayarı dokuyu «yırtılmış», «sünmüş» veya köşede tek renge kilitlenmiş gösterebilir; doğru eşleme ise aynı dosyayı zemin, duvar veya akışkan yüzeyde tekrar kullanmanızı sağlar.

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

Hızlı köprü: sarma ve koordinat

API / kavram Rol Bu sayfada
wrapS / wrapT U ve V ekseninde sınır davranışı. Bölüm 1
repeat Döşeme sıklığı (Vector2). Bölüm 2
offset / rotation Faz, dönüş ve pivot. Bölüm 3
POT / NPOT Mip ve tekrar uyumu. Bölüm 4

Wrapping modları: sınırların ötesi

Three.js’te (ve çoğu GPU sampler modelinde) texture.wrapS ve texture.wrapT ile U (yatay) ve V (dikey) eksenlerinde davranış ayrı ayrı seçilir; zemin için yatayda tekrar, duvarda clamp gibi karışık senaryolar bu yüzden mümkündür. Normalize UV düşüncesi için 0–1 aralığı ve UV mapping · normalize ile birlikte okuyun.

THREE.RepeatWrapping (tekrarlama)

En sık kullanılan moddur: doku, bir döşeme gibi kendini sonsuz tekrarlar. Tuğla duvar, parke, kumaş örüntüsü gibi tile ihtiyaçları için uygundur. texture.repeat ile birlikte kullanıldığında gerçek «döşeme yoğunluğu» ortaya çıkar (bölüm 2).

THREE.MirroredRepeatWrapping (aynalı tekrar)

Her tekrarda önceki kopyanın ayna yansıması gibi ters dönmesi; birleşim (seam) çizgilerini yumuşatmak için kullanışlı bir hiledir. Doku tam seamless değilse düz RepeatWrapping’e göre daha az göze batan geçişler üretebilir.

THREE.ClampToEdgeWrapping (kenara sıkıştırma)

Varsayılan moddur: doku tekrarlanmaz; UV sınırının ötesinde son texel rengi uzatılır. Tek seferlik logo, çıkartma (decal) veya «tek parça» görsel için sık seçilir. repeat değerlerini 1’in üstüne çıkardığınızda bu mod tek başına yeterli olmaz (bölüm 2 · uyarı).

Repeat (tekrar sayısı)

texture.repeat (Vector2), dokunun yüzey üzerinde kaç kez döşeneceğini belirler; örneğin (4, 4) dört kere dört kopya demektir. Eksenler bağımsızdır: (8, 2) gibi oranlar uzun koridorlarda sık görülür.

repeat ve birim düşüncesi

Değer büyüdükçe aynı doku dosyası daha sık örneklenir; bu, çözünürlük hissi verir fakat gerçek texel sayısı değişmez — çok agresif repeat ince desenlerde aliasing artırabilir. Gerekirse Filtreleme ve doku çözünürlüğünü birlikte ayarlayın.

Önemli

repeat bileşenlerini 1’den büyük yaptığınızda (ör. 2×2), sarmalama modunu THREE.RepeatWrapping (veya gerekiyorsa mirrored) olarak ayarlamalısınız. Aksi halde doku gerçek anlamda tekrarlanmaz; çoğu kurulumda köşeye sıkışmış tek renk bölgesi görürsünüz.

Offset ve rotation: dokuyu hizalamak

Doku doğru ölçekte olsa bile bazen yanlış fazda oturur; ince ayar için offset ve rotation aynı materyal üzerinde animasyonla da birleştirilebilir (needsUpdate ve materyal güncellemesi sahne döngünüze bağlıdır).

Offset

texture.offset ile U ve V eksenlerinde kaydırma. Akan su, konveyör bandı veya hafif yüz ifadeleri için offset değerlerini kare başına artırmak yaygın bir tekniktir. Değerler normalize aralıkta düşünüldüğünde küçük kaydırmalar bile deseni gözle seçilir biçimde kaydırır.

Rotation ve pivot

texture.rotation radyan cinsinden dönüş; texture.center.set(0.5, 0.5) ile pivotu ortaya almak, aksi halde dönüşün köşeden yapılıp görüntünün sahneden «kayması»nı engeller. Dönüşten sonra hâlâ hizasızlık varsa önce UV unwrap’inizi kontrol edin (Checker testi).

Teknik kural: power of two (2’nin kuvveti)

Eski nesil GPU ve bazı özel yollarda doku boyutlarının 2’nin kuvveti (256×256, 512×512, 1024×1024 …) olması beklenirdi.

WebGL 2 ve üretim pratiği

Günümüz WebGL 2 ortamında bu her zaman zorunluluk değildir; yine de mipmapping ve örnekleme verimliliği için üretimde altın kural olarak kabul edilir.

NPOT boyutlarda repeat veya mip üretimiyle ilgili sürprizler yaşamamak için doku üretiminde boyutu bilinçli seçmek, optimizasyon sayfasındaki POT önerisiyle örtüşür (Doku optimizasyonu · POT).

Ayrıntı için: Mipmapping bölümü, NPOT (doku temelleri).

JavaScript uygulaması (Three.js)

Aşağıdaki örnek, zemin döşemesi için tipik bir kurulumu gösterir; kendi dosya yolunuz ve materyal bağınızla birleştirin. Dönüşten sonra beklenmedik kesilme görürseniz anisotropy ve filtreleri de gözden geçirin (Optimizasyon · strateji).

Örnek kod

const texture = new THREE.TextureLoader().load("floor_tiles.jpg");

// Her iki eksende tekrarlama
texture.wrapS = THREE.RepeatWrapping; // U (yatay)
texture.wrapT = THREE.RepeatWrapping; // V (dikey)

// Daha sık döşeme
texture.repeat.set(4, 4);

// 45° döndürme (radyan)
texture.rotation = Math.PI / 4;
texture.center.set(0.5, 0.5);

HoloDepth «Wrapping» checkpoint’i

Özet

Doku yerleşimi, model algısındaki kaliteyi doğrudan etkiler; yanlış wrapping yırtık veya sünmüş yüzey izlenimi verir.

HoloDepth özet stratejisi

  • Repeat varsa wrap şart: Tekrar kullanacaksanız wrapS / wrapT atamayı unutmayın.
  • Birleşimleri gizle: Doku tam seamless değilse MirroredRepeatWrapping göze batan çizgileri azaltabilir.
  • Animasyon gücü: Akan nehir veya bant için kare başına örneğin texture.offset.x += 0.01 deneyin (hızı sahneye göre ayarlayın); Offset bölümüne bakın.
  • Center ayarı: Döndürme yaparken pivot için center’ı (0.5, 0.5) yapın; aksi halde doku köşeden dönerek çerçeveden kaçabilir.

Sırada: Texture türleri

Sarma ve tekrar davranışı kanal-bağımsızdır; bir sonraki adımda her materyal kanalının ne anlattığını (albedo, normal, roughness …) Texture Türleri altındaki sayfalarla derinleştirin. Başlangıç için Albedo / Base Color uygun ilk duraktır.

Sonraki durak: Albedo / Base Color (Texture türleri).