Three.js · Klasik aydınlatma
MeshPhongMaterial: parlak ve plastik yüzeyler
Specular highlight — bu materyalin imzası
Bir yüzey neden “plastik” gibi parlar? Işık yalnızca yüzeye çarpıp her yöne dağılmaz. Bazen,
vurduğu yüzeyin pürüzsüzlüğüne bağlı olarak belirli bir açıyla doğrudan gözünüze geri yansır.
İşte o göz alan keskin ve parlak leke (specular highlight),
MeshPhongMaterial'in imzasıdır. Nesnenizde ışığın vurduğu yerde parlayan bir
nokta göremiyorsanız, büyük olasılıkla
MeshLambertMaterial
kullanıyorsunuzdur.
Highlight’ın konumu kamera ve ışık açısına bağlıdır; bu yüzden Phong ile
“canlı” bir yüzey hissi oluşur — aynı geometri, Lambert’te daha statik okunur.
Önkoşul: MeshLambertMaterial (mat difüz); isteğe bağlı ışıksız referans MeshBasicMaterial. Fiziksel metal ve çevre yansıması için MeshStandardMaterial. Kavramsal çerçeve: Materyal giriş. Teknik özet tablo: Lambert · Phong · Standard. Sayfa sonunda özet ve komşu ders bağlantıları.
Nasıl düşünmelisin?
Işığı ikiye ayır
- Diffuse (dağılan)
- Yüzeyin her yerini aydınlatan, ana rengi veren ışık.
- Specular (sıçrayan)
- Yalnızca belirli bir açıyla gözünüze çarpan, o parlak beyaz noktayı oluşturan ışık.
Bu ikiye ayırma, shader’da “önce mat taban rengi, üzerine parlak ekle” düşüncesine denk gelir. Lambert’te ikinci terim fiilen kapalıdır; Phong’ta ise specular kanalı devreye girer ve izleyiciye “bu yüzey pürüzsüz, ışığı geri veriyor” mesajını verir — gerçek dünya aynası değil, bilgisayar grafiği geleneğinde kabul görmüş bir kısayoldur.
Çalışma mantığı: piksel seviyesinde aydınlatma
Lambert'tan en belirgin fark, aydınlanmanın piksel seviyesinde işlenmesi (Phong shading yaklaşımı).
- Pürüzsüz geçişler: Işık ve gölge geçişleri Lambert'e göre daha yumuşak ve “yuvarlak” okunur.
- Specular highlight: Işığın vurduğu yerdeki parlak leke bu materyalin imzasıdır; lekenin boyutu ve şiddeti yüzeyin ne kadar pürüzsüz göründüğünü hissettirir.
Piksel başına hesaplama, çoğu zaman Lambert’e göre daha pahalıdır; karşılığında ise yüzeydeki ince gölge geçişleri ve highlight sınırları daha temiz okunur. Bu yüzden Phong, “bir üst görsel adım” olarak düşünülür — özellikle tek ışıklı ürün vitrinlerinde veya eğitim sahnelerinde.
Üretimde Phong’u seçerken soru şudur: “Metalik–roughness tabanlı PBR şart mı, yoksa kontrollü bir parlak leke yeterli mi?” İkinci cevap evetse Phong hâlâ geçerli bir araçtır; birinci cevap evetse Standard / Physical tarafına geçiş planlanmalıdır.
Parlaklık nasıl kontrol edilir?
Yüzey karakterini specular ve shininess birlikte belirler:
Shininess · specular
- Düşük shininess: Geniş, yumuşak, yayılmış parlaklık lekesi (ör. mat plastik).
- Yüksek shininess: Küçük, keskin, yoğun parlaklık noktası (ör. bilardo topu).
- Specular renk: Lekenin rengi; çoğu zaman beyaza yakın tutulur çünkü ışığın rengini yansıtır.
shininess değerini oynarken lekenin alanı değişir; çok yüksek
değerlerde leke neredeyse noktasal hale gelir ve kamera hareketinde “kaygan” bir parlama
oluşur. specular rengini renkli tutmak (ör. sıcak altın tonu) plastik yerine
laklı ahşap gibi stilize malzemeler için kullanılabilir — yine de bu, PBR’deki
fresnel ve metal tabakası değildir.
Specular aslında nedir?
Kritik teknik bilgi
Specular bir yansıma değildir. Işığın yüzeyden belirli bir açıyla geri dönmesinin matematiksel bir simülasyonudur. Nesne, parlak nokta ile “ben pürüzsüzüm” der; çevreyi ayna gibi göstermez. Bu bir optik hiledir.
Bu ayrımı kavramak, “neden Phong ile metal görünümü tatmin etmedi?” sorusunun cevabıdır: metalik görünüm çoğu zaman çevre yansıması, Fresnel ve enerji dağılımı ister. Phong specular’ı ise sahneyi aynalamaz; yalnızca ışık kaynağına göre konumlanan bir parlaklık ekler. Mikro yüzey detayını doku ile taklit etmek (ör. normal map) ayrı bir konudur ve yine PBR düşüncesinden farklı bir sözleşmedir.
İnteraktif: “Parlama testi”
Aşağıdaki sahnede Phong küre ile aynı gövde renginde
Lambert
referansı yan yana durur; shininess ve ışık yönü sürgüleri highlight’ı
hareket ettirir. Üstteki kısa metin (readout) anlık parametreleri
özetler; ayrıntılı davranış figür altındaki özetle birlikte okunmalı; ölçüler
demo sabitleri
tablosunda diagram-phong-material.js ile eşlenir.
Sarı küre ve ArrowHelper (çekirdek three içinde, ek modül
isteği yok): ışığın nereden geldiği (yön = highlight’ın
nereye düşeceği). Işık yönü (°) sürgüsü ışığı yörünge üzerinde döndürür;
Phong’daki parlak leke küre üzerinde kayar — sabit texture değil,
ışığa bağlıdır. shininess lekenin boyutunu/keskinliğini değiştirir. Sağda
düşük segmentli Lambert aynı gövde renginde; mat difüz, parlak leke yok.
Doku / harici URL yok.
Demo sabitleri tablosu (Parlama testi)
initPhongDemo · Phong ana küre, düşük segmentli Lambert referans küre, zemin
düzlemi, yönlü ışık yörüngesi, ArrowHelper ve ışık konumunu işaretleyen küçük
Basic küre; gölge haritası yok.
| Sahne / rol | Parametre | Değer | Tür |
|---|---|---|---|
| Renderer | WebGLRenderer |
antialias: true · alpha: false ·
powerPreference: high-performance ·
setPixelRatio(min(dpr, 2)) · SRGBColorSpace · arka
plan
0x05060c · gölge yok
|
🔒 Sabit |
| Izgara | GridHelper |
boyut 14 · bölüm 28 · renkler
0x3a4a6a / 0x1a2030 · y = -0.52
|
🔒 Sabit |
| Zemin | MeshLambertMaterial / PlaneGeometry |
16×16 · renk 0x141c2e ·
rotation.x = -π/2 · y = -0.52
|
🔒 Sabit |
| Gövde rengi (ortak) | body |
0x3d78b8 (Phong ve Lambert referansta color) |
🔒 Sabit |
| Ana küre | MeshPhongMaterial |
specular 0xffffff · başlangıç shininess 80 ·
emissive 0x040810 · emissiveIntensity 0.04 ·
SphereGeometry(1, 40, 40) · konum (-0.38, 0.62, 0)
|
🔒 + ↔ UI |
| Lambert referans küre | MeshLambertMaterial |
aynı color · emissive 0x000000 ·
emissiveIntensity 0 · yarıçap 0.38 · segment
16 · konum (1.88, 0.62, 0.55)
|
🔒 Sabit |
| Ortam ışığı | AmbientLight |
0xffffff · 0.17 |
🔒 Sabit |
| Yönlü ışık | DirectionalLight |
0xffffff · intensity 1.28 · hedef
Object3D konumu (0.15, 0.58, 0) · konum
placeLight(θ) ile: yörünge yarıçapı 5.85, yükseklik
2.52, başlangıç açısı HTML 79°
|
🔒 + ↔ UI |
| Işık oku | ArrowHelper |
renk 0xffb060 · baş 0.26 / 0.15 · gövde
uzunluğu mesafeye göre (yaklaşık min(1.5, dist×0.42)) |
🔒 Sabit |
| Işık gizmo | MeshBasicMaterial / küre |
yarıçap 0.13 · renk 0xffe8b8 ·
emissive 0xffaa44 · emissiveIntensity 0.9 · konum =
yönlü ışık konumu
|
🔒 + dinamik |
| Kamera | PerspectiveCamera |
FOV 42 · yakın/uzak 0.06 / 80 · konum
(0.5, 1.32, 5.35) · lookAt(0.12, 0.55, 0)
|
🔒 Sabit |
| OrbitControls | damping / mesafe | enableDamping · 0.06 · hedef
(0.12, 0.55, 0) · mesafe 2.4…14
|
🔒 Sabit |
| HTML · Shininess | type="range" |
aralık 1…200 · adım 1 · varsayılan 80
|
🔒 + ↔ UI |
| HTML · Işık yönü | type="range" |
aralık 0…360 · adım 1 · derece · varsayılan
79
|
🔒 + ↔ UI |
Önemli kod kesiti
Kaydırıcılar shininess değerini 1…200 aralığına yuvarlar ve
yönlü ışığı yörünge üzerinde konumlandırır; readout metni highlight
genişliğine göre kısa bir ipucu (geniş leke / orta highlight /
keskin nokta) ekler.
function apply() {
const s = shine ? Number(shine.value) : 80;
phongMat.shininess = Math.max(1, Math.min(200, Math.round(s)));
phongMat.needsUpdate = true;
const ang = lightAngle ? Number(lightAngle.value) : 79;
placeLight(ang);
if (readout) {
const hint =
phongMat.shininess < 40
? "geniş leke"
: phongMat.shininess < 110
? "orta highlight"
: "keskin nokta";
readout.textContent = `Işık ${Math.round(ang)}° — Phong lekesi küre üzerinde kayar (sabit değil). Shininess ${phongMat.shininess} (${hint}). Lambert'te parlak leke yok.`;
}
}Kullanım alanları: neden Phong seçilmeli?
PBR (MeshStandardMaterial) kadar ağır olmayan ama Lambert kadar donuk durmayan
orta yol:
- Plastik ve cilalı yüzeyler: Oyuncaklar, elektronik kasalar, cilalı mobilya.
- Sıvılar: Su damlası veya ıslak yüzey parlaması.
- Performans odaklı mobil: Standard / Physical maliyetini taşıyamadığınız ama görsellikten ödün vermek istemediğiniz sahneler.
Phong’u seçmemek için de iyi nedenler vardır: çok ışıklı sahnelerde her ışık için specular hesapları birikir; malzeme gerçekçiliği “fotoğraf gibi” olmalı diyorsanız PBR daha doğru dildir. HoloDepth yaklaşımında Phong sık sık ara katman veya öğrenme basamağı olarak kalır.
Teknik karşılaştırma: hangi materyal?
Tablo üç aileyi karakter ve görsel etki üzerinden kısaltır; parametre listesi değildir. Lambert → Phong geçişi “matlıktan kontrollü parlama çıkışı”, Phong → Standard geçişi ise “stilize parlaklıktan fizik tabanlı materyale” sıçraması olarak düşünülebilir.
Özet
Yaygın hata: specular metal değildir
Parlak ≠ metal
Parlak görünen her şey metal değildir. Phong'daki parlaklık yalnızca ışığın yansıma hisidir. Metalik yüzey için ışığın geri sekmesi yetmez; yüzeyin ışığı yansıtma biçimi PBR ile değişir. Phong plastik parlaklık verir, fiziksel metal dokusu vermez.
Üretimde bu yanılgıyı önlemek için: önce malzeme referansını netleştirin (plastik mi,
alüminyum
mu, boyalı metal mi). Plastik veya cilalı organik yüzeylerde Phong hâlâ işe yarar; “HDR
ortamında krom” beklentiniz varsa Standard / Physical ve scene.environment
tarafına geçin.
Uygulama: parlak bir bilardo topu
Aşağıdaki örnek, koyu gövde + gri tonlu specular ile “bilardo topu” hissini verir;
shininess lekenin keskinliğini kontrol eder. Gerçek bir ürün görselinde
renk uzayı, gölge haritası ve çevre yansıması ayrıca ele alınır — burada yalnızca API
şeklini ve Phong’un üç ana rengini (color, specular,
emissive) hatırlatmak yeterli.
// Parlak ve cilali bir materyal kurulumu
const phongMaterial = new THREE.MeshPhongMaterial({
color: 0x0a0a0a, // Ana govde (siyah bilardo topu)
specular: 0x444444, // Parlamanin rengi (gri tonlar dogal durur)
shininess: 100, // Yuksek = daha parlak, daha keskin leke
emissive: 0x000000 // Kendi yaydigi isik (varsayilan kapali)
});
const sphere = new THREE.Mesh(new THREE.SphereGeometry(1, 32, 32), phongMaterial);
scene.add(sphere);Holodepth üretim içgörüsü
Öğrenme basamağı, performans kurtarıcısı
MeshPhongMaterial çoğu modern web projesinde ana materyal değildir; yerini
Standard'a bırakmıştır. Yine de özellikle mobilde çok nesneli sahnelerde GPU yükünü
düşürürken parlamalarla “3D derinlik” hissini korumak için güçlü bir seçenektir.
Öğrenmek için bir basamak, performans için bir kurtarıcıdır.
İçerik haritasında Phong’u “geçici çözüm” olarak değil, bilinçli ara katman olarak konumlandırın: yakın çekimde Standard, uzak kütlede Phong + düşük çözünürlük gibi hibritler sık görülür. Bu disiplin, hem FPS hem de sanat yönetimini aynı masada tutar.