holodepth

Three.js · Sahne & geometri

Geometrinin anatomisi ve veri yönetimi

3D web geliştirmede geometri, bir nesnenin uzaydaki fiziksel varlığını tanımlayan saf matematiksel veridir. Three.js'te bir objeyi "görmek", aslında GPU'ya binlerce noktanın koordinatlarını ve bu noktaların nasıl birleşeceğini söylemektir. Modern bir projede asıl iş, bu veriyi doğru yapılandırmak ve verimli taşımaktır.

Pratikte ekranda gördüğünüz cisim bir Mesh'tir: geometri (shape — şekil) ile materyal (appearance — görünüş) bir araya gelir; şekil verisi tek başına renk, parlaklık veya doku üretmez. Materyal Giriş sayfası bu ikinci yarıyı tamamlar.

3D veri katmanları: vertex'ten yüzeye

Dijital bir objenin iskeleti üç temel hiyerarşiden oluşur:

  • Vertices (noktalar): Uzaydaki (x, y, z) koordinatları. Her şeyin başladığı atomik birimdir.
  • Edges (kenarlar): İki noktayı birleştiren çizgiler. Genellikle tel kafes (wireframe) görünümlerde belirginleşirler.
  • Faces (yüzeyler): Üç noktanın birleşmesiyle oluşan üçgenler. GPU'lar yalnızca üçgenleri rasterize edebilir (ekrana çizebilir); bu yüzden karmaşık tüm modeller aslında devasa bir "üçgen çorbası"dır.

Tüm modern GPU'lar, nihai olarak her yüzeyi üçgenlere indirger (triangulation) — dörtgen veya daha karmaşık çokgenler bile rasterization aşamasında bu atomik üçgenlere ayrılır.

Winding order (vertex sırası): Bir üçgenin köşelerinin bağlanma yönü, yüzeyin "ön" mü yoksa "arka" mı olduğunu belirler. Ters bir sıralama, yüzeyin kameraya arkasını dönmesine ve materyal ayarlarınıza bağlı olarak görünmez olmasına (back-face culling) yol açar.

Hazır geometriler ve parametrik yaklaşım

Three.js, matematiksel formüllerle anında üretilebilen primitive (ilkel) geometriler sunar. Bu yapılar öğrenme aşamasında hız kazandırsa da, üretim aşamasında segment yönetimi hayati önem taşır:

  • Segment sayısı: Bir küreyi veya kutuyu kaç küçük parçaya böldüğünüzdür.
  • Performans bütçesi: Gereksiz yüksek segment değerleri, GPU belleğini şişirir. Düşük poligonlu (low-poly) bir modelle yüksek kaliteli bir materyal birleştiğinde, yüksek poligonlu bir modelden daha verimli sonuçlar alınabilir.

BufferGeometry: GPU ile doğrudan iletişim

Three.js'in performans kalbi BufferGeometry yapısında atar. Bu yapı, veriyi JavaScript'in hantal nesne yapısından çıkarıp, GPU'nun anadilinde (typed array'ler) saklar.

  • Hız: RAM ile GPU arasındaki veri transferi minimize edilir.
  • Öznitelikler (attributes): Geometrinin sadece konumunu (position) değil, ışıkla etkileşimini (normal) ve dokuların nasıl sarılacağını (uv) bu tampon belleklerde saklarız.

Bu veriler, renderer tarafından işlenerek nihai olarak piksellere dönüştürülür; pipeline'ın bu uç kısmı için Renderer sayfasına bakabilirsiniz.

Teknik tablo: veri türleri ve fonksiyonları

Özellik Teknik karşılık Neden önemli?
Position Float32Array Nesnenin asıl fiziksel şeklini ve hacmini belirler.
Normal Vector3 (attribute olarak paketlenir) Yüzeyin baktığı yönü belirleyerek gölge ve ışık hesaplarını mümkün kılar.
UV mapping Vector2 (attribute olarak paketlenir) 2D bir resmin (doku), 3D yüzeye hatasız giydirilmesini sağlar.
Index Uint16Array / Uint32Array Aynı noktayı kullanan üçgenlerde veriyi tekrar yazmaz; bellek tasarrufu sağlar.

Uygulama: manuel veri yönetimi

Bir BufferGeometry oluştururken sadece noktaları girmek yetmez; sistemi tam verimle çalıştırmak için sınırlayıcı hacimleri (bounding volumes) hesaplamalı ve ışık için gerekliyse normalleri üretmelisiniz: 

// 1. Veri hazırlığı
const geometry = new THREE.BufferGeometry();
const vertices = new Float32Array([-1, -1, 1, 1, -1, 1, 1, 1, 1]);

// 2. Veriyi GPU'ya bağlama
geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));

// 3. Otomatik hesaplamalar (hayati adımlar)
geometry.computeVertexNormals(); // Işık hesapları için gerekli
geometry.computeBoundingBox(); // Görünürlük (culling) testleri için gerekli
geometry.computeBoundingSphere(); // Mesafe bazlı optimizasyonlar için gerekli

Holodepth notu: Bellek temizliği (dispose)

Yazılım dünyasında çöp toplayıcılar (garbage collector) JavaScript nesnelerini temizler, ancak GPU belleği için bu geçerli değildir. Sahneden sildiğiniz bir nesne GPU belleğinde yaşamaya devam edebilir. Uzun süreli oturumlarda projenizin çökmemesi için, artık kullanılmayan geometrileri mutlaka geometry.dispose() komutuyla bellekten tamamen atmalısınız.

Görselleştirme ve diyagramlar hakkında

Mete, bu bölümde geometrileri görsel olarak şu şekilde destekleyeceğiz:

  • Vertex & face diyagramı: Bir küpün köşelerini, kenarlarını ve üçgen yüzeylerini şeffaf bir hiyerarşiyle gösteren görsel.
  • UV mapping illüstrasyonu: Bir kağıdı (doku) bir kutunun (geometri) etrafına sarma mantığını gösteren diyagram.
  • Bounding box görseli: Bir nesnenin etrafındaki hayali sınır kutusunun, kamera görünürlük testlerinde (frustum culling) nasıl kullanıldığını anlatan grafik.