Kompresi tekstur GLB: KTX2 dan WebP

Konversi tekstur mengubah gambar yang tertanam dalam GLB. Dalam alat ini, pilih KTX2 atau WebP untuk mengaktifkan kontrol kualitas, skala, dan ukuran maksimum. Pertahankan persentase segitiga selama perbandingan agar pengaruh pengaturan tekstur lebih mudah dilihat.

Pilih format yang dapat dimuat penampil

Output tekstur	Kegunaan dan persyaratan pemuatan
Format asli	Mempertahankan pengodean yang ada. Berguna sebagai pembanding awal.
WebP	Menggunakan EXT_texture_webp. Periksa dukungan pada penampil tujuan.
KTX2 / ETC1S	Pengodean Basis Universal yang ringkas. Memerlukan dukungan KHR_texture_basisu.
KTX2 / UASTC	Biasanya mempertahankan lebih banyak detail tekstur dengan ukuran file lebih besar. Menggunakan jalur pemuatan KTX2 yang sama.

Dimensi dan kualitas pengodean memiliki fungsi berbeda

Skala tekstur 50% membagi dua lebar dan tinggi, sehingga jumlah piksel sebelum mipmap tinggal seperempat. Pengaturan ukuran maksimum juga membatasi dimensi output. Kualitas pengodean mengatur codec, bukan dimensi gambar, jadi kualitas 8 pada WebP tidak setara dengan kualitas 8 pada ETC1S atau UASTC.

Periksa tulisan, tepi alfa, dan detail permukaan halus setelah mengubah ukuran. Normal map perlu perhatian khusus karena perubahan nilai kecil dapat mengubah pencahayaan. Uji tekstur dengan pencahayaan dan tingkat zoom yang digunakan aplikasi.

Perbandingan dengan satu tekstur 1024 × 1024

Pengodean 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

Bahan uji ini adalah mesh riak CC0 buatan kami dengan PNG gradasi dan noise yang dihasilkan, dikodekan menggunakan gltfpack native 1.3. Semua baris menggunakan kompresi Meshopt, 8.192 segitiga, dan kualitas 8 bila dikonversi. Ini ukuran GLB lengkap, bukan tekstur saja. Tabel mengukur byte, bukan kualitas visual atau memori GPU.

Bandingkan tekstur pada permukaan yang sama

Gambar jarak dekat ini memakai mesh, kamera, pencahayaan, dan material yang sama. File asli dari tabel dirender dengan Three.js 0.180.0. Tekstur buatan berisi gradasi dan noise halus; berguna untuk memeriksa detail tersebut, tetapi tidak mewakili tulisan, transparansi, atau normal map.

Tampilan dekat tekstur PNG asli pada mesh 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

Pada tangkapan ini, ETC1S menghaluskan sebagian noise kecil pada permukaan merah muda, sementara UASTC mempertahankan lebih banyak bintiknya. WebP setengah ukuran lebih jelas mengaburkan variasi kecil. Bandingkan pengamatan ini dengan tabel ukuran file: biaya mempertahankan detail tersebut berbeda untuk tiap pengodean.

Buka gambar dalam ukuran penuh dan bandingkan variasi kecil warna serta detail permukaan. Halaman web memperkecil pratinjau sehingga perbedaan bisa tersembunyi. Tangkapan ini adalah referensi visual dari satu browser dan GPU, bukan skor kualitas atau jaminan rendering identik di setiap perangkat.

Contoh: bagi dua dimensi tekstur dan ekspor WebP

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

Pada antarmuka, pilih File lebih kecil, pilih WebP, buka Pengaturan lanjutan, lalu atur Skala tekstur ke 50%. Biarkan Ukuran tekstur maksimum tetap sama kecuali Anda juga memerlukan batas piksel. Buka hasil di penampil tujuan sebelum menggunakannya.

Konfigurasikan pemuatan KTX2 dan Meshopt di Three.js →

Referensi mesin: gltfpack

Buka pengoptimal ↗