Holodepth • Ekosistem & Mimari • Three.js
Three.js
Three.js, WebGL’in düşük seviye detaylarını soyutlayıp “sahne kurma” dili sunar. Bir sahne oluşturur, kamera koyar, ışık eklersin; modelleri yükler ve renderer ile ekrana basarsın.
Bu sayfada WebGL vs Three.js farkını, Scene / Camera / Renderer / Mesh felsefesini, ekosistem gücünü ve HoloDepth’te neden Three.js seçtiğimizi sezgisel şekilde kuracağız.
Kaynak metin: byteomi.com • Köprüler: Canvas vs WebGL, GPU vs CPU
Canlı demo: “The Holographic Architect”
Dörtlüyü sahne üstünde hisset: Scene (dünya), Camera
(bakış),
Renderer (motor), Mesh (geometri + materyal). Kenar
çizgileri
geometriyi “iskelet” gibi okutur; cam hissi materyal katmanıdır. Turuncu ok, kameranın
baktığı
yönü gösterir (FOV değişince uzunlukla “mercek” hissi verilir; frustum çizimi için addons
yerine
çekirdek ArrowHelper kullanılıyor — CDN’den ek modül indirilmez).
Hero demo
Başlangıçta sahne kapalıdır — Scene = evren: “Sahne: Açık” ile dünyayı oluştur. Sonra FOV ile merceği genişlet/daralt, wireframe ile geometriyi öne çıkar. HUD bu kareden dönen özet sayaçları gösterir.
Draw calls: bu karede yaklaşık kaç kez çizim çağrısı yapıldığının özeti. Üçgen: GPU’ya bu karede yaklaşık kaç üçgen gönderildiğinin özeti.
Scene = evren: şu an kapalı. “Sahne: Açık”a bas — dünya oluşur.
Soyutlamanın gücü: WebGL vs Three.js
WebGL: tuğlayı da sen karıştırırsın
WebGL ile çalışmak, duvarı tuğla tuğla örerken çimentonun kimyasını da düşünmeye benzer: shader’lar, buffer yönetimi, matris çarpımları, ışık hesapları senin sorumluluğundadır. Düşük seviye güç sınırsız kontrol verir; giriş bariyerini yükseltir — tek üçgen için bile ciddi kurulum ve debug gerekir.
WebGL bir state machine gibidir: hangi program (shader), hangi buffer, hangi ayarlar (blend, depth, cull, viewport) aktif — her karede doğru kombinasyonu kurarsın. Hata çoğu zaman “matematik yanlış”tan çok yanlış state’ten çıkar.
Three.js: mimariye odaklan
Three.js hazır bir iskelet sunar: sahne kurar, ışık eklersin, kamera seçersin, modeli yüklersin. “Piksel üretmek” yerine “dünya kurmak” üzerine düşünürsün. State karmaşasını senin yerine yönetir; materyale uygun shader varyasyonları, kamera/projection, viewport ve pixel ratio akışı daha doğal hale gelir.
Günlük pratikte: WebGLRenderer çizimi yönetir, Scene
grafiği tutar,
Camera bakışı üretir; modeller genelde BufferGeometry +
Material birleşiminden oluşur. İhtiyaç olursa ShaderMaterial ile
tekrar
WebGL seviyesine inersin.
Trade-off: Three.js hızlandırır; “neden böyle render ediyor?” cevabı bazen WebGL tarafında gizlidir. İleri seviyede GPU vs CPU ve Matrix ile okumak debug’ı az sürprizli yapar. Kaçış kapısı: Shader Nedir? köprüsü. Pipeline sezgisini Canvas vs WebGL ile pekiştir; ritim için Render Loop Mantığı ve requestAnimationFrame.
Sahne üstünde düşünmek: sinema seti felsefesi
Scene evrendir, Camera bakıştır, Renderer görüntüyü üreten motordur, Mesh geometri + materyalden oluşan varlıktır. Bu dörtlüyü ayırınca debug kolaylaşır: sorun sahnede mi, kamera görüyor mu, materyal/ışık doğru mu?
Tek karede zihin modeli: sahne grafiğinde dönüşümler hesaplanır; renderer sahneyi seçilen kamera ile dolaşır; görünür mesh örnekleri için çizim komutları üretilir. Dünya durumu + bakış + projeksiyon = ekran.
Sahne bir liste değil hiyerarşidir: parent/child zinciri,
matrixWorld
birikimi üretir. “Objeyi oynattım ama yanlış yerde” hissi çoğu zaman grafiğin kuruluşundan
gelir.
Koordinat Sistemleri ile
birlikte oku.
HoloDepth bağı: bu dörtlü, Core & Script Base akışının omurgasıdır — çekirdek sahneyi ve render yaşam döngüsünü taşır, script davranışı katmanlar.
Neden endüstri standardı? Ekosistem gücü
Three.js yalnızca “kolay” olduğu için değil; devasa ekosistem sunduğu için standart hale geldi. Hazır geometriler, PBR materyaller, glTF akışı, loader’lar, kamera kontrolleri ve dokümantasyon ilk prototipe giden yolu kısaltır.
“Standart” olmanın pratik karşılığı taşınabilirliktir: glTF ile model/materyal/animasyon paketini tasarım aracından web’e taşımak mümkün olur; ekipler arasında ortak dil üretir.
Matematik kütüphanesi (vektör, matris, quaternion) zor kısımları sadeleştirir; topluluk görsel ve performans sorunlarında hızlı çözüm sunar. Üçüncü parti araçlar çoğu zaman Three.js sahne modeline yaslanır — öğrendiğin kavramlar transfer edilebilir.
Gerçekçi not: sınır hâlâ tarayıcı ve WebGL gerçeğidir — bellek, shader maliyeti, mobil GPU farkları sihirli çözüm değildir. Vector Mantığı ve Matrix omurgayı güçlendirir.
HoloDepth mimarisi için önemi
HoloDepth’te Three.js’i seçmemizin nedeni: hazır araçlar ile derin kontrol arasında iyi köprü olması. Hızlı sahne kurarsın; istediğinde shader ve matris seviyesine iner, performans zincirini bilinçli yönetirsin. Öğretimde görsel sonuç ile alt mekanizma arasında gidip gelebilirsin.
“Boş ama güçlü” dünya: çekirdek sade kalır; üstüne script, preset ve deney katmanları eklenir. Boş olmak dayatılmış oyun döngüsü değil; kendi kural setini tanımlaman için minimal zemin demektir.
Kare disiplini: akıcılık yalnızca kütüphane seçimiyle değil; güncelleme ile çizimin birbirine karışmamasıyla korunur. Render Loop Mantığı’ndaki update / draw ayrımını zihninde açık tut.
HoloDepth Lab
Parçaları yapboz gibi birleştirip sonucu anında görmek için ana sitedeki katmanlara göz at. Işık ve materyal oynadıkça shader sezgisi ister — Shader Nedir? iyi sonraki adımdır.