Indexed vs Non-Indexed Geometry

Bir üçgen çizmek için üç nokta yeter. Peki bitişik iki üçgenden oluşan bir dörtgen (quad) düşünün: ortak kenarda aslında aynı uzaydaki iki köşe vardır.

Non-indexed (indissiz) yapı

Bu yöntemde her üçgen birbirinden bağımsızdır: “şu üç noktayı birleştir, sonra şu üç noktayı” dersiniz. Ortak köşeler pratikte aynı koordinatlara sahip olsa bile bellekte ayrı kayıtlar olarak durur — yani aynı veri çoğu zaman tekrarlanır. Model karmaşıklaştıkça (küre, karakter ağı vb.) bu tekrar katlanarak büyür.

Mini örnek: aynı köşe neden iki kez yazılır?

İki bitişik üçgeni (ortak kenarlı) non-indexed düşünün: her üçgen kendi üç “slot”unu sırayla listeler; ortak köşeler aynı harfle etiketlense bile bellekte ayrı kayıt olarak tekrarlanır.

Üçgen 1

A — B — C

Üçgen 2

A — C — D

Burada A ve C iki kez listelenir → vertex buffer’da iki kez yer kaplar.

Indexed düzende ise önce benzersiz köşeler (A, B, C, D) tek listede durur; üçgenler yalnızca indekslerle (ör. 0,1,2 ve 0,2,3) bu listeye işaret eder.

Indexed (indisli) yapı

Burada bir adres defteri mantığı vardır: önce benzersiz noktaları bir vertex dizisine yazarsınız; sonra “hangi üç nokta hangi üçgeni oluşturur?” sorusunu ayrı bir index dizisiyle yanıtlarsınız. Örneğin “0, 1, 2 ve ardından 2, 1, 3” gibi. Sonuç: pozisyon, normal, UV gibi attribute verisi mümkün olduğunca tek kez saklanır; üçgenler bu kayıtlara referans verir.

Index dizisinin tipi: Uint16Array mı Uint32Array mı?

Three.js / WebGL tarafında index verisi çoğu zaman Uint16Array veya Uint32Array olarak tutulur. 16 bit indekslerle tek draw’da adreslenebilen vertex indeks aralığı üst sınırı 65535 civarındadır (uygulama ve draw moduna göre ayrıntı değişir); benzersiz vertex sayınız veya gereken indeks aralığı bunu aşıyorsa Uint32Array gibi geniş tipe geçmek gerekir — büyük sahnelerde bu ayrım “neden export bozuluyor?” sorusunun sık cevabıdır.

WebGL bağlamında bu indeks listesi, çizim komutlarında tipik olarak ELEMENT_ARRAY_BUFFER (öğe dizisi buffer’ı) olarak GPU belleğine bağlanır; vertex attribute’ları ise ARRAY_BUFFER tarafında durur — ileri seviye hata ayıklamada bu isimler dokümantasyonla hizalanır.

Üstteki “8 köşe / 36 slot” sayımı kavramsal bir küp içindi; Three.js BoxGeometry ise yüzey başına ayrı köşe tutarak (doku ve keskin yüzey için) varsayılan olarak indexed bir buffer üretir. Aşağıda aynı kutuyu geometry.toNonIndexed() ile indissiz hâle getirince üçgen sayısı aynı kalırken position satırı uzar; tel kafes yoğunluğu değişmez ama pembe vertex noktaları “patlama” gibi çoğalır — veri gerçekten büyümüş olur. Aşağıdaki demo sabitleri, doc-indexed-nonindexed-demo.js içindeki initIndexedNonindexedCubeDemo ile aynı değerleri listeler.

Varsayılan BoxGeometry segmentleriyle bu örnekte indexed tarafta tipik olarak 24 köşe kaydı, 12 üçgen, 36 indeks öğesi görünür; toNonIndexed() sonrası köşe satırı 36’ya çıkar, indeks satırı yoktur (metrikte —).

Aynı kutu iki geometri örneğine bağlanır; mod değişince mesh.geometry ve tel kafes yenilenir.

const geoIndexed = new THREE.BoxGeometry(1.52, 1.2, 1.38);
const geoNonIndexed = geoIndexed.clone().toNonIndexed();

const LIGHT = {
  ambIndexed: 0.42,
  dirIndexed: 2.4,
  ambNonFlat: 0.26,
  dirNonFlat: 3.05,
  roughIndexed: 0.38,
  roughNonFlat: 0.11,
  metalIndexed: 0.22,
  metalNonFlat: 0.06,
};

function applyGeometry() {
  const g = indexedMode ? geoIndexed : geoNonIndexed;
  mesh.geometry = g;
  disposeWireframe();
  wire.geometry = new THREE.WireframeGeometry(g);
  // … vertex noktaları, indeks-tekrar çizgileri, metrik animasyonu
  applyLightingAndRoughness();
}

Neden her zaman indexed kullanmıyoruz — ve bu ayrım neden kritik? Kısaca vertex reuse (nokta yeniden kullanımı) ve donanım davranışı.

Vertex reuse ve kabaca boyut

Tipik bir düzenlemede her vertex; örneğin pozisyon (3 float), normal (3 float) ve UV (2 float) taşıyorsa toplam 8 float ≈ 32 byte (Float32) mertebesindedir — kesin sayı kanal sayısına göre değişir.

Non-indexed örnek (kavramsal): bir küp için 12 üçgen vardır; her üçgen 3 vertex listesi gerektirir: 12 × 3 = 36 vertex slotu. Kabaca 36 × 32 byte ≈ 1152 byte yalnızca bu kanallar için (üst bağlam; gerçek primitive’de ek köşe/UV bölümleri sayıyı artırabilir).

Indexed örnek (kavramsal): aynı köşe verisi tek listede tutulur; üçgen bağlantısı çoğu zaman 16- veya 32-bit indekslerle tutulur. Toplam bellek genelde çok daha düşük kalır; karmaşık modellerde fark MB düzeyine çıkabilir.

GPU cache avantajı

Modern GPU’lar işlenen vertex’leri kısa süreli önbellekte tutar. Bir sonraki üçgen, az önce kullanılan bir indeksi tekrar çağırıyorsa, dönüşüm maliyeti düşebilir. Non-indexed düzende aynı köşe koordinatları bile ayrı slotlar olarak akabileceği için bu yeniden kullanım fırsatı zayıflar; veri “her seferinde yeni”ymiş gibi işlenebilir.

İleri seviye sezgi: Indexed çizimde aynı vertex indeksi kısa süre içinde yeniden kullanıldığında, GPU tarafındaki önbellek / post-transform mekanizmaları sayesinde vertex shader işi pratikte daha az tekrarlanabilir — bu, “draw call düştü” etkisinden ayrıca, yoğun geometride hissedilen bir rahatlamadır (her sürücü ve mesh düzeni için kesin sayı garantisi değildir).

Three.js’te birçok hazır BufferGeometry (ör. BoxGeometry, SphereGeometry) varsayılan olarak indexed gelir. Özel shader veya manuel vertex manipülasyonunda ise veriyi nasıl düzenlediğiniz, FPS’i doğrudan etkiler.

• Verimlilik önceliği: Mümkün olduğunca index kullanın; gereksiz vertex kopyasından kaçının.
• Görsel keskinlik önceliği: Yumuşak normal paylaşımı istemiyorsanız non-indexed’e geçin veya köşeleri klonlayın; maliyeti göz önünde bulundurun.

Bir sonraki adımda bu yapı taşlarını kullanarak vertex verisini tek bir interleaved bellek düzeninde paketlemeyi Interleaved buffers üzerinden inceleyebilirsiniz.

İleri geometri dünyasına hoş geldiniz: burada yalnızca şekil çizmiyoruz — veriyi bilinçle yönetiyoruz.