Holodepth • 3D Web • Donanım Felsefesi
GPU vs CPU
Aynı karede milyonlarca piksel üretmek, tek başına “hızlı JavaScript” ile çözülmez; iş bölümünü doğru kurmak, WebGL ve WebGPU’da sürdürülebilir performansın omurgasıdır. Bu sayfada CPU’yu yöneten filozof, GPU’yu ise disiplinli ordular olarak okuyup; veri köprüsünü ve shader devrini pratik kurallarla bağlayacağız.
Kaynak metin: byteomi.com • İlgili köprü sayfası: Core & Script Base
Ana konu ve kare bütçesi
3D sahneyi render etmek, her karede ekrandaki piksellerin rengini ve görünürlüğünü yeniden üretmek demektir. Hedef 60 FPS olduğunda esas mesele, her kare için ayrılan zaman penceresinde bitmesi gereken iş yığınıdır.
Bu yüzden soru “hangi işlemci daha hızlı?” değil, “hangi iş yükü hangi tarafta doğasına uyuyor?” sorusuna döner: tekil karar zinciri mi baskın, yoksa aynı işlemin binlerce kopyası mı?
“Filozof” vs “Ordular”
Mimari felsefe sade: CPU sahne durumunu yöneten tekil karar merkezidir; GPU ise aynı anda çok sayıda benzer işi yürüten yığınsal iş gücüdür. İkisini aynı ölçütlerle yargılamak tasarımı baştan kaydırır.
Web tarafında ayrım, tarayıcının ana iş parçacığında çalışan JavaScript ile grafik API’sinin (WebGL / WebGPU) oluşturduğu komut + veri sınırında belirginleşir: update (CPU) ve draw (GPU) ritmini doğru kurmadıkça akıcılık kalıcı olmaz.
CPU–GPU köprüsü (darboğaz)
En sert performans problemlerinden biri çoğu zaman saf işlem gücü değil, veri taşımadır. Geometri, indeksler ve dokular RAM’den GPU belleğine (VRAM) taşınır; sorun “köprü hızlı mı?” değil, “ne sıklıkla ve ne hacimde?” sorusudur.
İdeal tablo: çoğu şey zaten GPU’da durur; CPU yalnızca küçük parametreleri (uniform benzeri) veya seçici tampon güncellemelerini gönderir. Profilde takılma görürsen, önce “bu karede RAM→VRAM ne geçti?” diye sor.
Canlı demo: The Pixel Soldiers
Bu demo, metindeki “Filozof vs Ordular” metaforunu somutlaştırır: solda tekil karar merkezi (CPU) tek tek boyar; sağda aynı işi paralel yapan ordular (GPU) aynı anda doldurur.
Canlı demo
Sol panelde “tek usta” bir noktayı koşturur ve pikselleri tek tek yakar; sağ panelde “ordular” aynı anda uyanır ve duvar bir anda dolar. Amaç donanım gerçeğini sezgisel hale getirmek.
Not: Bu görsel bir metafordur; gerçek projelerde ayrım “iş türü + veri köprüsü + shader” üçlüsü üzerinden okunur.
Canlı demo: Data Bridge Bottleneck
Bu demo “darboğaz çoğu zaman hesap değil, taşıma” fikrini görselleştirir. Aynı işi yapmak için her karede büyük veri taşırsan, GPU boşta kalsa bile ritim bozulur.
Canlı demo
“Update data every frame” köprüyü şişirir; “Keep in VRAM” trafik disiplinini simgeler. Aşağıdaki göstergeler, kavramı hızlı okumak için basitleştirilmiş bir HUD’dur.
İpucu: Gerçekte “VRAM’de tut” demek; geometri/doku yükünü boot aşamasında yerleştirip kare içinde yalnızca küçük uniform/alt-bölge güncellemeleri göndermektir.