Holodepth • GPU Pipeline • Shader
Shader Nedir?
Shader, JavaScript tarafında değil; doğrudan GPU üzerinde çalışan küçük bir programdır. Aynı talimat, GPU’nun binlerce çekirdeğinde paralel şekilde binlerce verteks/piksele uygulanır.
Bu sayfada vertex/fragment ayrımını, “neden shader?” motivasyonunu, GLSL değişken türlerini (uniform / attribute / varying) ve shader’ı sezgisel bir “filtre” gibi okumayı kısa ama sağlam bir çekirdeğe oturtacağız.
Kaynak metin: byteomi.com • İlgili köprüler: Canvas vs WebGL (pipeline), GPU vs CPU
Canlı demo: “The Living Sphere”
Tek küre üzerinde iki rolü yan yana oku: sol yarım küre ekranda tel/grid görünümü (vertex tarafını düşündürür); sağ yarım küre uniform zaman + UV ile renk (fragment tarafı). Vertex distortion slider’ı geometrinin “köşelerini” oynatır; nabız ve UV kayması ise fragment dünyasına bağlıdır.
Hero demo
Shader kaynakları projede sabittir; kontroller yalnızca uniform sayılarını günceller (güvenli veri yolu). Odak metnini döndürerek vertex → uniform → UV/varying mesajını sırayla gör.
ShaderMaterial; ortadaki
ayrım fragment’ta dallanma).
GPU üzerinde koşan mini program
Shader, Three.js (JavaScript) tarafında değil; doğrudan GPU üzerinde çalışan küçük bir programcıktır. GPU’nun binlerce çekirdeği, senin yazdığın bu tek programı aynı anda binlerce veri noktasına uygular.
Buradaki sezgi “ordu” metaforudur: CPU planı kurar, GPU ise aynı talimatı paralel uygular. Shader, o talimatın kendisidir. Bu yüzden shader yazmak, bazen tek satır matematikle milyonlarca pikseli yönetmek gibi hissedilir.
Vertex shader (iskeletçi)
Vertex shader, her köşe noktasının (vertex) ekranda nereye düşeceğine karar verir. Döndürme, taşıma, ölçekleme gibi dönüşümler bu aşamada köşe düzeyinde gerçekleşir; modelin iskeletini hareket ettiren el burasıdır.
Fragment shader (boyacı)
Fragment shader ise piksellerin hangi renkte olacağını belirler. Işık, gölge, yansıma ve doku gibi görüntünün derisi burada üretilir. Özetle: vertex “nerede?”, fragment “ne renk?” sorusunu cevaplar.
Bu iki rolü pipeline içinde yan yana koyunca resim netleşir: önce vertex shader köşeleri ekran uzayına taşır; GPU üçgenleri oluşturur ve ekranı piksellere böler; en sonda fragment shader her piksel için renk kararını verir.
Paralellik “bedava” değildir: shader içinde pahalı işlemler arttıkça her piksele uygulanan maliyet büyür. Shader tasarımı hem estetik hem performans dengesidir.
Three.js pratiğinde hazır materyaller aslında önceden yazılmış shader paketleri gibidir; özel efekt için çoğu zaman uniform ile zaman/mouse gönderip fragment’ta rengi, vertex’te şekli manipüle edersin. Canvas vs WebGL sayfasındaki boru hattının programlanabilir katmanı olarak da düşünebilirsin.
Neden shader kullanıyoruz?
Three.js hazır materyaller sunar (ör. MeshStandardMaterial). Ama eriyen metal, dalgalanan deniz veya parazitli hologram gibi standart dışı efektler çoğu zaman shader seviyesinde kişiselleştirme ister.
Kilit avantaj donanım hızıdır: milyonlarca pikselin rengini JavaScript ile tek tek hesaplamak main thread’i boğar; shader bu işi GPU paralelliğiyle verimli yapar.
Yaratıcılık sezgisi: Renk = f(zaman, konum) gibi bir filtreyi gerçek zamanlı sanata çevirirsin. Hazır materyaller genel kullanım için dengelidir; özel scanline, hologram paraziti veya yüzeyde akan desen için materyal ayarları yetmeyebilir — shader kendi görsel dilini yazmana izin verir.
Kişiselleştirme genelde uniform üzerinden akar: time ile dalga, mouse ile etkileşimli parazit, color ile atmosfer. Ne zaman yazmalısın? Stil ve his üretmek öncelikse shader doğru yer olabilir; yalnızca metal/roughness ayarı yapıyorsan önce hazır materyaller daha hızlı ve güvenlidir.
GLSL: üç temel kapı
Shader yazarken JavaScript değil GLSL kullanılır. Three.js’ten veri taşırken üç kanal düşünürsün:
Uniform: herkes için aynı
Zaman, mouse, ışık rengi gibi global düğmeler. Uniform değişince shader’ın ürettiği dünya bir anda ruh hâlini değiştirir.
Attribute: vertex’e özel
Konum, normal, vertex rengi gibi ham geometri verisi; vertex shader bu veriyi şekillendirir.
Varying: vertex’ten fragment’e köprü
Vertex’ten fragment’e taşınan ve piksel aralarında interpolate edilen veriler; gradyan yaymak için kullanılır.
Attribute’lar çoğu zaman BufferGeometry üzerinde yaşar; uniform her tick güncellenebilir ve render loop / requestAnimationFrame ritmiyle birlikte düşünülür. Keskin sınır istediğin durumlarda kararı fragment tarafında threshold/step ile kurmak daha kontrollü olabilir.
Matematiksel bir filtre
Shader’ı karmaşık formül yığını değil filtre olarak düşün: girişte zaman ve konum (ör. UV veya world), çıkışta renk. Karmaşıklık filtrenin detayıyla ilgilidir.
Pratik yöntem: tek parametreyi (ör. time) yavaşça değiştir, görüntünün nasıl nefes aldığını izle; sonra UV ile deseni mekâna bağla; en son mouse ile filtreyi canlandır.
Debug sezgisi: Shader’da console yok; hesapladığın bir değeri doğrudan renge map etmek (gri ton, sıcak-soğuk) hızlı teşhis yoludur.
HoloDepth Lab
Matematiğin sanata dönüşümünü daha geniş preset ve laboratuvar akışında denemek için ana sitedeki HoloDepth katmanlarına göz atabilirsin.
HoloDepth katmanları — Shader Laboratuvarı ve pixel sanatı içerikleri site haritasıyla genişlemeye devam edecek.