Three.js: Tarayıcıda 3D Dünyalar, WebGL & WebGPU Devrimi

Web sayfalarında sıradan 2D kutuların ve düz kaydırmaların ötesine geçmek istediğimde ilk başvurduğum şey WebGL olmuştu. Fakat doğrudan WebGL ile shader yazmaya ve matris matematiğiyle uğraşmaya kalktığımda saatlerce ekranda sadece siyah bir kutu görüp saç baş yoldum. Düşük seviyeli grafik programlama, ürün çıkarmak isteyen bir web geliştiricisi için gereksiz derecede dik bir öğrenme eğrisine sahip.

Ricardo Cabello (mrdoob) tarafından geliştirilen ve web grafik dünyasının tartışmasız standardı haline gelen three.js, tam bu noktada hayatımı kurtardı. Sahne (scene), kamera, ışıklandırma ve materyal kavramlarını öyle zarif bir JavaScript/TypeScript nesne modeline dönüştürüyor ki, birkaç satır kodla tarayıcıda dönen interaktif 3D objeler oluşturabiliyorsunuz.

Kendi Deneyimlerimde Kullandığım 4 Temel Yapı Taşı

1. 1
   Scene (Sahne): İçerisine 3D modelleri, ışıkları ve efekt parçacıklarını yerleştirdiğim sanal evren.
2. 2
   Camera (Kamera): Sahneye hangi açıdan, odak uzaklığından ve perspektiften baktığımı belirleyen bileşen (genellikle PerspectiveCamera).
3. 3
   Mesh (Geometri + Materyal): Nesnenin üç boyutlu iskeleti (Geometry) ile ışığı nasıl yansıtacağını belirleyen doku (PBR Material).
4. 4
   Renderer (İşleyici): Tüm sahneyi ekran kartına (GPU) gönderip piksel piksel ekrana çizen WebGL veya WebGPU motoru.

WebGL'den WebGPU'ya Geçerken Fark Ettiğim Değişim

Three.js son sürümlerinde WebGPURenderer desteğini standart hale getirdi. Kendi testlerimde WebGPU'ya geçtiğimde, işlemci (CPU) darboğazının kalktığını ve sahnede aynı anda yüz binlerce poligon ile compute shader parçacıklarını 60fps takılmadan oynatabildiğimi gördüm.