Praktik Nyata KTX2: Cara Tepat Menggunakan Kompresi Tekstur 3D

Artikel sebelumnya telah menjelaskan hubungan arsitektur antara format tekstur GPU, Basis Universal, dan kontainer KTX2. Setelah memahami teori dasarnya, artikel ini berfokus pada penerapan langsung di lapangan: memilih antara enkoding ETC1S dan UASTC, menentukan alat terbaik, menulis perintah CLI yang tepat, serta memuat tekstur terkompresi di engine web.

Anda dapat menyalin perintah di bawah ini dan langsung menggunakannya pada proyek Anda.

Keputusan Paling Krusial: ETC1S atau UASTC

Basis Universal menyediakan dua mode enkoding perantara. Memilih mode yang salah dapat menurunkan kualitas visual secara drastis:

Aspek	Enkoding ETC1S	Enkoding UASTC
Rasio Kompresi	Sangat tinggi (sebanding dengan JPEG)	Menengah (sebanding dengan PNG berkualitas tinggi)
Kualitas Visual	Cukup untuk peta warna	Sangat dekat dengan file sumber asli
Memori GPU (setelah dekompresi)	~4 bit per piksel (1/8 ukuran asli)	~8 bit per piksel (1/4 ukuran asli)
Kecepatan Enkoding	Relatif lambat (kualitas dapat diatur)	Sangat cepat
Penggunaan Ideal	Peta Albedo/Warna dasar dan Emissive	Peta Normal, Roughness, Metalness, dan Data
Tidak Cocok Untuk	Peta Normal dan data sensitif presisi	Peta Warna standar (ukuran file terlalu besar)

Mengapa peta normal tidak boleh menggunakan ETC1S? Karena peta normal menyimpan vektor arah 3D di mana panjang vektor harus selalu presisi (panjang vektor ≈ 1). Kompresi blok ETC1S dirancang untuk persepsi visual warna mata manusia, bukan akurasi numerik absolut; sehingga vektor arah akan mengalami pergeseran yang merusak pencahayaan specular. Sebaliknya, UASTC mempertahankan presisi matematis yang dibutuhkan.

Aturan praktis cepat:

• Peta Warna (Albedo, Emissive) gunakan ETC1S.
• Peta Data (Normal, Roughness, Metallic, AO) gunakan UASTC.
• Jika ragu dan ingin hemat ukuran: coba ETC1S terlebih dahulu; jika detail jarak dekat tampak buram, beralihlah ke UASTC.

Perbandingan Nyata 4 Format pada Gambar yang Sama

Sebagai contoh pengujian pada tekstur albedo 2048×2048:

Format	Ukuran di Disk	Memori GPU (dengan Mipmaps)	Kecepatan Upload ke GPU	Kompatibilitas Lintas Platform
PNG	~5 MB	~22 MB	Lambat	Mendukung
WebP	~1 MB	~22 MB	Lambat	Mendukung
KTX2 (ETC1S)	~0.5-0.8 MB	~2.8 MB	Sangat Cepat	Mendukung
KTX2 (UASTC)	~3-4 MB	~5.6 MB	Sangat Cepat	Mendukung

Perhatikan bahwa konsumsi memori GPU pada WebP sama persis dengan PNG; kompresi hanya berdampak pada ukuran unduhan jaringan. Setelah masuk ke VRAM GPU, WebP diekstrak menjadi piksel mentah tanpa kompresi. Di sisi lain, KTX2 dengan ETC1S menghemat ukuran disk sekaligus memori GPU secara drastis.

Pilihan Toolchain Kompresi

1. toktx (Alat Resmi Khronos)

Alat resmi dengan parameter paling lengkap, sangat ideal untuk memproses tekstur individual secara mendalam:

# Konversi PNG ke KTX2 berbasis ETC1S
toktx --bcmp --uastc 0 albedo.ktx2 albedo.png

# Konversi PNG ke KTX2 berbasis UASTC
toktx --uastc 1 normal.ktx2 normal.png

Parameter penting yang sering digunakan:

# Menyesuaikan level kualitas ETC1S (1-255, default 128)
toktx --bcmp --uastc 0 --qlevel 200 albedo.ktx2 albedo.png

# Mengaktifkan super-kompresi Zstandard untuk UASTC
toktx --uastc 1 --zcmp 19 normal.ktx2 normal.png

# Membuat mipmaps secara otomatis (sangat disarankan)
toktx --bcmp --genmipmap albedo.ktx2 albedo.png

# Menetapkan ruang warna sRGB untuk peta warna
toktx --bcmp --srgb albedo.ktx2 albedo.png

2. gltf-transform (Solusi Terpadu Paling Praktis)

Jika Anda memiliki model glTF atau GLB utuh, gltf-transform dapat mengompresi seluruh tekstur di dalam model hanya dengan satu perintah:

# Instalasi via npm
npm install -g @gltf-transform/cli

# Kompresi otomatis seluruh tekstur model
gltf-transform optimize model.glb model-optimized.glb \
  --texture-compress basisu

Alat ini otomatis memetakan tekstur warna ke ETC1S dan tekstur data ke UASTC serta menambahkan ekstensi KHR_texture_basisu.

3. Alat Berbasis Web

Jika Anda tidak ingin memasang CLI di komputer lokal, alat online seperti gltf.report dapat digunakan untuk uji coba cepat.

Memuat KTX2 di Three.js

Three.js mendukung KTX2 secara native melalui KTX2Loader:

const ktx2Loader = new KTX2Loader()
  .setTranscoderPath("/basis/")
  .detectSupport(renderer);

gltfLoader.setKTX2Loader(ktx2Loader);

Fungsi detectSupport(renderer) wajib dipanggil untuk mendeteksi format hardware GPU yang didukung pengguna saat runtime. Untuk tekstur warna, pastikan ruang warna diatur ke texture.colorSpace = THREE.SRGBColorSpace.

Memuat KTX2 di Babylon.js

Pada Babylon.js, GLTFFileLoader secara otomatis mengenali ekstensi KHR_texture_basisu dan mengunduh transcoder yang diperlukan secara mandiri tanpa konfigurasi manual tambahan.

Menyesuaikan Parameter Kualitas dan Ukuran

Parameter --qlevel (1-255) mengatur kualitas kompresi ETC1S:

Nilai qlevel	Ukuran File	Kualitas Visual	Waktu Proses	Skenario Penggunaan
128 (default)	Kecil	Cukup untuk sebagian besar kebutuhan	Sedang	Penggunaan umum
200-255	Lebih besar	Mendekati tanpa penurunan kualitas	Lama	Model berkualitas tinggi
60-100	Sangat kecil	Terlihat artefak kompresi	Sangat cepat	Tekstur objek jauh atau kecil

Panduan penyesuaian:

1. Mulai dengan parameter default, lalu periksa ukuran dan kualitas visualnya.
2. Jika butuh kualitas lebih tinggi, tingkatkan --qlevel pada ETC1S atau aktifkan --zcmp pada UASTC.
3. Jika peta normal tampak buram, pastikan Anda menggunakan mode UASTC.
4. Jika warna terlihat terlalu gelap atau pucat, periksa kembali pengaturan ruang warna sRGB.

Pemecahan Masalah Umum

Gagal melakukan transcoding di browser

• Periksa kembali jalur direktori file wasm transcoder di proyek Anda.
• Pastikan versi engine kompatibel dengan versi format Basis yang dihasilkan.

Warna model tampak terlalu gelap atau pucat

• Peta warna Albedo belum dikonfigurasi ke ruang warna sRGB.
• Opsi --srgb terlewat saat menjalankan perintah toktx manual.

Tekstur tampak berkedip (flickering) pada jarak jauh

• Lupa menyertakan argumen --genmipmap saat kompresi tekstur.

Ukuran file hasil kompresi lebih besar dari perkiraan

• Tekstur berukuran sangat kecil (< 128×128 piksel) kurang efisien jika dikompresi dengan KTX2 karena overhead ukuran blok; pertahankan format PNG aslinya.

Langkah Selanjutnya

Setelah menguasai kompresi tekstur, artikel berikutnya akan membahas kerangka keputusan terpadu: memilih kombinasi kompresi geometri dan tekstur yang paling tepat untuk platform desktop, mobile, VR, hingga mini program.