holodepth

Three.js · Varlık optimizasyonu · Doku

Doku formatları: Performans ve kalite dengesi

Doku dosyası seçimi yalnızca «diskte kaç KB?» sorusu değildir; WebGL / WebGPU sahnesinde asıl tartı genelde VRAM, yük transferi ve işlemci açma maliyeti üzerindedir. Bu sayfa üç klasik aileyi (PNG, JPG, KTX2) karşılaştırır; harita türüne göre kısa bir karar tablosu sunar ve KTX2 omurgasına bağlar.

Taşıyıcı ve transcode ayrıntıları için KTX2 nedir? sayfasındaki çerçeveyi esas alın; burada tekrar etmek yerine format seçimi ve bellek yanılsaması vurgulanır — böylece KTX2 dizisi ile çakışma olmaz.

glTF tarafında yuvanın haritalara nasıl bağlandığını Texture binding ile; geniş GPU doku optimizasyonu çerçevesini Doku optimizasyonu (GPU) ile tamamlayabilirsiniz.

Üç ana aile: PNG, JPG, KTX2

Doku formatlarını pratikte üç ana kategoride toplayabilirsiniz. Her birinin kullanım amacı, şeffaflık desteği ve GPU belleğindeki maliyeti farklıdır. Aşağıda her aileyi aynı üç soruyla (karakteristik, performans, ne zaman?) okuyabilirsiniz; böylece ekip içi karşılaştırma tablolarınızla hizalı kalır.

PNG (Portable Network Graphics)

PNG, web dünyasında «güvenli varsayılan» gibi durur: kenarlar keskin, şeffaflık vardır, sıkıştırma kayıpsızdır. Three.js içinde doku olarak kullanıldığında ise «dosya küçük mü?» sorusu yanıltıcı olabilir — çünkü asıl tartı çoğu akışta GPU’nun tuttuğu örnek ızgarası boyutudur.

  • Karakteristik: Kayıpsız (lossless) sıkıştırma; şeffaflık (alpha kanalı) desteği. Renk geçişlerinde JPG gibi blok artefaktı üretmez; metin, UI ve ince çizgiler için uygundur.
  • Performans: Diskte geniş yer kaplar; kritik nokta çoğu akışta VRAM tüketimidir — dosya ekran kartı belleğinde tipik olarak açılmış (uncompressed benzeri) düzende tutulur. Yani indirme çubuğundaki KB ile GPU panelinde gördüğünüz bellek aynı şey değildir.
  • Ne zaman? Keskin kenarlı logolar, ikonlar veya kalitenin dosya boyutundan daha önemli olduğu küçük öğeler. Büyük albedo düzlemlerinde «her şeyi PNG» demeden önce mipmap ve doku sayısı çarpanını hesaba katın.

JPG (Joint Photographic Experts Group)

JPG fotoğraf dünyasında mükemmel bir iş çıkarır: insan gözü için yumuşak geçişler korunur, dosya boyutu küçülür. WebGL tarafında ise formatın kendisi bir «hız formatı» değildir; yük hızı ile çizim maliyeti ayrı eksenlerdir.

  • Karakteristik: Kayıplı (lossy) sıkıştırma; renk geçişlerini korurken dosya boyutunu ciddi oranda düşürür. Şeffaflık yoktur; alpha gereken haritalar için uygun değildir.
  • Performans: İndirme hızı yüksektir; oysa GPU JPG’yi doğrudan «okuyamaz» — CPU genelde açma (decompress) işini üstlenir, ardından ham örnekler GPU’ya gönderilir. Bu, ilk yüklemede ve özellikle çok sayıda doku değişiminde kare süresine yansıyabilir.
  • Ne zaman? Şeffaflık gerektirmeyen uzak çevre dokuları veya fotoğraf tabanlı base color haritaları (stratejiye bağlı). Yakın plan, normal veya yüksek frekanslı detay gerektiren yüzeylerde kaliteyi gözden geçirin.

KTX2 (Basis Universal)

KTX2 tek bir «sıkıştırma algoritması» değil; Basis Universal ile birlikte düşünüldüğünde taşıyıcı + hedef GPU formatları ekosistemidir. Konteyner, ETC1S / UASTC gibi yolların ayrıntısı KTX2 nedir? ve Basis Universal sayfalarında; burada yalnızca seçim perspektifi durur.

  • Karakteristik: GPU tarafından doğrudan kullanılabilen sıkıştırılmış doku (compressed texture) hattına uygun modern taşıyıcı. glTF içinde pratikte KHR_texture_basisu ile bir arada anılır.
  • Performans: Hem diskte hem VRAM’de sıkıştırılmış kalır; klasik açılmış dokulara kıyasla bellekte ciddi tasarruf hedeflenir. CPU açma yükünü aşağı çekme potansiyeli vardır (ortam ve transcode yoluna bağlıdır — bkz. Transcoding).
  • Ne zaman? Profesyonel 3B web projelerinde; özellikle mobil ve yüksek performans hedeflerinde ana dokular için tercih edilir. Çok modelli sahnelerde «her model 2K PNG» yerine KTX2 hattı genelde sürdürülebilirliği artırır.

Kritik soru: disk boyutu mu, GPU belleği mi?

Geleneksel web geliştirmede «görsel optimizasyonu» denince akla yalnızca dosyanın kaç KB olduğu gelir. Three.js sahnesinde asıl maliyet çoğu zaman VRAM üzerindedir: kullanıcı indirme çubuğunu görmez; tarayıcı ise bellek tavanına yaklaşınca sekmeyi düşürebilir veya bağlamı kaybedebilir.

  • Yanılsama: Örneğin 1024×1024 bir JPG diskte küçük görünebilir; ekip içi sohbette «zaten optimize» hissi yaratır. Bu his, GPU’nun piksel başına ayırdığı bellekten bağımsızdır.
  • Gerçeklik: Aynı doku GPU’da tipik olarak sabit örnek başına bellek ayırır; çözünürlük büyüdükçe maliyet hızla artar (2048×2048, 4K vb.). Yani diskteki sıkıştırma ile grafik belleğinde tutulan örnek düzeni aynı denklem değildir; ikinci eksen sahne ölçeğinde belirleyici olur.
  • KTX2 farkı: Aynı çözünürlükte sıkıştırılmış yollar VRAM bütçesini daha az zorlar; tam rakamlar cihaz, format ve mipmap düzenine göre değişir. Sayısal örnekler ve bitrate / VRAM dengesi için Doku boyutu & kalite sayfasına geçin — burada yalnızca zihinsel model pekiştirilir.

Özet: JPG/PNG ile ilerlerken «dosya hafif = sahne hafif» varsayımını bilinçli kırın; KTX2 ile ilerlerken ise transcode ve hedef GPU formatı maliyetini üretim kontrol listesine ekleyin.

Disk vs VRAM simülatörü System-levelWebGL sahnesi yok; pedagojik oranlar. Amaç: «disk küçük ≠ GPU ucuz» şokunu rakamlarla hissettirmek. Taban örnek genişlik² × 4 × doku sayısı (RGBA8); VRAM tarafında ~%33 mipmap ek yükü × 1.33 ile modellenir. Gerçek projede kanal, sürücü ve hedef sıkıştırma formatı sonucu değiştirir.
Doku formatı

Disk (paket)

İndirme çubuğunun gösterdiği taraf — kandırıcı olabilir.

VRAM (örnek)

JPG/PNG: açılmış örnek + mipmap (~1.33×). KTX2: sıkıştırılmış blok + aynı mip çarpanı (yuvarlatma).

CPU açma yükü

Göreceli skor (0–100); JPG genelde en yüksek, KTX2 daha düşük.

VRAM / disk çubukları masaüstü tavanına göre ölçeklenir — telefon ve gömülü GPU’larda gerçek limit çok daha düşüktür.

Öne çıkan

Bu panel gerçek zamanlı sürücü ölçümü değildir; eğitim için yuvarlatılmış katsayılar kullanır. Çubuk tavanları (yüzde ölçeği) masaüstü bellek düzenine yakındır — mobil ve gömülü GPU’larda kullanılabilir VRAM çok daha düşük olabilir; aynı sahne orada daha erken «kırmızıya» döner. Üretimde Chrome bellek profili, Safari GPU süreci ve motorun doku önbelleği davranışını ayrı doğrulayın.

Karar özeti: hangi haritaya hangi format?

HoloDepth projelerinde doku tipine göre format seçmek, sürdürülebilir bir optimizasyon stratejisidir. Aşağıdaki tablo başlangıç için bir şablondur; üretimde QA ile doğrulayın.

Doku tipi Tavsiye edilen Kısa gerekçe
Albedo / base color KTX2 (ETC1S) Renklerde hafif sıkıştırma kaybı genelde tolere edilir; bellek ve bant kazancı yüksektir.
Normal / roughness KTX2 (UASTC) Matematiksel yönlü veri; kayıp yüzeyde hatalı yansımalara yol açabilir — daha koruyucu yol tercih edilir.
UI ikonları / logolar PNG / SVG Keskinlik ve piksel mükemmelliği ön plandadır.
HDR / environment EXR / RGBE Yüksek dinamik aralık (ışık verisi) gereklidir; bu sayfanın dışındaki hat.

KTX2 bağlantısı: sıkıştırmanın gücü

Önceki bölümlerde işlenen KTX2 sıkıştırması, burada somut bir karar mekanizmasına dönüşür: onlarca model ve her birinde 2K dokular varsa, yalnızca PNG/JPG ile ilerlemek VRAM tavanını zorlar ve tarayıcıda kırılmalara yol açabilir.

  • CPU açma süresini azaltma ve GPU dostu teslimat hedefi.
  • VRAM sınırları içinde daha büyük sahneler kurma hedefi.
  • Bant genişliği tasarrufu ile yavaş ağlarda daha kısa yükleme hedefi.

Derinlemesine okuma: Basis Universal, Transcoding, Doku boyutu & kalite.

Çözünürlük disiplini

Hangi formatı seçerseniz seçin, doku boyutlarını üretim hattında standartlaştırın; çoğu akışta 512, 1024, 2048 gibi 2’nin kuvveti (2n) kenarlar en sorunsuz yolu verir. Özellikle KTX2 / GPU sıkıştırmalı hatlarda bu düzen verimlilikle örtüşür.

HoloDepth teknik notu

«Power of two» kuralı proje içi otomasyonla (dışa aktarım şablonları, CI kontrolleri) korunmalıdır; aksi halde mipmap ve sıkıştırma yollarında sürpriz maliyetler çıkar.