Shader Pipeline

«Pipeline» kelimesi, verinin tek yönde aktığı sabit istasyonlar zincirini çağrıştırır. WebGL çiziminde siz yalnızca vertex ve fragment programlarını yazarsınız; arada rasterizasyon, clip testi, derinlik ve blending gibi adımlar çoğu zaman sabit donanım tarafından yürütülür. Bu sayfa, Veri akışı · §2 listesinin 3–6. maddelerini donanım isimleriyle hizalar — taşıyıcı tablosu orada kalır.

Pipeline haritası olmadan yaygın bir karışıklık oluşur: enterpolasyonu shader dosyasında aramak, derinlik sorununu fragment formülü sanmak veya raster’ı «eksik vertex aşaması» zannetmek. Önce adım listesi, sonra hangi dosyada ne yazılır sorusu netleşir.

Bu Sayfa Ne Anlatır, Ne Anlatmaz?

Anlatır: programlanabilir vertex / fragment aşamaları; raster ve sabit işlevlerin yeri; shader sonrası derinlik / stencil / blending / framebuffer; Three.js renderer.render ile pipeline ilişkisi; pipeline’a özel karışıklıklar.

Anlatmaz (bilinçli sınır):

• attribute / uniform / varying bildirimi ve üç soru — Uniforms & varyings.
• Taşıyıcıların adım adım okunması — Veri akışı · taşıyıcılar.
• Enterpolasyon sezgisi, vUv köprüsü, flat — Interpolation.
• modelMatrix, gl_Position matris zinciri — Coordinate spaces.
• Compute shader, WebGPU komut listesi — WebGPU giriş (ileride).

Seri İçindeki Yer

Vertex / fragment alt serisinde önerilen sıra: Veri akışı → Shader pipeline (bu sayfa) → Interpolation → Coordinate spaces. Önce «veri nereye akar?», sonra «donanımda hangi istasyon var?», sonra «köprü nasıl karışır?», en son «konum hangi uzayda?».

Veri akışı · §2 ile aynı kronoloji; burada her satırda «shader yazılır mı?» sorusu eklenir. Veri akışı taşıyıcı odaklıdır (attribute, uniform, varying); bu bölüm donanım istasyonu odaklıdır — hangi adım GLSL dosyasıdır, hangisi sabit GPU işidir. CPU tarafı (1–2) kısa tutulur; tampon ve draw call ayrıntısı Veri akışı · §3 bölümündedir.

Holodepth’te threejs, webgl veya html-canvas altındaki konular motor / API bağlamını anlatır; bu sayfa yalnızca vertex / fragment shader serisindeki ortak pipeline haritasıdır — sahne grafiği veya Canvas 2D çizim yolu burada açılmaz.

Kronolojik Liste (Tek Kare)

renderer.render(scene, camera) bir karede aşağıdaki sıra işler. 1–2: CPU / API; 3–6: programlanabilir veya sabit GPU; 7: fragment çıkışının ekrana yazımı.

1. CPU / Three.js — tampon ve uniform güncellemesi; henüz pipeline shader’ı çalışmaz.
2. Draw call — program, attribute bağlamaları, uniform seti sabitlenir.
3. Vertex shader — programlanabilir — köşe başına invokasyon; gl_Position ve varying çıkışları.
4. Clip / cull — sabit — ekran dışı üçgen/vertex elenir; gl_Position clip uzayında değerlendirilir ( Coordinate spaces · clip).
5. Rasterizasyon — sabit — üçgen → aday pikseller; varying enterpolasyonu ( Interpolation · raster).
6. Fragment shader — programlanabilir — aday piksel başına invokasyon; renk / derinlik çıkışı.
7. Per-fragment işlemler — sabit, yapılandırılır — derinlik testi, stencil, blending; framebuffer’a yazma ( §6).

1–2: CPU — Shader Henüz Yok

1. adımda JavaScript / Three.js geometry ve uniform değerlerini güncellersiniz; GPU’da vertex invokasyonu başlamamıştır. 2. adımda draw call seçili materyalin vertex + fragment programını, attribute tamponlarını ve uniform paketini «kilitleyerek» bir mesh çizimini başlatır — hâlâ sizin .glsl satırlarınız çalışmaz; yalnızca hangi programın çalışacağı bellidir.

Render döngüsü ByteOmi · render loop köprüsünde; draw call paketinin ne zaman hazır olması gerektiği Veri akışı · draw call paketi bölümündedir.

3–6: GPU — İki Shader, İki Sabit Ara Katman

3. adım (vertex) ve 6. adım (fragment) sizin yazdığınız GLSL’dir — WebGL tipik materyalde yalnızca bu ikisi programlanabilir. 4. adım (clip / cull) ve 5. adım (raster) shader dosyası gerektirmez; Veri akışı §2’de raster tek madde olarak geçer, burada clip ile ayrılarak sabit katman netleştirilir.

• Vertex — köşe başına bir kez; konum çıkışı gl_Position, köşe verisi varying ( Veri akışı · vertex çıkışı). Matris zinciri Coordinate spaces · uzay zinciri konusundadır.
• Clip / cull — vertex çıkışı clip testinden geçer; ekran dışı geometry elenir. GLSL’de ayrı «clip shader» yoktur.
• Raster — üçgenler piksel adaylarına bölünür; varying’ler karışır. Enterpolasyon Interpolation sayfasında; burada yalnızca pipeline sıra numarası.
• Fragment — aday piksel başına; enterpolasyonlu varying + uniform; renk ve isteğe bağlı derinlik ( Veri akışı · fragment girişi). attribute bu adımda okunamaz.

7: Shader Sonrası — Taşıyıcı Değil, Birleştirme

Fragment shader renk üretir; ekranda görünen sonuç 7. adımda şekillenir: derinlik testi örtüşmeyi keser, blending şeffaflığı karıştırır, framebuffer renk tamponuna yazar. Bu adımlar uniform veya varying taşımaz — materyal / renderer bayraklarıyla yapılandırılır ( §6). Three.js depthTest, transparent gibi API ayrıntıları GLSL giriş (Three.js) ve materyal dokümantasyonunda kalır.

Veri akışı listesiyle Hizalama

İki listeyi yan yana okuyun — aynı kare, farklı soru:

• Veri akışı 1–2 = bu sayfa 1–2 (CPU / draw).
• Veri akışı 3 = bu sayfa 3 (vertex, programlanabilir).
• Veri akışı 4 = bu sayfa 5 (raster) — Veri akışı clip’i ayrı saymaz; pipeline sayfası 4. adımda clip / cull’u sabit katman olarak gösterir.
• Veri akışı 5 = bu sayfa 6 (fragment, programlanabilir).
• Veri akışı 6 («sonrası») = bu sayfa 7 (per-fragment, sabit / yapılandırılır).

Taşıyıcıların hangi adımda okunduğu tablosu Veri akışı · taşıyıcılar bölümünde kalır — burada tekrarlanmaz. Kritik kural: 5. adım (raster) ile 6. adım (fragment) arasında yeni bir .glsl dosyası yoktur; enterpolasyon GPU’nun sabit raster aşamasındadır.

Şüphede önce Veri akışı §2’de «bu değer hangi taşıyıcı?», sonra bu listede «bu adım shader mı, sabit mi?» diye sorun. §3 bu ayrımı geneller.

WebGL 1.x tipik materyalde iki GLSL programı vardır: vertex ve fragment. Geometry shader, tessellation veya compute bu serinin dışındadır — Holodepth vertex / fragment çizimine odaklanır.

Sabit adımlar «yazılmaz» demek «önemsiz» demek değildir. Derinlik sırası, şeffaflık ve çift yüz culling görünümü çoğu zaman sabit aşama + materyal durum kombinasyonundan gelir; yalnızca fragment rengini düzeltmek yetmeyebilir.

Vertex: Köşe Fabrikası

Vertex shader’ın işi köşe başına bir kez çalışmaktır — konumu clip’e taşımak ( gl_Position), fragment’e taşınacak köşe verisini varying ile yazmak. Seyrek invokasyon; Veri akışı · seyrek vertex.

Raster: Shader Dosyası Yok

Rasterizasyon ve varying enterpolasyonu için .glsl dosyası açmazsınız. «UV enterpolasyonunu ben yazayım» düşüncesi bu aşamayı yanlış yere taşır — Interpolation · neden.

Fragment: Piksel Fabrikası

Fragment shader yoğun çalışır: her aday piksel için renk, alpha, isteğe bağlı derinlik çıkışı. Girdi enterpolasyonlu varying + uniform’dur; attribute yoktur ( Veri akışı · fragment girişi).

Draw call sonrası GPU, index veya sıralı tampondan köşeleri seçer; her köşe için vertex shader bir kez çalışır. Girdi: attribute + uniform. Çıktı: gl_Position (zorunlu) ve isteğe bağlı varying kanalları.

Konum matrisleri ve normal dönüşümü bu sayfada tekrarlanmaz — Coordinate spaces · örnek. Taşıyıcı kuralları — Veri akışı · vertex çıkışı.

Vertex çıkışı clip testine gider; ekran dışı geometry burada elenir. Clip uzayı matematiği Coordinate spaces’te «ileride» notuyla bırakılmıştır; pipeline haritasında yalnızca «clip sabit adım» olarak işaretlenir.

Clip sonrası hayatta kalan üçgenler, ekrandaki piksel ızgarasına «kaplanır». Her iç nokta için köşe varying değerleri karıştırılır — bu, Interpolation sayfasının konusudur; burada yalnızca pipeline’daki sıra numarası ve «shader yazılmaz» kuralı sabitlenir.

gl_Position.w perspektif enterpolasyonu etkiler; UV’nin uzak köşede sıkışması çoğu zaman bu yüzden beklenen davranışa yakındır ( Interpolation · perspektif, Coordinate spaces · w).

Face culling (ön/arka yüz atlama) de sabit pipeline yapılandırmasıdır — Three.js material.side ile ilişkilidir; GLSL’de ayrı bir «cull shader» yoktur. Ayrıntı ileride bu bölümde derinleştirilebilir; şimdilik «vertex sonrası, fragment öncesi sabit katman» yeterlidir.

Fragment shader renk (ve isteğe bağlı derinlik) üretir; ekrana yazım hemen bitmez. GPU, üretilen değeri mevcut framebuffer içeriğiyle karşılaştırır — derinlik testi «bu piksel daha önde mi?», blending «şeffaflıkla nasıl karışır?» sorularını yanıtlar.

Derinlik Testi

depthTest / depthWrite (Three.js materyal bayrakları) bu sabit adımı yapılandırır. «Model iç içe geçiyor» veya «şeffaf nesne arkayı kapatmıyor» şikâyetleri çoğu zaman yalnızca fragment renginden değil, derinlik sırası + çizim sırasından kaynaklanır — tam çözüm ileride bu bölümde açılabilir.

Blending ve Çoklu Geçiş

Şeffaf materyallerde objeleri arkadan öne sıralamak gerekebilir; pipeline son adımı alpha ile mevcut renge karıştırır. Bu, varying veya uniform akışından ayrı bir «çıktı birleştirme» katmanıdır.

Framebuffer

Nihai hedef: renk (ve genelde derinlik) tamponları. Post-processing veya çoklu render target aynı pipeline dilinin uzantısıdır; Holodepth vertex / fragment serisinde yalnızca «fragment çıkışı buraya gider» notu yeterlidir.

renderer.render(scene, camera) bir karede tüm görünür mesh’ler için draw call’lar gönderir. Her mesh + materyal çifti, vertex/fragment programı ve uniform setiyle pipeline’ı bir kez «doldurur». Kamera ve projection matrisleri bu paketin parçasıdır ( Coordinate spaces · uniform’lar).

ShaderMaterial / RawShaderMaterial kendi GLSL dosyanızı bağlar; standart MeshStandardMaterial gibi hazır materyaller de aynı pipeline’dan geçer — fark, sizin kod yazmamanızdır. Render döngüsü ( Render loop mantığı) her karede uniform’ları güncelleyip tekrar çizer.

WebGL bağlamı ve renderer ayarları (antialias, alpha, depth buffer) pipeline’ın önceden nasıl kurulduğunu belirler; tek bir fragment satırıyla değiştirilmez. Geniş Three.js GLSL girişi: GLSL giriş (Three.js).

Aşağıdaki liste adım karışıklıklarını vurgular. «uv fragment’te yok» gibi taşıyıcı hataları Veri akışı · hatalar ve Interpolation · hatalar bölümlerinde kalır.

• Enterpolasyonu vertex veya fragment shader’da «manuel» yazmaya çalışmak — raster sabit adımdır ( §3, Interpolation).
• Derinlik / şeffaflık sorununu yalnızca renk formülüyle çözmek — §6 sabit adımları ve çizim sırasını kontrol edin.
• Raster’ı atlayıp «vertex’ten fragment’e doğrudan» veri beklemek — arada varying enterpolasyonu şart ( Veri akışı · §2).
• Clip / NDC’yi fragment’te düzeltmeye çalışmak — konum çıkışı vertex’te gl_Position ile biter ( Coordinate spaces · gl_Position).
• Pipeline tablosunu ezberleyip taşıyıcı kurallarını atlamak — önce Veri akışı §2, sonra bu sayfa; ikisi birlikte haritayı tamamlar.

Hızlı Kontrol

Sorun hangi adımda? Köşe → vertex; üçgen içi karışım → raster (Interpolation); piksel rengi → fragment; ekrana yazım / örtüşme → §6. Sonraki konu: Interpolation.