Kompresi tekstur GLB: KTX2 dan WebP

Konversi tekstur mengubah gambar yang tertanam dalam GLB. Di alat ini, pilih KTX2 atau WebP untuk mengaktifkan kontrol kualitas, skala, dan ukuran maksimum. Pertahankan retensi segitiga tidak berubah selama perbandingan ini sehingga efek pengaturan tekstur lebih mudah dilihat.

Pilih format yang dapat dimuat oleh pemirsa Anda

Keluaran tekstur	Persyaratan penggunaan dan pemuatan
Format asli	Mempertahankan pengkodean yang ada. Berguna sebagai dasar perbandingan.
WebP	Menggunakan EXT_texture_webp. Periksa dukungan di penampil tujuan.
KTX2 / ETC1S	Pengkodean Basis Universal yang ringkas. Membutuhkan dukungan KHR_texture_basisu.
KTX2 / UASTC	Biasanya menyimpan lebih banyak detail tekstur pada ukuran file yang lebih besar. Ia menggunakan jalur pemuatan KTX2 yang sama.

Dimensi dan kualitas pengkodean melakukan pekerjaan yang berbeda

Skala tekstur 50% membagi dua lebar dan tinggi, menyisakan seperempat piksel sebelum mipmaps. Pengaturan ukuran maksimum juga membatasi dimensi keluaran. Kualitas pengkodean mengontrol codec daripada dimensi gambar, sehingga kualitas 8 di WebP tidak setara dengan kualitas 8 di ETC1S atau UASTC.

Periksa huruf, tepi alfa, dan detail permukaan halus setelah mengubah ukuran. Peta normal memerlukan perhatian khusus karena perubahan nilai kecil dapat mengubah bayangan. Uji tekstur berdasarkan pencahayaan dan tingkat zoom yang digunakan dalam aplikasi Anda.

Perbandingan menggunakan satu tekstur 1024×1024

Pengkodean dan dimensi	Ukuran GLB (byte)
PNG asli, 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

Perlengkapan ini adalah jaring riak CC0 kami dengan PNG gradien dan kebisingan yang dihasilkan, dikodekan oleh gltfpack 1.3 asli. Semua baris menggunakan kompresi Meshopt, 8.192 segitiga dan kualitas 8 di mana konversi berlaku. Ini adalah ukuran GLB lengkap, bukan ukuran tekstur terisolasi. Tabel ini mengukur byte, bukan kualitas visual atau memori GPU.

Bandingkan tekstur pada permukaan yang sama

Tampilan jarak dekat ini menggunakan pengaturan mesh, kamera, pencahayaan, dan material yang sama. Mereka merender file sebenarnya dari tabel di Three.js 0.180.0. Tekstur yang dihasilkan mengandung gradien dan noise halus; ini berguna untuk memeriksa detail tersebut, namun tidak mewakili tulisan, transparansi, atau peta normal.

Tampilan dekat tekstur PNG asli pada jaring riak — PNG Asli · 1024 × 1024

Permukaan yang sama dengan kompresi tekstur ETC1S — ETC1S · 1024 × 1024

Permukaan yang sama dengan kompresi tekstur UASTC — UASTC · 1024 × 1024

Permukaan yang sama dengan tekstur WebP setengah ukuran — WebP · 512 × 512

Dalam tangkapan ini, versi ETC1S memperhalus beberapa noise halus pada permukaan merah muda, sementara UASTC lebih mempertahankan tampilan berbintik-bintiknya. Versi setengah ukuran WebP mengaburkan variasi kecil dengan lebih jelas. Bandingkan pengamatan ini dengan tabel ukuran file: mempertahankan detail tersebut memerlukan biaya yang berbeda untuk setiap pengkodean.

Buka gambar dalam ukuran penuh dan bandingkan variasi kecil dalam warna dan detail permukaan. Halaman web memperkecil skala pratinjau, yang dapat menyembunyikan perbedaan. Tangkapan layar ini adalah referensi visual dari satu browser dan GPU, bukan skor kualitas atau jaminan rendering yang sama di setiap perangkat.

Contoh: membagi dua dimensi tekstur dan mengekspor WebP

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

Di antarmuka, pilih File lebih kecil, pilih WebP, buka Pengaturan lanjutan dan atur Skala tekstur ke 50%. Biarkan Ukuran tekstur maksimum tidak berubah kecuali Anda juga memerlukan batas piksel. Buka kembali hasilnya di penampil target Anda sebelum menggunakannya.

Konfigurasikan pemuatan KTX2 dan Meshopt di Three.js →

Referensi mesin: gltfpack

Buka pengoptimal ↗