holodepth

Three.js · Doku · PBR

Texture türleri: Metalness Map (metalik haritası)

PBR iş akışında dünyadaki maddeler kabaca iki grupta düşünülür: metaller ve metal olmayanlar (dielektrikler). Metalness map, bu ayrımı piksel bazında seçtirir: dielektrikte albedo çoğunlukla difüz renk olarak kalırken, metalde aynı kanal yansıma rengine kayar ve difüz bileşen neredeyse kapanır. Harita bir «parlaklık süsü» değil, hangi şading dalının işe konacağını belirleyen anahtardır.

Harita tipik olarak tek kanallı gri veridir: beyaz metal, siyah dielektrik; ara tonlar çoğu zaman pas, kir veya ince oksit hikâyesidir. glTF metal–rough paketinde kanal çoğu zaman R’de paketlenir; dosya renkli görünse bile motorun okuduğu tek değer gri ölçektir.

Bağlam: Albedo / Base Color, Normal map, Roughness map, MeshStandardMaterial, Environment & HDRI.

Metalik olma mantığı: 0 mı, 1 mi?

Gerçek dünyada bir madde ya metaldir ya da değildir. Bu yüzden metalness haritaları çoğu zaman siyah–beyazın en keskin olduğu dokulardır:

  • Beyaz (1,0): Yüzey tam bir metaldir. Işığın önemli kısmı yansır (specular / yansıtıcı bileşen). Albedo (renk) verisi, metalin yansıma rengini temsil etmek için kullanılır.
  • Siyah (0,0): Yüzey dielektriktir (plastik, taş, tahta). Yansımalar renksiz (enerji koruyan Fresnel davranışı) ve materyalin görünen rengi albedo dokusundan gelir.
  • Gri geçişler: Fiziksel olarak «yarı metal» bir madde nadirdir. Gri tonlar genellikle pas, toz, kir veya metal üzerindeki ince bir oksit tabakasını temsil eder.

Doku filtresi (mipmap / üç doğrusal örnekleme) keskin siyah–beyaz sınırlarda ara gri bantlar üretebilir; bu sanatsal yumuşatma için kullanılabilir ama fiziksel okumada «gerçekten iletken mi?» sorusunu dağıtmamak gerekir. Kenarları bilinçli dar geçiş ile çizmek, uzaktan bakıldığında maskeyi daha stabil gösterir.

Metallerin fiziksel davranışı

Bir yüzeyi metal olarak işaretlediğinizde, Three.js gibi motorlar aydınlatma matematiğini (Fresnel denklemleri ve enerji koruma zinciri) buna göre yeniden dengeler:

  • Diffuse neredeyse kaybolur: Metallerde ışığın yüzey altına sızıp dağılması (diffuse) neredeyse sıfırdır; ışık ya yansır ya emilir. Bu yüzden metalness = 1 iken albedo dokusu «kararmış» gibi görünebilir — çünkü o kanal artık klasik anlamda «yüzey rengi» değil, yansıma rengine yaklaşır.
  • Renkli yansımalar: Plastik bir objeye kırmızı ışık tuttuğunuzda yansıma kırmızı olabilir; beyaz ışıkta ise yansıma beyaza yaklaşır. Oysa altın veya bakır gibi metaller, beyaz ışığı bile kendi metalik renkleriyle yansıtır.

Standart metal–rough gölgelerinde enerji, yansıyan ve dağılan bileşenler arasında yeniden dağıtılır; metal bayrağı açıldığında difüzün payı düşer, speküler / çevre yansımasının payı yükselir. Bu yüzden aynı albedo rengine sahip iki küre, biri metal biri dielektrik iken yan yana koyulduğunda parlaklık hikâyesi kökten ayrılır — demo sayfadaki split modu tam bunu izole eder.

F0: dik bakış yansıması

PBR dünyasında metaller ile dielektrikler arasındaki en belirgin farklardan biri F0 değeridir — yüzeye dik bakıldığında yansıtılan ışığın oranı (basitleştirilmiş okuma).

  • Dielektriklerin çoğu yaklaşık %2–%5 bandında yansıtır.
  • Metaller ise tipik olarak %60–%100 aralığına yakın yüksek yansıtma potansiyeline sahiptir.

Metalness map, motorun bu yüksek yansıtma potansiyelini piksel bazında açıp kapatan anahtardır; gerçek fizik tablosu tabii ki materyal modelinin detayına bağlıdır.

F0 terimini IOR / dielektrik speküler rehberlerinde de görürsünüz; buradaki mesaj daha basit: metalness hangi piksellerin «yüksek F0 ailesine» taşındığını seçer. İnce ayar için bazı içeriklerde ayrıca speküler renk veya sheen gibi uzantılar bulunur — omurga yine metal–rough ikilisidir.

Teknik kurallar ve renk uzayı

Holodepth rehberinin olmazsa olmazı: Metalness map bir veri dokusudur, tablo resmi değildir.

THREE.NoColorSpace (doğrusal / veri): Metalik değer bir matematiksel katsayıdır. Haritayı sRGB gibi gama uzayında yüklerseniz gri tonlardaki doğrusal geçiş bozulur; materyal ya aşırı metalik ya da hiç metalik değilmiş gibi kararsız davranabilir.

Dışa aktarımda «fotoğraf olarak kaydet» seçenekleri maskeyi görsel olarak düzeltir gibi görünse de sayısal maskeyi bozar; JPEG blokları özellikle ince pas sınırında yalancı ara tonlar üretir. Üretimde maskeyi renk düzeltmesinden geçirmemek en güvenli yoldur. 

const metalnessTexture = new THREE.TextureLoader().load("metalness.jpg");
metalnessTexture.colorSpace = THREE.NoColorSpace; // Veri doğruluğu için şart

MeshStandardMaterial içinde metalnessMap tanımlıysa çoğu sürümde skaler metalness ile çarpımsal birleşir; harita beyazına yaklaştıkça bölge tam iletken uca gider, siyaha yaklaştıkça dielektrik uca döner. İkisini birden kullanırken motor dokümantasyonundaki tam formülü doğrulayın.

HoloDepth kritik uyarı

glTF yükleyicide çoğu kanal doğru gelir; fakat elle TextureLoader ile getirdiğiniz haritalarda renk uzayını her zaman kontrol edin.

Roughness ile ortaklık

Metalness map tek başına bir potansiyel sunar; o potansiyelin sahneye nasıl «oturduğunu» çoğu zaman roughness belirler.

  • Metalness 1 + roughness ~0: Kusursuz ayna veya cilalı krom hissi (yine de tam 0 yerine çok küçük bir roughness pratikte daha doğal olabilir).
  • Metalness 1 + roughness ~0,8: Kumlanmış alüminyum veya eski, mat bir döküm demir gibi yumuşak, dağılmış yansımalar.

Bu iki harita arasındaki denge, materyalin hikâyesini anlatır. Ayrıntılı anlatım için Roughness map sayfasına bakın.

«Parlak ama metal değil» sahnelerde (ıslak taş, vernik, cam) çoğu zaman önce roughness ve gerekiyorsa clearcoat / ikinci yüzey modeli düşünülür; metalness’i yükseltmek yanlış kısayol olur — aşağıdaki hatalar bölümündeki örneklerle aynı hatayı farklı yüzeylerde tekrarlamamak için bu sırayı ezberlemek faydalıdır.

Sık yapılan hatalar: «her şey metal değildir»

Geliştiricilerin düştüğü en büyük hata, parlak görünen her şeye metalness vermektir.

  • Islak yüzeyler: Su bir metal değildir. Islak bir taşın parlamasını istiyorsanız çoğu zaman metalness’i değil, roughness’ı (ve uygun şekilde clearcoat / katman modelini) düşünmelisiniz.
  • Boyalı metaller: Boyanmış bir araba kaportası «metalik» değildir; üstteki tabaka dielektriktir. Altındaki metal ancak çizik veya boya aşınmasıyla ortaya çıkar — haritada genelde çizik yerler beyaz (metal), boyalı alanlar siyaha yakın kalmalıdır.
  • Seramik sırlı, cilalı plastik, cam: Hepsi parlak görünebilir; çoğu durumda metalness yine sıfıra yakın kalır. Parlaklık çoğu zaman düşük roughness ve çevre yansımasından gelir, iletken yüzey simülasyonundan değil.

İnteraktif demo: split, çizik haritası, ızgara, ıslak vs metal

Bu demo harici görüntü dosyası indirmez: metalness maskeleri tarayıcıda Canvas ile çizilir; çevre yansıması için yalnızca Three.js RoomEnvironment (prosedürel sahne → PMREM) kullanılır. Üçüncü taraf stok fotoğraf / HDRI URL’lerinden fetch ile doku çekmek telif ve CORS riski taşıyabilir; bu yüzden eğitim demosunda kaçınıyoruz.

Split: iki tam küre aynı merkezde, clipping plane ile sol/sağ yarılar — aynı roughness ve albedo, yalnızca metalness farkı. Çizik: siyah = boya (0), beyaz = metal (1). 2×2 ızgara: sabit (m, r) dörtlüsü. Islak vs metal: parlaklık farklı kaynaklardan gelir.

Çizik modunda maske, tek küre üzerinde metalnessMap ile piksel başına 0→1 geçişi yapar; gradient modları aynı geometride doğrusal (NoColorSpace) ile yanlış sRGB yüklemenin etkisini yan yana okumanız için bırakılmıştır — bu ders roughness sayfasındaki «yanlış sRGB» demosu ile aynı fikri paylaşır, burada maske kanalı üzerinden tekrarlanır.

Mini demo · prosedürel harita · RoomEnvironment · clipping split —

Mod

Öne çıkan
Tam küre
Boya & çizik
Harita renk uzayı

Checklist: split modunda sol/sağ yarılar aynı renk ve roughness mu? Çizik modunda parlak çizgiler yalnızca haritada beyaz mı? Izgara hücrelerinde (1, düşük r) ile (0, düşük r) aynı «parlak» değil mi? Islak taşta metalness hâlâ 0 mı? Metalness haritaları sayfada üretilir; ağdan doku indirilmez.

Aşağıdaki tablo diagram-metalness-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 ve roughness kilidi dışındakiler kodda sabittir (moda göre üretilen mesh parametreleri ayrı satırlarda).

Bu demo’da kontrol edilenler

  • metalness-demo-mode → split, ıslak vs metal, ızgara, tam küre, boya, çizik, gradient doğrusal / yanlış sRGB
  • data-metalness-demo-lock-roughness → açıkken çoğu modda roughness 0.35 (ızgara küreleri hariç)
diagram-metalness-demo.js — Demo Sabitleri (metalness-map.html)
Sahne / rol Parametre Değer Tür
Renderer Temiz renk / ton / kırpma setClearColor(0x05060c) · ACESFilmicToneMapping · exposure 1.02 · SRGBColorSpace çıkış · localClippingEnabled = true 🔒 Sabit
Piksel oranı Math.min(window.devicePixelRatio || 1, 2) 🔒 Sabit
RoomEnvironment / PMREM Başarılı kurulum PMREMGenerator.fromScene(room, 0.04) · sahne environment + background · environmentIntensity (destek varsa) 1.35 🔒 Sabit (kod)
Yedek Hata durumunda arka plan 0x0a0c12 · ek AmbientLight(0xffffff, 0.2) 🔒 Dal (kod)
Işık + çevre katsayısı DirectionalLight Yoğunluk envOk ? 0.22 : 0.5 · konum (2.2, 3.4, 2.6) 🔒 Sabit (dal)
envMapIntensity şablonu envI = envOk ? 1.15 : 0 · ızgara hücrelerinde metal için ×1.05, dielektrik için ×0.85 · ıslak küre için ×1.25 🔒 Sabit (kod)
Paylaşılan PBR stdMat tabanı color 0xc4cad8 · başlangıç metalness 0 · başlangıç roughness 0.4 · envMapIntensity: envI (spread ile ezilir) 🔒 Sabit
Ortak roughness (kilitsiz) Çoğu modda roughnessValue(0.38) → 0.38; kilit açıkken 0.35 🔄 Kutu (ızgara hariç)
Kamera PerspectiveCamera FOV 38 · clip 0.06–40 · pozisyon (0, 0.06, 2.62) · lookAt(0, 0, 0) 🔒 Sabit
Split + tam küre + boya + gradient SphereGeometry Yarıçap 0.52 · segment (56, 36) · split: iki mesh, clippingPlanes düzlem x · clipIntersection: false 🔒 Sabit (mod)
Çizik metalnessMap Kanvas 512 genişlik/yükseklik · siyah zemin · beyaz çizgi lineWidth 10 · NoColorSpace · ClampToEdgeWrapping 🔒 Sabit (kod)
Gradient haritalar Kanvas 256×32 yatay siyah→beyaz · biri NoColorSpace, biri SRGBColorSpace 🔒 Sabit (kod)
2×2 ızgara Küre + (m, r) Yarıçap 0.2 segment (32, 22) · dörtlük: (m1 r0.05), (m1 r0.72), (m0 r0.1), (m0 r0.82) · pozisyonlar (±0.58, 0, ±0.38) 🔒 Sabit (mod)
Islak vs metal İki küre Yarıçap 0.38 segment (44, 30) · sol metalness 0 renk 0x8a9aad · sağ metalness 1 renk baseColor · roughness: kilit kapalı 0.1 / 0.32; kilit açık her ikisi 0.35 · pozisyon (±0.48, 0, 0) 🔄 Kutu + mod
HUD Mod / kilit metalness-demo-mode · data-metalness-demo-lock-roughness 🔄 Dinamik (HUD) 
// diagram-metalness-demo.js — özet (mod dalları tabloda)

renderer.setClearColor(0x05060c);
renderer.localClippingEnabled = true;
renderer.outputColorSpace = THREE.SRGBColorSpace;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1.02;

// PMREM: const rt = pmrem.fromScene(new RoomEnvironment(), 0.04);
// scene.environment = scene.background = rt.texture; environmentIntensity ≈ 1.35

const baseColor = 0xc4cad8;
const envI = envOk ? 1.15 : 0;

const dir = new THREE.DirectionalLight(0xffffff, envOk ? 0.22 : 0.5);
dir.position.set(2.2, 3.4, 2.6);

const cam = new THREE.PerspectiveCamera(38, aspect, 0.06, 40);
cam.position.set(0, 0.06, 2.62);
cam.lookAt(0, 0, 0);

HoloDepth «Metalness» checkpoint’i

Özet

Metalness, objenize ağırlık ve endüstriyel bir gerçeklik katar; yanlış kullanımı sahneyi «oyun gibi» gösteren en büyük etkenlerden biridir. İyi kalibre edilmiş bir maske, izleyiciye «bu yüzeyin altında ne var?» sorusunun cevabını tek bakışta verir.

HoloDepth özet stratejisi

İkili karar

Bir şey ya metaldir (beyaz) ya değildir (siyah). Ara tonları sadece kir ve aşınma için sakla; geniş gri alanlar genelde maske yerine roughness veya ikinci materyal ihtiyacına işaret eder.

Pas ve kir

Paslanmış bölgeler metal özelliğini kaybeder; paslı kısımları haritada siyaha yakın işle.

Doğrusal kural

NoColorSpace kullanmazsan yansımaların enerjisi yanlış hesaplanır; şüphede bu sayfadaki gradient · yanlış sRGB modunu referans al.

Albedo uyumu

Metalik bölgelerde albedo’nun yansıma rengine yaklaştığını; dielektriklerde ise kendi rengi olduğunu unutma.

Sonraki durak: geometrik olukları ve gölge «okumasını» güçlendiren Ambient occlusion haritası — metal–rough setinin sık kullanılan tamamlayıcısıdır (yansıma metalinden bağımsız, temas ve kapanım hissini taşır).