GLB doku sıkıştırması: KTX2 ve WebP

Doku dönüşümü GLB'ye gömülü görüntüleri değiştirir. Bu araçta kalite, ölçek ve en büyük boyut kontrollerini açmak için KTX2 veya WebP seçin. Karşılaştırırken üçgen koruma oranını sabit tutun; böylece doku ayarlarının etkisini daha kolay görürsünüz.

Görüntüleyicinizin yükleyebildiği biçimi seçin

Doku çıktısı	Kullanım ve yükleme gereksinimi
Orijinal biçim	Mevcut kodlamayı korur. Karşılaştırma için başlangıç noktasıdır.
WebP	EXT_texture_webp kullanır. Hedef görüntüleyicide desteğini kontrol edin.
KTX2 / ETC1S	Kompakt bir Basis Universal kodlamasıdır. KHR_texture_basisu desteği gerektirir.
KTX2 / UASTC	Genellikle daha büyük dosya karşılığında daha fazla doku ayrıntısını korur. Aynı KTX2 yükleme yolunu kullanır.

Boyutlar ve kodlama kalitesi farklı şeyleri kontrol eder

%50 doku ölçeği genişlik ve yüksekliği yarıya indirir; mipmap'lerden önce piksel sayısı dörtte bire düşer. En büyük boyut ayarı da çıktı boyutlarını sınırlar. Kodlama kalitesi görüntü boyutunu değil kodlayıcıyı kontrol eder; bu nedenle WebP'deki kalite 8, ETC1S veya UASTC'deki kalite 8 ile eşdeğer değildir.

Boyutlandırmadan sonra yazıları, alfa kenarlarını ve ince yüzey ayrıntılarını inceleyin. Normal haritalarında küçük değer değişiklikleri gölgelendirmeyi etkileyebileceği için özellikle dikkat edin. Dokuyu uygulamanızın ışıklandırması ve yakınlaştırma düzeyiyle test edin.

Tek bir 1024 × 1024 dokuyla karşılaştırma

Kodlama ve boyutlar	GLB boyutu (bayt)
Orijinal PNG, 1024 × 1024	2.914.152
WebP, 1024 × 1024	445.632
ETC1S, 1024 × 1024	258.488
UASTC, 1024 × 1024	1.373.516
WebP, 512 × 512	118.088

Bu örnek, üretilmiş geçiş ve gürültü dokusu içeren bir PNG ile kaplanan CC0 dalgalı ağımızdır; yerel gltfpack 1.3 ile kodlanmıştır. Her satırda Meshopt sıkıştırması, 8.192 üçgen ve dönüşüm yapılan yerlerde kalite 8 kullanılır. Bunlar yalnızca dokunun değil, tüm GLB'nin boyutlarıdır. Tablo bayt ölçer; görsel kaliteyi veya GPU belleğini ölçmez.

Dokuyu aynı yüzey üzerinde karşılaştırın

Bu yakın görünümlerde aynı ağ, kamera, ışık ve malzeme ayarları kullanılır. Tablodaki gerçek dosyalar Three.js 0.180.0 ile render edilir. Üretilen doku renk geçişleri ve ince gürültü içerir; bu ayrıntıları incelemek için yararlıdır ancak yazıları, saydamlığı veya normal haritalarını temsil etmez.

Dalgalı ağ üzerindeki orijinal PNG dokusunun yakın görünümü — Orijinal PNG · 1024 × 1024

ETC1S doku sıkıştırmasıyla aynı yüzey — ETC1S · 1024 × 1024

UASTC doku sıkıştırmasıyla aynı yüzey — UASTC · 1024 × 1024

Boyutları yarıya indirilmiş WebP dokusuyla aynı yüzey — WebP · 512 × 512

Bu görüntülerde ETC1S sürümü pembe yüzeydeki ince gürültünün bir bölümünü yumuşatırken UASTC benekli görünümü daha fazla koruyor. Boyutları yarıya indirilen WebP sürümü küçük değişimleri daha belirgin bulanıklaştırıyor. Bunu dosya boyutu tablosuyla karşılaştırın: ayrıntıları korumanın boyut maliyeti kodlamaya göre değişiyor.

Görüntüleri tam boyutta açıp küçük renk değişimlerini ve yüzey ayrıntılarını karşılaştırın. Sayfa önizlemeleri küçülttüğü için farklar gizlenebilir. Bu görüntüler tek bir tarayıcı ve GPU'dan alınmış görsel örneklerdir; kalite puanı veya tüm cihazlarda aynı görünüm garantisi değildir.

Örnek: doku boyutlarını yarıya indirip WebP dışa aktarma

gltfpack -i input.glb -o output.glb -cc -tw -tq 8 -tj 1 -ts 0.5 -kn -km -ke

Arayüzde Daha küçük dosya ve WebP'yi seçin, Gelişmiş ayarlar'ı açıp Doku ölçeğini %50 yapın. Piksel sınırı da gerekmiyorsa En büyük doku boyutunu değiştirmeyin. Kullanmadan önce sonucu hedef görüntüleyicide yeniden açın.

Three.js'te KTX2 ve Meshopt yüklemesini yapılandırın →

Motor kaynağı: gltfpack

Optimizasyon aracını aç ↗