Web3D / Grafik Engine
Three.js: Tarayıcıda 3D Dünyalar, WebGL & WebGPU Devrimi
Web grafik dünyasının efsane kütüphanesi mrdoob/three.js'in mimarisini, WebGL/WebGPU işleyicilerini ve modern web projelerinde 3D deneyim oluşturma yöntemlerini inceledik.
Ricardo Cabello (mrdoob) tarafından başlatılan three.js, tarayıcı üzerinde yüksek performanslı 3D grafikler oluşturmayı her geliştirici için erişilebilir kılan efsanevi bir JavaScript kütüphanesidir. Ham WebGL kod yazmanın karmaşıklığını ortadan kaldırarak sahne, kamera, ışık ve materyal soyutlamaları sunar.
Proje Özeti & Özellikler
| Özellik | Açıklama |
|---|---|
| Geliştirici / Oluşturan | mrdoob (Ricardo Cabello) & Topluluk |
| Depo | mrdoob/three.js |
| Render Motorları | WebGLRenderer, WebGPURenderer (Eklenti: CSS3DRenderer, SVGRenderer) |
| Yükleyiciler (Loaders) | gLTF (.gltf / .glb), OBJ, FBX, STLExporter ve daha fazlası |
| Lisans | MIT |
Three.js Temel Mimarisi
Bir Three.js sahnesi kurarken 4 temel bileşen bir araya gelir:
- 1Scene (Sahne): İçerisinde nesnelerin, ışıkların ve kameraların bulunduğu 3 boyutlu evren.
- 2Camera (Kamera): Sahneye hangi açıdan ve perspektiften bakılacağını belirleyen bileşen (ör. PerspectiveCamera).
- 3Mesh (Geometri + Materyal): Küp, küre veya özel 3D model nesnesinin biçimi (Geometry) ve yüzey görünümü (Material).
- 4Renderer (İşleyici): Sahneyi ve kamerayı alarak piksel bazlı kareler üreten WebGL / WebGPU motoru.
WebGL'den WebGPU'ya Geçiş
Three.js son sürümlerinde WebGPU desteğini standartlaştırmıştır. WebGPU, GPU donanımına doğrudan erişim sağlayarak çok daha düşük işlemci yüküyle milyonlarca poligonu ve karmaşık compute shader işlemlerini çalıştırma imkanı sunar.