holodepth

Three.js · Doku · PBR

Texture türleri: Roughness Map (pürüzlülük haritası)

PBR’de gözün «parlaklık» dediği şeyin çoğu aslında yansımanın ne kadar odaklı olduğudur; gerçek dünyada ise neredeyse hiçbir yüzey tek bir noktadan gelen ışığı bıçak gibi geri vermez. Roughness map, bu dağılımı piksel başına tarif eder: düşük değerde speküler dar bir koni gibi kalır; yükseldikçe aynı çevre yansıması genişleyip yumuşar — yüzeyin hikâyesi böylece ışıkla okunur.

Harita çoğu zaman tek kanallı gri veridir; modern metal–rough akışında beyaz «daha mat», siyah «daha parlak / keskin yansıma» eğilimini temsil eder. Aynı kanal bazen yalnızca kırmızı (R) bileşeninden okunur; dosya gri görünse bile dışa aktarım ayarlarını kontrol etmekte fayda var.

Bağlam: Albedo, Normal map, Environment & HDRI.

Roughness mantığı: siyah ve beyaz

Haritadaki her piksel, o texel’deki mikro ölçekli pürüzlülüğün istatistiksel genişliğini kodlar; değer tek yönlü gider (düşükten yükseğe «daha dağınık yansıma») — bu yüzden sanatçılar için sezgisel bir kaldıraçtır.

  • Siyah (roughness ≈ 0): Yüzey neredeyse kusursuz pürüzsüz kabul edilir; speküler yansıma keskin ve odaklıdır (ayna hissi).
  • Beyaz (≈ 1): Yüzey aşırı pürüzlüdür; ışık çarpınca geniş bir kümeye dağılır — mat, yansıması zayıf bir okuma.
  • Gri ara tonlar: Gerçekçilik çoğu zaman buradadır: örneğin camda parmak izi veya hafif çizik, haritada daha açık gri (daha pürüzlü); temiz alan daha koyu (daha pürüzsüz) kalır.

UV ölçeği burada da belirleyicidir: aynı gri değer, haritayı çok büyütünce ince taneli gürültü, çok küçültünce tek renkli «ortalama matlık» gibi okunur. Bu yüzden roughness’ı yalnızca sayısal aralıkla değil, metre başına tekrar ile düşünmek iyi bir alışkanlıktır.

Mikro faset teorisi (microfacet theory)

Düşük poligon bir ağ çizerken, gözün göremediği ölçekte yüzey yine de minik yansıtıcı parçacıklar (mikro faset) gibi davranır; roughness bu faset ailelerinin ne kadar dağınık olduğunu parametreler.

  • Bu fasetlerin normalleri aynı yönde hizalıysa yüzey pürüzsüz okunur.
  • Normaller dağınıksa ışık farklı açılara kırılır ve yüzey pürüzlü algılanır.

Normal map geometrik eğimi görünür normallerle kandırırken, roughness map speküler lobun genişliğini kontrol eder; ikisi birlikte «şekil + parlaklık dokusu» verir, birbirinin yerine geçmez.

Standart PBR gölgelerinde bu dağılım genellikle GGX gibi bir normal dağılım fonksiyonu (NDF) üzerinden okunur. Roughness map o fonksiyonda «şiddet» kadranı gibi davranır; motor her texel için yansımanın ne kadar bulanık / keskin olacağını buradan türetir.

IBL ve roughness ilişkisi

Environment & HDRI ile roughness doğrudan bağlantılıdır: çevre haritası kullanıldığında motor, yansımayı tipik olarak ön filtrelenmiş çevre (PMREM vb.) üzerinden örnekler ve roughness arttıkça daha bulanık (düşük frekanslı) seviyelere kayar.

Pratikte bu, aynı HDR dosyasında gökyüzü detayının küçük bir yansımada «tek tek» okunmasından, yüksek roughness’ta geniş renk lekeleri haline gelmesine kadar gider — izleyici farkı yüzeyde değil, yansıma penceresinde hisseder.

Doğrudan ışıklar da speküler üretir; fakat roughness farkını en net gösteren genelde çevre kaynaklı spekülerdir. Bu yüzden haritayı yalnızca tek renkli fill ışıkta değil, mümkünse IBL altında kalibre edin.

Teknik kurallar ve renk uzayı

Roughness map bir veri dokusudur, tablo resmi değildir. sRGB gama ile «süslemek» matematiksel 0,5 gibi orta değerleri kaydırır; sonuç beklenenden fazla parlak veya fazla mat olabilir.

Dışa aktarımda «görüntü olarak kaydet» seçenekleri, dosyayı tarayıcıda sRGB sanmanıza yol açar; JPEG sıkıştırması da kenarlarda istemeden kontrast üretebilir. Üretim hattında «veri / non-color» etiketiyle ilerlemek en güvenli yoldur.

  • THREE.NoColorSpace: Piksel değerini doğrusal ölçek olarak yorumlatın; böylece 0,5 gerçekten «orta pürüzlülük» kalır. 
const roughnessTexture = new THREE.TextureLoader().load("roughness.jpg");
roughnessTexture.colorSpace = THREE.NoColorSpace; // kritik

MeshStandardMaterial içinde roughnessMap kullanırken roughness çoğu zaman çarpan olarak davranır; harita + skaler kombinasyonunu sürüm dokümantasyonuna göre kontrol edin.

Glossiness ile karıştırılmamalı

Eski nesil içeriklerde glossiness haritası görülebilir; bu, roughness’ın ters işaretlidir:

  • Glossiness: Beyaz ≈ parlak, siyah ≈ mat.
  • Roughness (modern): Beyaz ≈ mat, siyah ≈ parlak yansıma eğilimi.

glTF 2.0 metal–rough paketinde yol roughness tarafıdır; Specular–Glossiness uzantısı veya eski motorlarla karşılaşırsanız dönüşümü tek kanal ters çevirme + elden gamma düzeltmesi ile planlayın — otomatik «tek tık» her zaman renk uzayını taşımaz.

HoloDepth ipucu

Elinizde yalnızca glossiness haritası varsa, görüntü işlemede kanalı ters çevirerek (invert) roughness için başlangıç oluşturabilirsiniz; ardından değer aralığını sahneye göre elden geçirin.

Detayda kusurluluk: kir ve aşınma

Nesneyi «dijital plastik»ten çıkaran şey çoğu zaman kusurlardır: tam 0 roughness’lı metal ender gerçekçi durur.

Sürtünme izleri, toz birikimi, hafif oksidasyon gibi bölgeleri haritada farklı gri tonları ile ayırmak, ışığın yüzey üzerinde küçük bir hikâye anlatmasını sağlar — yansımalar tek düze değil, yer yer kırılır.

Aynı kusuru bazen albedo’da solukluk, normal’da mikro çizgi olarak da verirsiniz; roughness ise parlaklık hattını oynatır. Böylece izleyici «kirlendi ama rengi aynı» gibi inandırıcı okumalar alır.

İnteraktif demo: metal küre + HDRI / çevre yansıması (IBL)

Roughness farkı, yansıma bulanıklığı olarak en net scene.environment (gerçek HDRI veya eşdeğeri IBL) altında görünür: yansıma yoksa blur da yoktur. Bu demo önce RGBELoader ile Poly Haven CC0 bir .hdr indirip PMREM ile çevre haritası üretir; ağ veya CORS engellenirse otomatik olarak Three.js RoomEnvironment yedeklenir.

Geometri küre (SphereGeometry, hafif scale ve position.y): çevre yansıması düz panele göre daha okunur. PerspectiveCamera fov 35, z ≈ 2.72 ile küre kareyi doldurur; arka planda ekstra mesh yok — sadece küre + IBL. Malzeme metalness = 1; zayıf bir DirectionalLight (0.2) formu destekler. Modlar yalnızca roughness / haritayı değiştirir.

Gradient ve yanlış sRGB modları, aynı geometride iki farklı ders verir: birincisi tek nesnede speküler genişliğinin uzamsal değişimini, ikincisi renk uzayı hatasının orta tonlarda nasıl «plastik» hissettirdiğini gösterir.

Mini demo · HDRI (RGBE) + yedek RoomEnvironment · küre · PerspectiveCamera 35° · metalness 1 —

Mod

Sabit roughness
Harita
Hata

Checklist: scene.environment dolu mu? metalness === 1 mi? Küre yüzeyinde çevre yansıması okunuyor mu? Roughness arttıkça yansıma bulanıyor mu? Gradient modunda tek nesnede soldan sağa spektrum görünür. HDRI yüklenemezse yedek RoomEnvironment ile aynı fikir korunur. HDRI: Poly Haven «Spruit Sunrise» (CC0).

Aşağıdaki tablo diagram-roughness-demo.js içinde bu demo için gerçekten kullanılan sabitleri özetler; «öneri» değil, dosyadaki değer kaydıdır. Tür sütunu: mod radyosu dışındakiler çekirdek sahne için sabittir; çevre kaynağı satırı HDRI yüklenince / yedek RoomEnvironment ile dallanır.

Bu demo’da kontrol edilenler

  • roughness-demo-mode → sabit roughness (r0 … r1), gradient harita (map), yanlış sRGB (wrong_srgb)
diagram-roughness-demo.js — Demo Sabitleri (roughness-map.html)
Sahne / rol Parametre Değer Tür
Çevre (IBL) Birincil HDRI HDR_URL → Poly Haven «Spruit Sunrise» 1k (RGBELoader + PMREMGenerator.fromEquirectangular) · başarılıysa environmentIntensity (destek varsa) 1.5 · renderer.toneMappingExposure = 0.92 🔒 Sabit (ağ)
Yedek / hata RoomEnvironment · fromScene(..., 0.04) · envMapIntensity çarpanı 1.95 · ton exposure 1.0 · arka plan yedeği 0x0a0c12 · AmbientLight(0xffffff, 0.18) 🔒 Dal (kod)
Renderer Temiz renk / ton (başlangıç) setClearColor(0x03040a) · ACESFilmicToneMapping · exposure 1.0 (HDR yolunda üstteki gibi 0.92’ye çekilir) · SRGBColorSpace çıkış 🔒 Sabit + dal
Piksel oranı Math.min(window.devicePixelRatio || 1, 2) 🔒 Sabit
Işık DirectionalLight Yoğunluk envOk ? 0.2 : 0.55 · konum (2.4, 3.2, 2.2) 🔒 Sabit (dal)
Küre + materyal SphereGeometry / yerleşim Yarıçap 0.55 · segment (64, 40) · position.y 0.44 · scale 1.1 🔒 Sabit
MeshStandardMaterial (taban) color 0xe8eaf2 · metalness 1 · başlangıç roughness 0.5 · envMapIntensity 0 / 1.3 (HDR) / 1.95 (Room) 🔒 Sabit (dal)
Gradient roughness map Kanvas 320×24 · yatay siyah→beyaz · biri NoColorSpace, biri SRGBColorSpace 🔒 Sabit (kod)
scene.environmentRotation map veya wrong_srgb modunda Euler(0, π/4, 0); aksi (0, 0, 0) 🔄 Dinamik (HUD)
Mod dalları (roughness-demo-mode) Sabit roughness r0 → 0.04 · r025 → 0.25 · r05 → 0.5 · r075 → 0.75 · r1 → 1 🔄 Dinamik (HUD)
Harita modları map / wrong_srgb → roughnessMap ilgili doku · roughness 1 🔄 Dinamik (HUD)
Kamera PerspectiveCamera FOV 35 · clip 0.08–50 · pozisyon (0, 0, 2.72) · lookAt(0, 0.44, 0) 🔒 Sabit
HUD input[name="roughness-demo-mode"] r0 · r025 · r05 (varsayılan) · r075 · r1 · map · wrong_srgb 🔄 Dinamik (HUD) 
// diagram-roughness-demo.js — özet (çevre yükleme ve mod dalları tabloda)

const HDR_URL =
  "https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/1k/spruit_sunrise_1k.hdr";

renderer.setClearColor(0x03040a);
renderer.outputColorSpace = THREE.SRGBColorSpace;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1.0; // HDR yolunda 0.92

const geo = new THREE.SphereGeometry(0.55, 64, 40);
const mat = new THREE.MeshStandardMaterial({
  color: 0xe8eaf2,
  metalness: 1,
  roughness: 0.5,
});

const cam = new THREE.PerspectiveCamera(35, 1, 0.08, 50); // setSize: cam.aspect = vw / max(vh,1)
cam.position.set(0, 0, 2.72);
cam.lookAt(0, 0.44, 0);

HoloDepth «Roughness» checkpoint’i

Özet

Roughness, sahnedeki ışığın yumuşaklığını ve nesnenin dokusal tarihini belirleyen ana kollarından biridir. Doğru kurulduğunda izleyici yüzeyi okumadan önce yansımayı okur; yanlış kurulduğunda ise aynı model «ya cam gibi ya kauçuk gibi» iki uca sıkışır.

HoloDepth özet stratejisi

Saf uçlardan kaçın

Pratikte sık sık 0,05–0,95 bandı daha doğal durur; tam 0 veya 1 yalnızca bilinçli stilizasyon için kullanılmalıdır.

Kontrast kullan

Koyu ve açık bölgeler arasında fark yaratın; yansımalar dinamikleşir; düz gri harita, IBL altında bile sahneyi düzleştirir.

Doğrusal kural

NoColorSpace atlarsanız materyal kolayca plastikimsi kalır; şüphede kalan dosyayı bu sayfadaki yanlış sRGB moduyla karşılaştırın.

Environment

Roughness testini mümkünse iyi bir HDRI / çevre haritası altında yapın; üretimde kullanacağınız çevre ile kalibre etmek ton sürprizlerini azaltır.

Sonraki durak: metal–rough çiftinin diğer kolu olan Metalness map — hangi bölgelerin iletken / yalıtkan davranacağını ve dolayısıyla F0 ile speküler hikâyeyi belirler.