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

Doku dönüştürme, GLB'ya gömülü görüntüleri değiştirir. Bu araçta kalite, ölçek ve maksimum boyut kontrollerini etkinleştirmek için KTX2 veya WebP seçeneğini seçin. Bu karşılaştırma sırasında üçgen tutmayı değiştirmeden tutun, böylece doku ayarlarının etkisinin görülmesi daha kolay olur.

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

Doku çıktısı	Kullanım ve yükleme gereksinimi
Orijinal format	Mevcut kodlamayı korur. Karşılaştırma temeli olarak kullanışlıdır.
WebP	EXT_texture_webp'yu kullanır. Hedef görüntüleyicideki desteği kontrol edin.
KTX2 / ETC1S	Kompakt bir Basis Universal kodlaması. KHR_texture_basisu desteği gerektirir.
KTX2 / UASTC	Genellikle daha büyük dosya boyutunda daha fazla doku ayrıntısını korur. Aynı KTX2 yükleme yolunu kullanır.

Boyutlar ve kodlama kalitesi farklı işler yapar

50% doku ölçeği genişliği ve yüksekliği yarıya indirerek piksellerin dörtte birini mipmap'lerin önünde bırakır. Maksimum boyut ayarı aynı zamanda çıktı boyutlarını da sınırlar. Kodlama kalitesi, görüntü boyutlarından ziyade codec bileşenini kontrol eder; dolayısıyla WebP'daki kalite 8, ETC1S veya UASTC'daki kalite 8'e eşdeğer değildir.

Yeniden boyutlandırmanın ardından harfleri, alfa kenarlarını ve ince yüzey ayrıntılarını inceleyin. Normal haritalar özel dikkat gerektirir çünkü küçük değer değişiklikleri gölgelemeyi değiştirebilir. Uygulamanızda kullanılan aydınlatma ve yakınlaştırma düzeyi altında dokuyu test edin.

1024 × 1024 doku kullanan bir 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 fikstür, yerel gltfpack 1.3 tarafından kodlanmış, oluşturulmuş bir gradyan ve gürültü PNG'ya sahip CC0 dalga ağımızdır. Tüm satırlar Meshopt sıkıştırmasını, 8.192 üçgeni ve dönüşümün geçerli olduğu yerde kalite 8'i kullanır. Bunlar, yalıtılmış doku boyutları değil, tam GLB boyutlarıdır. Tablo, görsel kaliteyi veya GPU belleği değil, bayt sayısını ölçer.

Aynı yüzeydeki dokuyu karşılaştırın

Bu yakın görünümler aynı ağ, kamera, aydınlatma ve malzeme ayarlarını kullanır. Three.js 0.180.0'daki tablodaki gerçek dosyaları oluştururlar. Oluşturulan doku, degradeler ve ince gürültü içerir; bu ayrıntıları incelemek için kullanışlıdır ancak harfleri, şeffaflığı veya normal haritaları temsil etmez.

Dalgalı ağ üzerindeki orijinal PNG dokusunun yakından 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

Yarım boyutlu WebP dokulu aynı yüzey — WebP · 512 × 512

Bu çekimlerde, ETC1S sürümü pembe yüzeydeki ince gürültünün bir kısmını yumuşatırken, UASTC benekli görünümünün çoğunu koruyor. Yarım boyutlu WebP sürümü, küçük farklılıkları daha görünür şekilde bulanıklaştırır. Bu gözlemi dosya boyutu tablosuyla karşılaştırın: bu ayrıntıları korumanın her kodlama için farklı bir maliyeti vardır.

Görüntüleri tam boyutta açın ve renk ve yüzey ayrıntılarındaki küçük farklılıkları karşılaştırın. Web sayfası önizlemeleri küçülterek farklılıkları gizleyebilir. Bu ekran görüntüleri tek bir tarayıcıdan ve GPU'dan alınan görsel referanslardır; bir kalite puanı veya her cihazda aynı işleme garantisi değildir.

Örnek: doku boyutlarını yarıya indirin ve WebP'yu dışa aktarın

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'yı seçin, WebP'yu seçin, Gelişmiş ayarları açın ve Doku ölçeğini 50% olarak ayarlayın. Piksel sınırına da ihtiyacınız olmadığı sürece Maksimum doku boyutunu değiştirmeden bırakın. Sonucu kullanmadan önce hedef görüntüleyicinizde yeniden açın.

Three.js'da KTX2 ve Meshopt yüklemesini yapılandırma →

Motor referansı: gltfpack

Optimize ediciyi açın ↗