holodepth

Three.js · Doku ve UV

Texture optimizasyonu: GPU dostu deneyimler

Bir web sayfasında 4K bir görseli <img> ile göstermek çoğunlukla indirme maliyetini büyütür. Aynı görseli üç boyutta doku olarak kullanmak ise dosyanın VRAM’de ham piksel tabanında açılması ve her karede örneklenmesi demektir. Aşağıdaki stratejiler, darboğazları azaltmaya odaklanır.

Diskte küçük bir JPEG, GPU tarafında yine de tam çözünürlükte RGBA benzeri bir ayak izi oluşturabilir; optimizasyonu yalnızca dosya boyutuyla ölçmeyin.

Bağlam: Doku temelleri, Mipmapping, Filtreleme, UV mapping, Materyal girişi, Sahne (Scene).

Optimizasyon omurgası: nereden başlanır?

Odak Ne kazandırır? Bu sayfada
VRAM üst sınırı Erken bütçe; çoklu doku toplamı. Bölüm 1
Mip zinciri Uzak alan, tırtık azaltma, örnekleme yükü. Bölüm 2
minFilter / magFilter Görüntü–maliyet dengesi. Bölüm 3
POT / NPOT Mipmap ve sarmal uyumu. Bölüm 4
KTX2 / Basis Sıkıştırılmış bellek ve upload. Bölüm 5
Atlas Tek dokuda çok nesne; UV planı. Bölüm 6

Bellek hesabı (VRAM): gerçek maliyet

GPU, dokuyu sıkıştırılmış dosya haliyle değil; örnekleme için uygun biçimde ham texel verisi olarak tutar (kanal sayısına ve iç biçime göre değişir; kural koymak için basit bir üst sınır modeli kullanılır).

Bu yüzden aynı çözünürlükte iki materyal kanalı (map + normalMap gibi) pratikte iki ayrı bellek yükü oluşturur; «tek dosya küçük» olması, toplam VRAM baskısını tek başına göstermez.

Kabaca üst sınır modeli

Sık kullanılan kabaca üst tahmin (tam kanallı RGBA, bayt başına): genişlik × yükseklik × 4 bayt. Örnek: 2048×2048 doku, diskte örneğin 500 KB olsa bile bu modelde yaklaşık 16 MB VRAM ayak izi; on adet yalnızca bu dokular için ~160 MB anlamına gelir (mipmap zinciri ve filtreleme ek yük getirir).

Çözünürlüğü yarıya indirmek, bu basit modelde alanı ¼ oranında düşürür (Doku temelleri · VRAM kuralı ile aynı düşünce).

Mipmap ve filtre ek yükü

Üst sınır hesabına ek olarak mipmap zinciri, levhayı kabaca ~%33 büyütebilir; uzakta kalite için çoğu sahne bunu göze alır. Kapatma kararı verirken hem bellek hem ekrandaki tırtıklanmayı birlikte ölçün (bölüm 2).

Mipmapping: uzaktaki detay

Obje uzaklaştığında devasa bir dokuyu küçük bir ekran alanına sığdırmak aliasing (tırtıklanma) ve gereksiz örnekleme yükü doğurur.

Mipmaps zinciri

Mipmaps: yükleme sırasında GPU, dokunun küçültülmüş kopyalarını (1024, 512, 256 …) zincir halinde üretir veya sağlanan küçük seviyeleri kullanır.

Kavramsal köprü: Doku temelleri · mipmap bölümü aynı fikri farklı açıdan sabitler; burada odak «ne zaman kapatılır / açık tutulur» kararıdır.

Pratik kural

Kural: Doku tekrarlıyorsa veya mesafeye göre küçülüyorsa mipmapping’i açık tutmak genelde doğru seçimdir (texture.generateMipmaps = true, varsayılan çoğu kurulumda açıktır). Doku ekranda sabit ölçekte kalacaksa (ör. tam ekran UI plakası), kapatmak zincirdeki ek seviyeleri düşürerek bellekte kabaca ~%33 tasarruf sağlayabilir; kaliteyi her hedef için ayrı doğrulayın.

Filtreleme modları (minification & magnification)

Texellerin nasıl karıştırılacağını seçmek hem görüntü hem maliyeti etkiler; min tarafı özellikle mipmap ile birlikte düşünülmelidir (Doku temelleri · mag/min).

minFilter (küçültme)

Uzakta, texel başına düşen piksel sayısı azaldığında kullanılır. THREE.LinearMipmapLinearFilter (trilinear) genelde en yumuşak geçişi verir; maliyeti de en yüksek uçtadır. Daha ucuz seçenekler bazen tırtık veya parıltı farkı yaratır — mobil ve düşük profilde A/B karşılaştırması yapın.

magFilter (büyütme)

Yakında piksel başına texel az olduğunda devreye girer. THREE.NearestFilter keskin, pikselli (retro) görünüm; THREE.LinearFilter daha yumuşak interpolasyon verir.

Doku boyutu ve power of two (POT)

Modern GPU’lar birçok boyutu desteklese de, her iki boyut da 2n olduğunda (256, 512, 1024, 2048 …) örnekleme ve mipmap yolları mimariyle daha uyumlu çalışır.

Kare zorunluluğu yok

İpucu: Doku kare olmak zorunda değildir; 512×1024 gibi dikdörtgen POT boyutları, gereksiz kare «doldurma»dan kaçınırken bellek planlamasında verimli olabilir.

NPOT ve sarmal

NPOT boyutlarda repeat / mipmap kısıtlarıyla karşılaşmak mümkündür; ayrıntılı not için Wrapping & Repeat · NPOT sayfasına geçin (sıradaki omurgada bu sayfa, atlas ve UV kararlarını birleştirir).

Texture compression (Basis & KTX2)

Standart JPEG / PNG akışında veri genelde açıldıktan sonra GPU belleğinde genişler. KTX2 veya Basis Universal tabanlı yollar, desteklenen biçimlerde sıkıştırılmış blokları doğrudan donanıma uygun şekilde sunabilir.

Avantaj ve ölçüm uyarısı

Avantaj: uygun hedeflerde VRAM ve yükleme (upload) süresinde büyük kazançlar mümkündür (oran sahne ve biçime göre değişir; %70’e kadar azalma örnekleri literatürde ve üretim raporlarında görülür — kendi varlıklarınızla ölçün).

Transcoder yolu, tarayıcı ve sürüme göre değişir; prod öncesi hedef cihazlarda hem kalite hem bellek profili alın.

Three.js tarafında örnek yükleme

// KTX2Loader kullanımı (özet; transcoder yolu projene göre)
const ktx2Loader = new KTX2Loader()
  .setTranscoderPath("basis/")
  .detectSupport(renderer);

ktx2Loader.load("texture.ktx2", (texture) => {
  material.map = texture;
});

Texture atlas (doku atlası)

Örneğin sahnede 50 farklı küçük obje için 50 ayrı doku, duruma göre durum değişimi ve önbellek baskısı anlamına gelir. Çok küçük dokuları tek bir büyük görselde (ör. 2048×2048) birleştirip UV’leri atlas üzerindeki bölgelere yönlendirmek, malzeme ve çizim yükünü sık sık iyileştirir (atlas düzeni ve padding için model / DCC akışınızı planlayın).

UV ile birlikte düşünün

Atlas kârı, UV adalarının atlas levhasında doğru paylaşılmasıyla gelir; aksi hâlde tek dosyada toplasanız bile yanlış bölge örneklenir (UV mapping · overlap ve atlas).

HoloDepth «Optimization» checkpoint’i

Özet

En iyi optimizasyon, gerçekten ihtiyaç duyulmayan dokunun yüklenmemesidir: çözünürlük, kanal ve sayı üzerinde önce karar verin, sonra ince ayar yapın.

HoloDepth özet stratejisi

  • Gereksiz kanalları at: Şeffaflık gerekmiyorsa PNG yerine JPEG veya yalnız RGB içerik seçerek bellek ve bant genişliğini düşürün (VRAM).
  • Ölçeklendirme: Her yüzeye 4K bağlamayın; zemin için 2K yeterliyken uzaktaki ağaçta 512 px bile fazla olabilir — mesafe ve ekran payına göre seçin.
  • Anisotropy: Uzun bir zemin veya yol gibi dar açılı bakışlarda bulanıklığı azaltmak için texture.anisotropy değerini renderer.capabilities.getMaxAnisotropy() sınırına kadar (ör. 16) artırabilirsiniz; kalite kazanır, maliyet de artar — profil çıkarın.

Texture türleri ve sıra

Bu sayfa kanal-bağımsız maliyet verir; hangi kanalın ne anlattığı (albedo, normal, roughness …) için yan menüdeki Texture Türleri altındaki sayfaları, önce sarmal ve tekrar davranışını (Wrapping & Repeat) netleştirdikten sonra tek tek açmak omurgayı korur. İlk tip sayfası olarak Albedo / Base Color uygun başlangıçtır.

Sonraki durak: wrap / repeat ve NPOT etkileri için Wrapping & Repeat.