Cara Mengoptimalkan File GLB untuk Web: Draco, Meshopt, dan KTX2 (2026)

Terakhir diperbarui: September 2026.

Untuk mengoptimalkan GLB bagi web, kerjakan dengan urutan berikut: perkecil tekstur terlebih dahulu (batasi pada 1024 atau 2048, enkode ulang sebagai WebP untuk memperkecil ukuran unduhan atau KTX2 untuk menghemat memori GPU), lakukan kuantisasi pada data verteks, kompres geometri dengan Meshopt (atau Draco jika penghematan beberapa ratus kilobita terakhir lebih penting daripada waktu dekode), sederhanakan mesh jika jumlah segitiganya masih tidak masuk akal, lalu pangkas, hapus duplikasi, dan gabungkan sisanya. Satu perintah dapat menangani sebagian besar proses tersebut: gltf-transform optimize in.glb out.glb --texture-compress webp. Urutannya penting karena tekstur biasanya mencakup 80 persen atau lebih dari ukuran file dan seluruh penggunaan memori video.

Jawaban singkat

• Model yang didominasi tekstur (sebagian besar model): ubah ukurannya menjadi 1024 atau 2048, lalu jalankan gltf-transform webp. Jika tersendat atau macet di ponsel, konversikan ke KTX2, baik di browser menggunakan kompresor KTX2 maupun dengan gltf-transform etc1s/uastc.
• Model yang didominasi geometri (hasil pemindaian, CAD, buatan AI): jalankan gltf-transform simplify, lalu meshopt. Draco menghasilkan ukuran sedikit lebih kecil, tetapi proses dekodenya lebih lambat dan memerlukan dekoder sepuluh kali lebih besar.
• Karakter animasi: gunakan Meshopt, bukan Draco. Draco tidak memproses trek animasi dan target morph.
• File harus dapat dibuka di engine yang tidak Anda kendalikan: gunakan gltf-transform quantize. Tidak memerlukan dekoder, hanya KHR_mesh_quantization, yang dapat dibaca oleh semua loader di sini.
• Tanpa terminal: pengoptimal GLB menjalankan pemangkasan, pengelasan verteks, penggabungan, penyederhanaan, pengubahan ukuran tekstur ke WebP, dan Meshopt di browser Anda, disertai informasi ukuran untuk setiap langkah.

Referensi singkat

	Kuantisasi saja	Meshopt	Draco
Ekstensi	KHR_mesh_quantization	EXT_meshopt_compression (+ kuantisasi)	KHR_draco_mesh_compression
Yang dikompresi	Atribut verteks (bit lebih sedikit)	Verteks, indeks, target morph, animasi	Hanya geometri mesh segitiga
Ukuran pada model uji 28 MB kami	22,8 MB (8,1 MB dengan gzip)	5,1 MB (3,3 MB dengan gzip)	2,6 MB (2,5 MB dengan gzip)
Dekoder	Tidak ada	Modul JS 32 KB dengan WASM inline	WASM 192 hingga 286 KB ditambah wrapper 58 KB, fallback JS 719 KB
Kecepatan dekode	Instan, GPU membacanya secara langsung	Sekitar 1 GB/dtk dengan WASM SIMD, menurut spesifikasi	Jauh lebih lambat daripada Meshopt, menurut dokumentasi glTF-Transform
Memerlukan gzip/brotli di server	Sangat membantu	Ya, memang dirancang untuk itu	Hanya sedikit manfaat
Loader	three.js, Babylon.js, PlayCanvas, glTFast	three.js r122+, Babylon.js 5.0+, glTFast (paket tambahan), tidak mendukung PlayCanvas	three.js, Babylon.js, PlayCanvas, glTFast (paket tambahan)

Berikut angka yang sama dalam bentuk diagram batang, disertai hasil gltfpack dan penyederhanaan dari pengujian perbandingan.

Draco unggul dalam ukuran byte, tetapi gzip hampir tidak memberikan penghematan tambahan, sedangkan output Meshopt dan hasil kuantisasi mengandalkan kompresor server. Penyederhanaan adalah satu-satunya langkah yang mengubah jumlah segitiga, sehingga ukuran 8,1 MB tersebut merupakan titik awal baru, bukan hasil akhir.

Ke mana byte digunakan dalam GLB

Jalankan gltf-transform inspect model.glb sebelum melakukan apa pun. Perintah ini mencantumkan setiap mesh beserta jumlah verteks dan jenis atributnya, setiap tekstur beserta ukuran terenkode dan gpuSize, serta setiap animasi beserta jumlah keyframe-nya. Angka dalam panduan ini berasal dari dokumentasi alat dan spesifikasi ekstensi, ditambah pengujian perbandingan yang kami lakukan minggu ini menggunakan gltf-transform 4.5.0 dan gltfpack 1.2 pada dua file nyata. Hasilnya menunjukkan dua pola yang akan Anda temui.

Sebuah properti Sketchfab berukuran 2,2 MB (cangkir low-poly) memiliki 680 segitiga dan geometri sebesar 39 KB. Sebanyak 2,18 MB sisanya berasal dari tiga PNG berukuran 1024×1024, sehingga tekstur mencakup 98 persen file, dan inspect memperkirakan masing-masing menggunakan VRAM sebesar 5,59 MB setelah mipmap diterapkan. Ini adalah kasus umum untuk aset buatan tangan.

Output TRELLIS.2 berukuran 28,7 MB menunjukkan kondisi sebaliknya: 978.226 segitiga dan geometri float32 sebesar 27,5 MB, dengan tekstur hanya 1,1 MB. Namun, kedua tekstur tersebut berukuran 4096×4096, yang menurut inspect menggunakan VRAM sebesar 89,5 MB per tekstur. Model dari generator model 3D dan alat sejenisnya sering hadir dalam kondisi seperti ini—padat dan memiliki tekstur berlebihan—sehingga membutuhkan langkah pengoptimalan geometri sekaligus tekstur.

Baris umum merupakan pedoman praktis, sedangkan dua baris lainnya berasal dari file nyata dalam pengujian perbandingan. Perhatikan kolom kanan: tekstur 1024 pada cangkir dan tekstur 4096 pada TRELLIS.2 sama-sama berukuran kecil di penyimpanan, tetapi penggunaan memori videonya sangat berbeda.

Perlu diperhatikan bahwa ukuran tekstur terenkode dan ukuran GPU tidak berkaitan. PNG 4 MB dan WebP 200 KB dari gambar 2048×2048 yang sama, keduanya akan menggunakan sekitar 22 MB dalam memori video setelah menjadi piksel mentah beserta mipmap. Hanya KTX2 yang dapat mengubah angka tersebut.

Enam langkah berikut dijalankan dalam urutan ini karena setiap langkah memperkecil data yang harus diproses oleh langkah selanjutnya.

Ikuti nomor dari atas ke bawah. Langkah 1 dan 4 adalah tempat sebagian besar byte berada, langkah 2 tidak terlihat kecuali pada satu mesh raksasa, dan langkah 5 harus dijalankan dengan hati-hati pada karakter ber-rig karena penggabungan menyatukan bagian-bagian yang seharusnya bergerak.

Langkah 1: tekstur

Dua masalah terpisah, dua perbaikan terpisah.

Ukuran unduhan diperbaiki dengan mengubah ukuran dan mengenkode ulang. Hanya sedikit prop yang membutuhkan lebih dari 1024×1024, dan karakter utama jarang membutuhkan lebih dari 2048. gltf-transform resize --width 1024 --height 1024 membatasi dimensi tanpa pernah memperbesarnya, sedangkan gltf-transform webp mengenkode ulang dengan sharp. Pada cangkir, WebP saja mengurangi berkas dari 2,23 MB menjadi 246 KB. Mengubah ukurannya ke 512 terlebih dahulu menguranginya menjadi 96 KB tanpa perubahan yang terlihat pada prop sebesar itu. WebP memerlukan EXT_texture_webp, yang dapat dibaca oleh engine web tetapi tidak oleh glTFast milik Unity (tabel fiturnya menyatakan fitur itu "tidak akan didukung").

Memori GPU dan waktu unggah hanya dapat diperbaiki dengan KTX2 menggunakan superkompresi Basis Universal, yang mempertahankan tekstur dalam format blok GPU hingga masuk ke VRAM dengan penggunaan memori 4 hingga 8 kali lebih kecil daripada RGBA mentah. Topik ini memiliki bagian tersendiri di bawah karena pengaturannya penting.

Satu peringatan dari pengujian perbandingan: gltf-transform optimize secara default menggunakan --texture-compress auto, yang mengenkode ulang tekstur dalam format aslinya. Pada cangkir, hal itu membuat PNG lebih besar dan ukuran berkas meningkat dari 2,2 MB menjadi 2,8 MB. Tentukan webp atau ktx2 secara eksplisit.

Langkah 2: kuantisasi

Kuantisasi menyimpan setiap atribut verteks dengan lebih sedikit bit. Posisi berubah dari tiga float 32-bit menjadi tiga bilangan bulat 16-bit, dengan skala dan offset dimasukkan ke transformasi node (atau ke inverseBindMatrices untuk mesh ber-skin). Spesifikasi KHR_mesh_quantization memperkirakan satu verteks biasa sekitar 20 byte, bukan 48. Ini adalah ekstensi Khronos yang telah diratifikasi dan tidak memerlukan dekoder: GPU membaca atribut bilangan bulat secara langsung, sehingga berkas terkuantisasi lebih hemat di VRAM maupun saat ditransfer melalui jaringan.

Default glTF-Transform adalah 14 bit untuk posisi, 10 untuk normal dan tangen, 12 untuk UV, serta 8 untuk warna dan bobot. Default gltfpack adalah 14, 8, 12, dan 8. Keduanya tidak terlihat kecuali pada satu mesh raksasa, ketika 14 bit di seluruh rentang mesh dapat tampak sebagai permukaan bersegi. Jika digunakan sendiri, dampak kuantisasi tidak terlalu besar: model 28 MB kami turun menjadi 22,8 MB mentah dan 8,1 MB dengan gzip. Fungsi utamanya adalah menjadi separuh pertama Meshopt, sekaligus keluaran aman ketika loader tujuan belum pasti. Draco melakukan kuantisasi secara internal dengan default yang sama, jadi jangan jalankan quantize sebelum draco.

Langkah 3: Meshopt atau Draco

Keduanya merupakan codec geometri lossy yang didekode menjadi buffer biasa sebelum diunggah ke GPU, sehingga keduanya tidak membuat model dirender lebih cepat. Keduanya mengecilkan unduhan. Perbedaannya terletak pada apa yang dikompresi, seberapa cepat proses dekodenya, dan seberapa besar dekoder yang harus Anda kirimkan.

Meshopt (EXT_meshopt_compression) bekerja pada tingkat bufferView, sehingga atribut verteks, indeks, delta target morph, dan keyframe animasi semuanya dikompresi. Meshopt dirancang untuk ditempatkan di atas kuantisasi dan di bawah gzip atau brotli: codec ini membuat byte menjadi teratur, lalu kompresor serbaguna CDN menangani sisanya. Spesifikasinya menyebutkan kecepatan dekode sekitar 1 GB/dtk dengan WebAssembly SIMD, dan dekoder three.js hanya berupa satu modul berukuran 32 KB. Pada model uji: 5,1 MB mentah, 3,3 MB dengan gzip, pada default --level high.

Draco (KHR_draco_mesh_compression) hanya mengompresi primitif mesh segitiga. Animasi, target morph, titik, dan garis diteruskan tanpa perubahan. Kompresinya lebih kuat, menghasilkan 2,6 MB pada model yang sama, dan gzip nyaris tidak membantu karena keluarannya sudah padat. Imbalannya adalah waktu dekode dan ukuran dekoder: dokumentasi glTF-Transform menyatakan dengan jelas bahwa dekode Meshopt jauh lebih cepat, sedangkan dekoder WASM yang dibundel three.js berukuran 286 KB (192 KB untuk build cabang glTF), ditambah wrapper 58 KB, serta fallback JavaScript 719 KB. Draco juga mengubah urutan dan dapat mengubah jumlah verteks.

Jadi: gunakan Meshopt untuk apa pun yang beranimasi, memiliki target morph, mengutamakan waktu muat di ponsel, dan disajikan dengan brotli aktif. Gunakan Draco ketika asetnya berupa mesh statis, geometri mendominasi, dan pengurangan transfer jaringan sebesar 20 hingga 30 persen sepadan dengan frame pertama yang lebih lambat. Tidak yakin? Gunakan Meshopt. -cc milik gltfpack (Meshopt dalam mode lebih kuat) menghasilkan 4,4 MB mentah dan 3,1 MB dengan gzip pada berkas yang sama.

Langkah 4: penyederhanaan

Jika model masih besar setelah kompresi, berarti segitiganya terlalu banyak, dan tidak ada codec yang dapat memperbaiki itu. Kedua alat menggunakan penyederhana meshoptimizer, yang menerima rasio target dan batas galat, lalu berhenti saat salah satunya tercapai terlebih dahulu.

gltf-transform simplify --ratio 0.25 --error 0.01 menargetkan 25 persen verteks dengan penyimpangan dalam batas 1 persen dari radius mesh. Pada model dengan 978 ribu segitiga, hasilnya adalah 244.556 segitiga dan 8,1 MB sebelum kompresi, serta tampak identik dari jarak permainan. Default optimize lebih agresif daripada yang mungkin Anda duga: --simplify-ratio 0 dengan --simplify-error 0.0001, yang berarti "hapus sebanyak mungkin dalam batas galat 0,01 persen". Pada model dengan teselasi berlebihan yang sama, jumlahnya merosot menjadi 6.582 segitiga karena generator telah menghabiskan hampir satu juta segitiga untuk permukaan datar. Lakukan weld sebelum menyederhanakan (optimize melakukannya), karena verteks terpisah menghentikan penyederhana di seam.

-si 0.25 milik gltfpack menggunakan konsep yang sama, dengan -se 0.01 sebagai batas galat default, -sa untuk mencapai rasio tanpa memedulikan kualitas, dan -slb untuk mengunci verteks tepi agar mesh modular tidak membuka celah. Prop hard-surface dengan mudah menoleransi pengurangan 50 persen, mesh hasil pemindaian dan buatan AI biasanya menoleransi penghapusan 90 persen, sedangkan karakter ber-rig memerlukan kehati-hatian di dekat sendi karena menggabungkan verteks juga menggabungkan bobot skin.

Langkah 5: pangkas, deduplikasi, gabungkan, buat instans

Ini semua adalah keuntungan gratis dan optimize menjalankan semuanya. prune menghapus material, tekstur, accessor, dan node yang tidak dirujuk apa pun, serta mengubah tekstur satu warna menjadi faktor material. dedup menggabungkan accessor dan tekstur identik yang ditulis dua kali oleh eksportir. flatten meratakan hierarki dan join menggabungkan mesh yang memakai material yang sama, sehingga 200 draw call dapat berubah menjadi segelintir. instance (mulai dari 5 salinan) mengubah mesh berulang menjadi EXT_mesh_gpu_instancing, sedangkan palette menggabungkan material yang hanya berbeda warna.

Jangan gunakan join atau flatten pada karakter ber-rig atau apa pun yang bagiannya digerakkan oleh game Anda, karena bagian-bagian tersebut akan melebur menjadi satu mesh. Jalan keluar gltfpack adalah -kn (pertahankan node bernama) dan -km (pertahankan material bernama).

Langkah 6: animasi

Eksportir sering melakukan bake satu keyframe pada setiap frame. gltf-transform resample membuang keyframe yang berada di garis antara keyframe tetangganya (toleransi default 1e-4), yang praktis tanpa kehilangan. -af 30 milik gltfpack melakukan sampling ulang setiap track pada 30 Hz dan menguantisasi translasi menjadi 16 bit, rotasi menjadi 12, dan skala menjadi 16 (-at, -ar, -as) sebelum Meshopt mengompresinya. Pada karakter biasa dengan beberapa klip, dampaknya kecil. Pada pustaka gerakan, animasi dapat menyumbang sebagian besar byte.

Baris perintah

CLI glTF-Transform adalah npm install --global @gltf-transform/cli, atau npx @gltf-transform/cli. Sekali jalan:

gltf-transform optimize in.glb out.glb --texture-compress webp --texture-size 1024

Perintah tersebut menjalankan, secara berurutan, dedup, instance, palette, flatten, join, weld, simplify (rasio 0, galat 0,0001), resample, prune, sparse, kompresi tekstur dengan batas 1024, dan Meshopt pada level high. Tambahkan --compress draco untuk Draco, --compress quantize untuk kuantisasi saja, --no-join --no-flatten untuk model ber-rig atau berartikulasi, --simplify false jika siluet lebih penting daripada ukuran berkas, dan --texture-compress ktx2 jika KTX-Software telah terpasang.

Langkah-langkah individual jika Anda menginginkan kendali lebih besar:

gltf-transform inspect in.glb
gltf-transform resize in.glb a.glb --width 1024 --height 1024
gltf-transform webp a.glb b.glb --quality 80
gltf-transform weld b.glb c.glb
gltf-transform simplify c.glb d.glb --ratio 0.5 --error 0.001
gltf-transform meshopt d.glb out.glb --level high

Ganti baris terakhir dengan gltf-transform draco d.glb out.glb (--encode-speed dan --decode-speed berkisar dari 0 hingga 10, default 5, nilai lebih rendah menghasilkan berkas lebih kecil) atau gltf-transform quantize d.glb out.glb.

gltfpack tersedia melalui npm install -g gltfpack atau sebagai biner native dari rilis meshoptimizer, yang direkomendasikan README untuk berkas besar. Default-nya sudah melakukan kuantisasi, mengoptimalkan urutan verteks untuk cache GPU, dan menggabungkan mesh:

gltfpack -i in.glb -o out.glb -cc -si 0.5 -tw -tl 1024 -kn

-cc adalah Meshopt dalam mode kompresi lebih tinggi (-c adalah mode cepat, -cf menambahkan fallback tanpa kompresi untuk loader yang tidak memiliki dekoder). -si 0.5 mengurangi segitiga menjadi setengah dalam batas -se 0.01. -tw mengubah tekstur menjadi WebP dan -tl 1024 membatasi ukurannya. -kn mempertahankan node bernama. Untuk KTX2, ganti -tw dengan -tc (ETC1S) atau -tc -tu (UASTC), yang memerlukan build gltfpack dengan Basis Universal yang ditautkan.

Jika tidak satu pun CLI dapat digunakan, alat peramban menjalankan urutan yang sama.

Jalur tanpa terminal: pangkas, weld, gabungkan, sederhanakan, ubah ukuran tekstur ke WebP, dan jalankan Meshopt di peramban, dengan tampilan ukuran setelah setiap langkah agar Anda dapat melihat langkah mana yang paling berdampak.

KTX2: ETC1S atau UASTC

KTX2 adalah kontainer Khronos untuk tekstur GPU. Dengan superkompresi Basis Universal, tekstur ditranskode saat dimuat ke format blok apa pun yang tersedia pada perangkat (BC di desktop, ASTC atau ETC2 di perangkat seluler) dan tetap terkompresi di memori. Ekstensi glTF-nya adalah KHR_texture_basisu. Basis memiliki dua mode. ETC1S adalah mode berukuran kecil: README Basis menyebut ukurannya sekitar 0,3 hingga 3 bit per piksel di disk dengan pengaturan kualitas seperti JPEG (1 hingga 255, bawaan 128), dan di memori menjadi 4 bit per piksel dalam format seperti BC1 dan ETC1. Gunakan untuk warna dasar pada prop. UASTC adalah mode berkualitas tinggi: 8 bit per piksel di memori, subset 19 mode dari ASTC 4×4, dengan tingkat kualitas 0 hingga 4 (bawaan 2, yang menurut bantuan glTF-Transform menghasilkan 47,47 dB). File UASTC berukuran besar di disk, jadi padukan dengan Zstandard: perintah uastc glTF-Transform menggunakan --zstd 18 secara bawaan, dan ktx create --zstd menerima nilai 1 hingga 22.

Perhitungannya untuk tekstur 2048×2048 dengan mipmap: sekitar 22 MB sebagai RGBA8, sekitar 5,6 MB sebagai UASTC, dan sekitar 2,8 MB sebagai ETC1S yang ditranskode ke format 4 bpp.

Ada tiga aturan penting. Normal map dan data map sebaiknya memakai UASTC dan linear. glTF-Transform memperingatkan bahwa normal map RGB serta map oklusi/kekasaran/metalness dapat terlihat buruk dengan ETC1S, dan spesifikasi mewajibkan tekstur warna ditandai sebagai sRGB serta data nonwarna sebagai linear. glTF-Transform mengaturnya per slot untuk Anda. Di kompresor KTX2, pengaturannya adalah tombol sRGB: aktif untuk warna, nonaktif untuk normal map dan data map. Dimensi harus merupakan kelipatan 4, dan pangkat dua disarankan. Buat mipmap. Spesifikasi menyatakan bahwa KTX2 yang digunakan dengan minifikasi bermipmap harus membawa piramida lengkap, atau engine harus mendekompresi dan membuatnya saat runtime. Mipmap aktif secara bawaan di glTF-Transform dan alat browser, serta melalui --generate-mipmap di ktx create.

Perintah glTF-Transform memerlukan binary ktx dari KTX-Software, versi 4.4.0 atau yang lebih baru:

gltf-transform uastc in.glb a.glb --level 2 --zstd 18 --slots "{normalTexture,occlusionTexture,metallicRoughnessTexture}"
gltf-transform etc1s a.glb out.glb --quality 128

Terapkan UASTC pada slot data terlebih dahulu, lalu ETC1S pada sisanya. Pembagian ini—ETC1S untuk warna dasar dan emisif, serta UASTC untuk normal dan ORM—adalah pilihan yang umum.

Memuat hasilnya

Setiap codec selain kuantisasi memerlukan dekoder di sisi klien.

three.js. GLTFLoader membaca KHR_mesh_quantization dan EXT_texture_webp tanpa penyiapan tambahan. Untuk yang lain, Anda perlu memasang dekoder yang disertakan dalam paket three di bawah examples/jsm/libs/ sebagai draco/, basis/, dan meshopt_decoder.module.js. Salin draco/ dan basis/ ke path publik, lalu:

import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'
import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js'
import { KTX2Loader } from 'three/addons/loaders/KTX2Loader.js'
import { MeshoptDecoder } from 'three/addons/libs/meshopt_decoder.module.js'

const draco = new DRACOLoader().setDecoderPath('/libs/draco/')
const ktx2 = new KTX2Loader().setTranscoderPath('/libs/basis/').detectSupport(renderer)
const loader = new GLTFLoader()
  .setDRACOLoader(draco)
  .setKTX2Loader(ktx2)
  .setMeshoptDecoder(MeshoptDecoder)

DRACOLoader memilih dekoder WASM ketika browser mendukungnya dan beralih ke JS sebagai fallback. detectSupport(renderer) memungkinkan KTX2Loader memilih target transkode yang sesuai dengan GPU perangkat.

Babylon.js. Loader glTF menangani Draco, Meshopt (sejak versi 5.0, tanpa penyiapan) dan KTX2 dengan mengunduh dekoder dari https://cdn.babylonjs.com lalu menjalankannya di web worker. Untuk melakukan self-hosting, atur Tools.CDNBaseUrl, atau arahkan konfigurasi masing-masing: DracoDecoder.DefaultConfiguration (wasmUrl, wasmBinaryUrl, fallbackUrl), MeshoptCompression.Configuration.decoder.url, dan KhronosTextureContainer2.URLConfig untuk kumpulan transkoder KTX2. Dengan npm, @babylonjs/ktx2decoder menyertakan transkoder tersebut.

PlayCanvas. Draco dikonfigurasi dengan dracoInitialize({ jsUrl, wasmUrl, numWorkers, lazyInit }), dan Editor dapat mengompresi dengan Draco saat impor. KTX2 menggunakan basisInitialize({ glueUrl, wasmUrl, fallbackUrl }). EXT_meshopt_compression belum tersedia di parser GLB pada engine 2.x (permintaan fitur dari tahun 2020 masih terbuka), jadi untuk PlayCanvas pilih output Draco atau kuantisasi saja.

Unity. Importer resminya adalah glTFast (com.unity.cloud.gltfast). KHR_mesh_quantization langsung berfungsi tanpa konfigurasi, Draco memerlukan com.unity.cloud.draco, KTX2 memerlukan com.unity.cloud.ktx, dan Meshopt memerlukan com.unity.meshopt.decompress. WebP sengaja tidak didukung, jadi gunakan KTX2 jika targetnya adalah Unity.

Target untuk game web seluler

Tidak ada spesifikasi baku untuk ini, tetapi ada beberapa angka yang membantu menjaga performa ponsel. Pertahankan keseluruhan scene pertama di bawah sekitar 10 MB saat ditransfer melalui jaringan dan lakukan streaming untuk sisanya (tutorial pemuatan aset secara streaming membahas tingkatan, antrean prioritas, dan kodenya). Pertahankan VRAM tekstur di bawah 150 hingga 200 MB, setara dengan empat atau lima tekstur 2048 sebagai RGBA8 atau tiga puluh sebagai ETC1S. Pertahankan prop di bawah 5.000 segitiga, karakter utama di bawah 30.000 hingga 50.000, dan draw call di kisaran ratusan rendah. Gunakan tekstur 1024 untuk prop dan 2048 hanya untuk objek yang akan dilihat kamera dari dekat. Sajikan GLB dengan brotli atau gzip aktif karena output Meshopt dan hasil kuantisasi mengandalkannya.

Verifikasi sebelum dirilis

Ukuran file adalah angka yang paling mudah diperiksa. Buka hasilnya di penampil GLB dan periksa hal lainnya: panel Extensions memastikan EXT_meshopt_compression, KHR_draco_mesh_compression, atau KHR_texture_basisu benar-benar masuk ke dalam file, tab Textures mencantumkan setiap tekstur berdasarkan biaya VRAM aktual dari yang terbesar, dan bilah status menampilkan jumlah draw call serta segitiga secara langsung. Kemudian periksa siluet dan sambungan UV untuk mencari artefak penyederhanaan pada jarak pandang pemain, lalu putar semua animasi untuk memastikan proses penggabungan tidak menyatukan bagian yang seharusnya bergerak. Jika sumber awalnya bukan GLB, proses dahulu FBX atau OBJ melalui konverter FBX ke GLB, sehingga Anda mengompresi file yang benar-benar akan dimuat.

Buka hasil kompresi di sini untuk memastikan ekstensi benar-benar masuk ke dalam file, lalu lihat jumlah draw call dan segitiga pada bilah status serta biaya VRAM aktual setiap tekstur di tab Textures.

Pertanyaan umum

Bagaimana cara mengurangi ukuran file GLB?

Jalankan gltf-transform inspect untuk melihat apakah tekstur atau geometri yang paling dominan. Jika tekstur, ubah ukurannya menjadi 1024 atau 2048 lalu konversikan ke WebP atau KTX2. Jika geometri, sederhanakan lalu kompres dengan Meshopt atau Draco. gltf-transform optimize in.glb out.glb --texture-compress webp menjalankan seluruh rangkaian tersebut, dan pengoptimal GLB di browser melakukannya tanpa instalasi.

Draco vs Meshopt: mana yang lebih baik?

Meshopt untuk sebagian besar game web. Proses dekodenya jauh lebih cepat, hanya memerlukan dekoder 32 KB alih-alih WASM berukuran beberapa ratus kilobyte, serta mengompresi animasi dan morph target yang dilewati oleh Draco. Draco menghasilkan file lebih kecil untuk mesh statis (2,6 MB dibandingkan 3,3 MB setelah gzip pada model uji 28 MB kami) dan didukung oleh PlayCanvas, jadi Draco lebih unggul ketika asetnya berupa hasil pemindaian statis dan geometri menghabiskan sebagian besar ukuran file.

Apa itu KTX2 dan apa bedanya dengan Basis?

Basis Universal adalah codec kompresi dengan dua mode, ETC1S dan UASTC. KTX2 adalah file kontainer Khronos yang menyimpan data tekstur terkompresi Basis beserta mipmap dan metadata, serta menjadi format yang dirujuk glTF melalui KHR_texture_basisu. Pipeline lama menggunakan file .basis secara langsung. Gunakan .ktx2.

Haruskah saya menggunakan ETC1S atau UASTC?

Gunakan ETC1S untuk warna dasar dan apa pun yang tidak dilihat dari dekat: file kecil dan 4 bit per piksel di VRAM. Gunakan UASTC untuk normal map, kekasaran/metalness/oklusi, dan tekstur karakter utama, dengan superkompresi Zstandard aktif agar ukuran unduhan tetap wajar. Tandai tekstur warna sebagai sRGB dan tekstur data sebagai linear, atau pencahayaan normal akan terlihat keliru.

Bagaimana cara mengompresi tekstur glTF?

Untuk ukuran unduhan, gunakan gltf-transform resize lalu gltf-transform webp. Untuk memori GPU, gunakan gltf-transform etc1s atau uastc dengan KTX-Software terpasang, atau jatuhkan file PNG ke kompresor KTX2. Batasi dimensinya terlebih dahulu dalam kedua kasus: tekstur 4096 memakai VRAM sebesar 89 MB sebagai RGBA8 dan hampir tidak pernah ada alasan untuk menyajikannya di browser.

Mengapa GLB saya terlalu besar untuk three.js di perangkat seluler?

Biasanya masalahnya bukan ukuran file, melainkan memori tekstur. Empat tekstur RGBA 2048 memakai sekitar 90 MB VRAM bahkan sebelum scene menggambar apa pun, dan browser ponsel akan menutup tab setelah penggunaan melewati beberapa ratus megabyte. Konversikan ke KTX2 agar tekstur tetap terkompresi di GPU, batasi ke 1024 jika memungkinkan, dan panggil KTX2Loader.detectSupport(renderer) agar tekstur ditranskode ke format perangkat.

Apakah gltfpack melakukan hal yang sama dengan gltf-transform?

Sebagian besar, ya. gltfpack adalah satu binary native dari proyek meshoptimizer yang secara bawaan melakukan kuantisasi, mengurutkan ulang vertex untuk cache GPU, menggabungkan mesh, dan mengompresi dengan Meshopt. glTF-Transform adalah pustaka Node dan CLI yang menyediakan operasi yang sama sebagai langkah-langkah terpisah yang dapat ditulis dalam skrip, ditambah output Draco yang tidak dapat ditulis gltfpack. Pada file pengujian kami, ukuran output Meshopt keduanya berselisih sekitar 10 persen.

Terkait

• Pemuatan aset secara streaming untuk game web: tingkatan, antrean prioritas, dan bilah progres untuk file yang baru Anda perkecil
• Tech Stack Game Web pada 2026: WebGL, WebGPU, Wasm, dan format aset pada tingkat API
• Situs Model 3D Gratis: dari mana model berasal dan mengapa ukurannya besar
• Generator Model 3D AI Terbaik: output yang dihasilkan generator dan seberapa padat geometrinya
• Three.js vs Babylon.js: keduanya memuat Draco, Meshopt, dan KTX2 dengan penyiapan yang berbeda
• PlayCanvas vs Three.js: engine versus pustaka, termasuk pipeline aset