Holodepth • Rendering Seçimi • 2D ve 3D
Canvas vs WebGL
Tarayıcıda piksel üretmenin iki yolu vardır: Canvas 2D ile “çiz”, WebGL ile “pipeline kur”. Aynı yüzey gibi görünür; ama arka planda birinin ritmi CPU’nun seri düzenine, diğerinin ritmi GPU’nun paralel düzenine yakındır. Bu sayfada farkı “2D/3D” etiketine değil; durum modeli, veri yerleşimi ve depth/projection gibi temel kavramlara bağlayacağız.
Kaynak metin: byteomi.com • İlgili köprü: GPU vs CPU
Canlı demo: “The Painter vs. The Architect”
Önce oyna: slider’ı çek, DPR testini aç/kapat, depth’i kapat ve “neden böyle oldu?” sorusunu kafanda kur. Sonra aşağıdaki başlıklarda bunun sebebini (immediate mode, pipeline, depth/projection, state değişimi) parçalara ayıracağız.
Hero demo
Split-screen: solda “Canvas yaklaşımı” (yeniden çizim hissi), sağda “WebGL yaklaşımı” (GPU’da ikamet + küçük update). HUD metni basitleştirilmiş bir sezgi göstergesidir.
Not: “Canvas tarafı” burada gerçek 2D API değil; immediate-mode maliyet modelini (her kare yeniden üretim) temsil eden bir simülasyondur.
“Anında Mod” vs “Boru Hattı”
Canvas 2D emir bazlıdır: fillRect(), stroke(),
drawImage()
dediğinde tarayıcı o an “boyar”. Çoğu zaman sahne grafiği yoktur; transform/opacity/nesne
durumu
gibi bilgileri sen tutarsın. Animasyon demek, her kare yeniden çizim demektir.
WebGL’de amaç tek tek piksel boyamak değil; veri + shader + state ile bir boru hattı kurmaktır. Buffer’lar GPU’da ikamet eder; kare içinde çoğu zaman sadece küçük parametreler güncellenir.
Raster vs Shader mantığı
Canvas 2D çoğu zaman “raster boya” yaklaşımıdır; WebGL ise “küçük bir program yaz, bunu çok kez çalıştır” yaklaşımıdır. Aynı görünümü elde etmek için Canvas’ta daha fazla komut; WebGL’de daha az komut ama paralel yürütme ile sonuç çıkabilir.
Bu yüzden optimizasyon sırası da değişir: Canvas’ta “daha az çiz”; WebGL’de “daha az state değişimi + daha iyi veri yerleşimi”.
Depth & Projection
3D’nin kalbi “kim önde?” problemidir. Canvas 2D’de bunun karşılığı çoğunlukla çizim sırasıdır (painter’s algorithm). Karmaşık sahnelerde her kare sıralama maliyeti ve overdraw hızla büyür.
WebGL’de depth buffer donanım düzeyinde çalışır; görünmeyen fragmanlar elenir. Projeksiyon ise vertex shader içinde ölçeklenir. Bu yüzden 3D ihtiyaçlar büyüdüğünde pipeline modeli daha doğal bir zemindir.