Web İçin GLB Dosyaları Nasıl Optimize Edilir: Draco, Meshopt ve KTX2 (2026)

Son güncelleme: Eylül 2026.

Web için bir GLB'yi şu sırayla optimize edin: önce dokuları küçültün (boyutlarını 1024 veya 2048 ile sınırlayın, indirme boyutu için WebP ya da GPU belleği için KTX2 olarak yeniden kodlayın), tepe noktası verilerini nicemleyin, geometriyi Meshopt ile sıkıştırın (veya çözme süresinden ziyade son birkaç yüz kilobayt daha önemliyse Draco kullanın), üçgen sayısı hâlâ anlamsız derecede yüksekse ağı sadeleştirin, ardından geriye kalanları budayın, yinelenenleri kaldırın ve birleştirin. Tek bir komut bunların çoğunu yapar: gltf-transform optimize in.glb out.glb --texture-compress webp. Sıralama önemlidir; çünkü dokular genellikle dosyanın yüzde 80'ini veya daha fazlasını ve video belleğinin tamamını oluşturur.

Kısa yanıt

• Doku ağırlıklı model (çoğu model): boyutu 1024 veya 2048'e düşürün, ardından gltf-transform webp kullanın. Telefonlarda takılıyor veya çöküyorsa bunun yerine tarayıcıdaki KTX2 sıkıştırıcı ya da gltf-transform etc1s/uastc ile KTX2'ye dönüştürün.
• Geometri ağırlıklı model (taramalar, CAD, yapay zekâ üretimi): gltf-transform simplify, ardından meshopt kullanın. Draco biraz daha küçük dosyalar üretir ancak daha yavaş çözer ve on kat daha büyük bir kod çözücü gerektirir.
• Animasyonlu karakter: Draco değil, Meshopt kullanın. Draco, animasyon izlerine ve morph hedeflerine dokunmaz.
• Dosyanın kontrolünüzde olmayan bir motorda açılması gerekiyorsa: gltf-transform quantize kullanın. Kod çözücü gerekmez; yalnızca buradaki her yükleyicinin okuyabildiği KHR_mesh_quantization kullanılır.
• Terminal yoksa: GLB optimize edici, her adım için boyut bilgisi göstererek tarayıcınızda budama, kaynak yapma, birleştirme, sadeleştirme, dokuları WebP'ye yeniden boyutlandırma ve Meshopt işlemlerini çalıştırır.

Hızlı başvuru

	Yalnızca nicemleme	Meshopt	Draco
Uzantı	KHR_mesh_quantization	EXT_meshopt_compression (+ nicemleme)	KHR_draco_mesh_compression
Neyi sıkıştırır?	Tepe noktası öznitelikleri (daha az bit)	Tepe noktaları, indisler, morph hedefleri, animasyon	Yalnızca üçgen ağ geometrisi
28 MB'lık test modelimizdeki boyut	22,8 MB (gzip ile 8,1 MB)	5,1 MB (gzip ile 3,3 MB)	2,6 MB (gzip ile 2,5 MB)
Kod çözücü	Yok	Satır içi WASM içeren 32 KB JS modülü	192 ila 286 KB WASM ve 58 KB sarmalayıcı, 719 KB JS geri dönüşü
Çözme hızı	Anında; GPU doğrudan okur	Spesifikasyona göre WASM SIMD ile yaklaşık 1 GB/sn	glTF-Transform belgelerine göre Meshopt'tan belirgin biçimde daha yavaş
Sunucuda gzip/brotli gerekir mi?	Çok yardımcı olur	Evet, bunun için tasarlanmıştır	Kazancı azdır
Yükleyiciler	three.js, Babylon.js, PlayCanvas, glTFast	three.js r122+, Babylon.js 5.0+, glTFast (ek paket), PlayCanvas değil	three.js, Babylon.js, PlayCanvas, glTFast (ek paket)

Aşağıda aynı sayılar çubuklarla, karşılaştırmadaki gltfpack ve sadeleştirme sonuçlarıyla birlikte gösteriliyor.

Bayt açısından Draco kazanıyor ancak gzip ona neredeyse hiçbir katkı sağlamıyor; Meshopt ve nicemlenmiş çıktı ise sunucu sıkıştırmasına dayanıyor. Üçgen sayısını değiştiren tek adım sadeleştirmedir; bu nedenle 8,1 MB'lık sonuç bir bitiş çizgisi değil, yeni bir başlangıç noktasıdır.

GLB'de baytlar nereye gider?

Her şeyden önce gltf-transform inspect model.glb komutunu çalıştırın. Bu komut her ağı tepe noktası sayısı ve öznitelik türleriyle, her dokuyu kodlanmış boyutu ve gpuSize değeriyle, her animasyonu da anahtar kare sayısıyla listeler. Bu kılavuzdaki sayılar, araç belgeleri ve uzantı spesifikasyonlarının yanı sıra bu hafta gltf-transform 4.5.0 ve gltfpack 1.2 kullanarak iki gerçek dosyayla yaptığımız karşılaştırmadan geliyor; karşılaşacağınız iki yapıyı gösteriyorlar.

2,2 MB'lık bir Sketchfab aksesuarında (düşük poligonlu bir fincan) 680 üçgen ve 39 KB geometri vardı. Kalan 2,18 MB'ı üç adet 1024×1024 PNG oluşturuyordu; yani dokular dosyanın yüzde 98'iydi ve inspect, mipmap uygulandığında her biri için 5,59 MB VRAM tahmin ediyordu. El yapımı varlıklarda sık görülen durum budur.

28,7 MB'lık bir TRELLIS.2 çıktısı ise tam tersiydi: 978.226 üçgen, 27,5 MB float32 geometri ve yalnızca 1,1 MB doku. Ancak bu iki doku 4096×4096 boyutundaydı ve inspect, her birinin VRAM kullanımını 89,5 MB olarak gösteriyordu. 3D model oluşturucu ve benzerlerinden gelen modeller genellikle bu şekilde, yoğun ve aşırı dokulandırılmış olur; dolayısıyla doku adımlarının yanı sıra geometri adımlarına da ihtiyaç duyarlar.

Tipik satır genel kuralı, diğer iki satır ise karşılaştırmadaki gerçek dosyaları gösterir. Sağ sütuna dikkat edin: fincanın 1024 çözünürlüklü dokuları ile TRELLIS.2'nin 4096 çözünürlüklü dokuları diskte küçük olsa da video belleğinde son derece farklı boyutlara sahiptir.

Kodlanmış doku boyutu ile GPU boyutunun birbiriyle ilişkili olmadığını unutmayın. Aynı 2048×2048 görüntünün 4 MB'lık PNG'si de 200 KB'lık WebP'si de video belleğinde ham pikseller ve mipmap'lerle birlikte yaklaşık 22 MB olur. Bu değeri yalnızca KTX2 değiştirir.

Aşağıdaki altı adım bu sırayla çalıştırılır; çünkü her biri bir sonraki adımın işlemesi gereken veriyi küçültür.

Numaraları yukarıdan aşağıya izleyin. Baytların çoğu 1. ve 4. adımlardadır; 2. adım, devasa tek bir mesh dışında görünmez; 5. adım ise rig'lenmiş bir karakterde dikkatle uygulanmalıdır, çünkü birleştirme hareket etmesi gereken parçaları kaynaştırır.

1. Adım: dokular

İki ayrı sorun, iki ayrı çözüm.

İndirme boyutu, yeniden boyutlandırma ve yeniden kodlamayla düzeltilir. Çok az prop 1024×1024'ten fazlasına ihtiyaç duyar ve bir ana karakter için 2048 genellikle yeterlidir. gltf-transform resize --width 1024 --height 1024, görüntüleri hiçbir zaman büyütmeden boyutları sınırlar; gltf-transform webp ise sharp ile yeniden kodlar. Bardakta yalnızca WebP kullanılması dosyayı 2,23 MB'den 246 KB'ye indirdi. Önce 512'ye yeniden boyutlandırmak, bu boyuttaki bir prop üzerinde görünür hiçbir değişiklik olmadan dosyayı 96 KB'ye düşürdü. WebP, web motorlarının okuyabildiği ancak Unity'nin glTFast'inin desteklemediği EXT_texture_webp uzantısını gerektirir (özellik tablosunda bunun “desteklenmeyeceği” belirtiliyor).

GPU belleği ve yükleme süresi, yalnızca Basis Universal süper sıkıştırmalı KTX2 ile iyileştirilir. Bu yöntem dokuyu VRAM'e kadar GPU blok formatında tutar ve ham RGBA'ya göre 4 ila 8 kat daha az bellek kullanır. Ayarlar önemli olduğundan aşağıda kendine ait bir bölümü vardır.

Karşılaştırmalı testten bir uyarı: gltf-transform optimize, varsayılan olarak --texture-compress auto kullanır ve dokuları özgün formatlarında yeniden kodlar. Bu, bardaktaki PNG'leri büyüttü ve dosya 2,2 MB'den 2,8 MB'ye çıktı. webp veya ktx2 seçeneğini açıkça belirtin.

2. Adım: niceleme

Niceleme, her köşe niteliğini daha az bit kullanarak saklar. Bir konum, ölçek ve ofset düğüm dönüşümüne (veya skin'li mesh'lerde inverseBindMatrices içine) katılarak üç adet 32 bit kayan noktalı sayı yerine üç adet 16 bit tamsayıya dönüşür. KHR_mesh_quantization belirtimine göre tipik bir köşe yaklaşık 48 bayt yerine 20 bayt yer kaplar. Bu, kod çözücü gerektirmeyen, Khronos tarafından onaylanmış bir uzantıdır: GPU tamsayı niteliklerini doğrudan okur; dolayısıyla nicelenmiş dosyalar hem aktarımda hem de VRAM'de daha az yer kaplar.

glTF-Transform'un varsayılanları konumlar için 14 bit, normaller ve teğetler için 10, UV'ler için 12, renkler ve ağırlıklar için 8 bittir. gltfpack'in değerleri ise 14, 8, 12 ve 8'dir. Her ikisi de devasa tek bir mesh dışında fark edilmez; böyle bir mesh'te tüm genişlik boyunca 14 bit kullanılması yüzeyde köşelilik olarak görülebilir. Niceleme tek başına mütevazı bir kazanç sağlar: 28 MB'lık modelimiz ham olarak 22,8 MB'ye, gzip ile 8,1 MB'ye düştü. Asıl görevi Meshopt'un ilk yarısı olmak ve hedef yükleyicinin yetenekleri belirsizken güvenli çıktı sağlamaktır. Draco, aynı varsayılanlarla kendi içinde niceleme yaptığından draco öncesinde quantize çalıştırmayın.

3. Adım: Meshopt veya Draco

Her ikisi de GPU'ya yüklemeden önce düz tamponlara açılan kayıplı geometri kodekleridir; dolayısıyla modeli daha hızlı render ettirmezler. İndirme boyutunu küçültürler. Aralarındaki farklar neyi sıkıştırdıkları, ne kadar hızlı çözüldükleri ve istemciye ne büyüklükte bir kod çözücü gönderdiğinizdir.

Meshopt (EXT_meshopt_compression), bufferView düzeyinde çalışır; böylece köşe nitelikleri, indisler, morph hedefi deltaları ve animasyon anahtar karelerinin tümü sıkıştırılır. Nicelemenin üzerine, gzip veya brotli'nin altına gelecek şekilde tasarlanmıştır: kodek baytları düzenli hâle getirir ve geri kalan işi CDN'in genel amaçlı sıkıştırıcısı yapar. Belirtimde WebAssembly SIMD ile yaklaşık 1 GB/sn kod çözme hızlarından söz edilir ve three.js kod çözücüsü yalnızca 32 KB'lik tek bir modüldür. Test modelinde varsayılan --level high ile sonuç: ham 5,1 MB, gzip ile 3,3 MB.

Draco (KHR_draco_mesh_compression), yalnızca üçgen mesh primitiflerini sıkıştırır. Animasyonlar, morph hedefleri, noktalar ve çizgiler değiştirilmeden geçer. Aynı modeli 2,6 MB'ye indirerek daha güçlü sıkıştırır ve çıktı zaten yoğun olduğundan gzip neredeyse hiç fayda sağlamaz. Bunun bedeli kod çözme süresi ve kod çözücü boyutudur: glTF-Transform belgeleri Meshopt kod çözmenin çok daha hızlı olduğunu açıkça belirtir. three.js ile paketlenen WASM kod çözücü 286 KB'dir (glTF dalı derlemesinde 192 KB); buna 58 KB'lik bir sarmalayıcı ve 719 KB'lik JavaScript geri dönüşü eklenir. Draco ayrıca öğeleri yeniden sıralar ve köşe sayısını değiştirebilir.

Sonuç olarak: animasyonlu her şeyde, morph hedefleri olan her şeyde, telefondaki yükleme süresinin önemli olduğu her yerde ve brotli etkin olarak sunulan her içerikte Meshopt kullanın. Varlık statik bir mesh ise, boyutun çoğunu geometri oluşturuyorsa ve aktarım boyutunda yüzde 20 ila 30 tasarruf daha yavaş bir ilk kareye değiyorsa Draco kullanın. Emin değil misiniz? Meshopt'u seçin. gltfpack'in -cc seçeneği (daha güçlü modda Meshopt), aynı dosyada ham 4,4 MB ve gzip ile 3,1 MB sonucuna ulaştı.

4. Adım: sadeleştirme

Model sıkıştırmadan sonra hâlâ büyükse, çok fazla üçgene sahiptir ve hiçbir kodek bunu çözemez. Her iki araç da hedef oranı ve hata sınırını alan meshoptimizer sadeleştiricisini kullanır ve bunlardan hangisine önce ulaşırsa orada durur.

gltf-transform simplify --ratio 0.25 --error 0.01, mesh yarıçapının yüzde 1'i kadar sapma içinde köşelerin yüzde 25'ine inmeyi hedefler. Bu, 978 bin üçgenli modelde sıkıştırma öncesi 244.556 üçgen ve 8,1 MB sonuç verdi; oyun mesafesinde görünüm aynıydı. optimize varsayılanları tahmin edebileceğinizden daha agresiftir: --simplify-ratio 0 ile --simplify-error 0.0001, “yüzde 0,01 hata sınırı içinde mümkün olduğunca fazlasını kaldır” anlamına gelir. Aynı aşırı mozaiklenmiş model 6.582 üçgene kadar indi; çünkü oluşturucu düz yüzeylerde neredeyse bir milyon üçgen kullanmıştı. Sadeleştirmeden önce köşeleri kaynatın (optimize bunu yapar), çünkü bölünmüş köşeler sadeleştiriciyi dikişlerde durdurur.

gltfpack'in -si 0.25 seçeneği de aynı yaklaşımı kullanır; varsayılan hata sınırı -se 0.01, kaliteyi dikkate almadan hedef orana ulaşmak için -sa, modüler mesh'lerin birleşim yerlerinde boşluk oluşmasını önlemek üzere kenar köşelerini kilitlemek için -slb kullanılır. Sert yüzeyli proplar yüzde 50 azaltmayı kolayca kaldırır; taranmış ve yapay zekâyla üretilmiş mesh'lerde genellikle yüzde 90 azaltma yapılabilir. Rig'lenmiş karakterlerde ise eklemlerin yakınında dikkatli olmak gerekir, çünkü köşeleri daraltmak skin ağırlıklarını da daraltır.

5. Adım: budama, tekilleştirme, birleştirme ve örnekleme

Bunlar bedelsiz kazançlardır ve optimize hepsini uygular. prune, hiçbir şeyin referans vermediği malzemeleri, dokuları, erişimcileri ve düğümleri kaldırır; tek renkli dokuları malzeme faktörlerine dönüştürür. dedup, dışa aktarıcının iki kez yazdığı özdeş erişimcileri ve dokuları birleştirir. flatten hiyerarşiyi düzleştirir, join ise aynı malzemeyi paylaşan mesh'leri birleştirir; 200 çizim çağrısını birkaç taneye düşüren işlem budur. instance, 5 veya daha fazla tekrarlanan mesh'i EXT_mesh_gpu_instancing biçimine dönüştürür; palette ise yalnızca renk bakımından farklı olan malzemeleri birleştirir.

Rig'lenmiş bir karakterde veya oyununuzun parçalarını ayrı ayrı hareket ettirdiği herhangi bir içerikte join ya da flatten kullanmayın; aksi hâlde parçalar tek bir mesh içinde kaybolur. gltfpack'teki çözüm, adlandırılmış düğümleri koruyan -kn ve adlandırılmış malzemeleri koruyan -km seçenekleridir.

6. Adım: animasyon

Dışa aktarıcılar genellikle her kareye bir anahtar kare yazar. gltf-transform resample, komşuları arasındaki çizgi üzerinde kalan anahtar kareleri kaldırır (varsayılan tolerans 1e-4); bu pratikte kayıpsızdır. gltfpack'in -af 30 seçeneği her izi 30 Hz'de yeniden örnekler ve Meshopt ile sıkıştırmadan önce ötelemeleri 16 bit, dönüşleri 12 bit, ölçeği ise 16 bit olarak niceler (-at, -ar, -as). Birkaç klibi olan tipik bir karakterde bu küçük bir adımdır. Bir hareket kütüphanesinde ise baytların çoğunu azaltabilir.

Komut satırları

glTF-Transform CLI'ını npm install --global @gltf-transform/cli veya npx @gltf-transform/cli ile kullanabilirsiniz. Tek seferde:

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

Bu komut sırasıyla dedup, instance, palette, flatten, join, weld, simplify (oran 0, hata 0.0001), resample, prune, sparse, 1024 sınırıyla doku sıkıştırma ve yüksek düzeyde Meshopt işlemlerini çalıştırır. Draco için --compress draco, yalnızca niceleme için --compress quantize, rig'lenmiş veya eklemli modeller için --no-join --no-flatten, silüet bayt tasarrufundan daha önemliyse --simplify false, KTX-Software yüklüyse --texture-compress ktx2 ekleyin.

Daha fazla kontrol istediğinizde işlemleri ayrı ayrı çalıştırabilirsiniz:

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

Son satır yerine gltf-transform draco d.glb out.glb (--encode-speed ve --decode-speed 0 ile 10 arasında değer alır; varsayılan 5'tir ve daha düşük değer daha küçük çıktı verir) veya gltf-transform quantize d.glb out.glb kullanabilirsiniz.

gltfpack'i npm install -g gltfpack ile veya README'nin büyük dosyalar için önerdiği meshoptimizer sürümlerindeki yerel ikili dosyayla kurabilirsiniz. Varsayılan ayarları zaten niceleme yapar, GPU önbelleği için köşe sırasını optimize eder ve mesh'leri birleştirir:

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

-cc, daha yüksek sıkıştırma modunda Meshopt'tur (-c hızlı moddur; -cf, kod çözücüsü olmayan yükleyiciler için sıkıştırılmamış bir geri dönüş ekler). -si 0.5, -se 0.01 sınırları içinde üçgen sayısını yarıya indirir. -tw dokuları WebP'ye dönüştürür, -tl 1024 ise boyutlarını sınırlar. -kn adlandırılmış düğümleri korur. KTX2 için -tw yerine -tc (ETC1S) veya -tc -tu (UASTC) kullanın; bunun için Basis Universal bağlantılı bir gltfpack derlemesi gerekir.

İki CLI da uygun değilse tarayıcı aracı aynı işlem sırasını çalıştırır.

Terminal gerektirmeyen yöntem: hangi işlemin etkili olduğunu görebilmeniz için her adımdan sonra boyut göstergesiyle birlikte tarayıcıda budama, kaynatma, birleştirme, sadeleştirme, dokuları WebP'ye yeniden boyutlandırma ve Meshopt.

KTX2: ETC1S veya UASTC

KTX2, Khronos'un GPU dokuları için geliştirdiği kapsayıcıdır. Basis Universal süper sıkıştırmasıyla doku, yükleme sırasında cihazın desteklediği blok formatına dönüştürülür (masaüstünde BC, mobilde ASTC veya ETC2) ve bellekte sıkıştırılmış olarak kalır. glTF uzantısı KHR_texture_basisu biçimindedir. Basis'in iki modu vardır. ETC1S küçük boyutlu olanıdır: Basis README, diskte piksel başına yaklaşık 0,3 ila 3 bit kullandığını ve JPEG benzeri bir kalite ayarına (1 ila 255, varsayılan 128) sahip olduğunu belirtir; bellekte ise BC1 ve ETC1 gibi biçimlerde piksel başına 4 bit kaplar. Nesnelerin taban rengi için kullanın. UASTC kaliteli olanıdır: bellekte piksel başına 8 bit, ASTC 4×4'ün 19 modlu bir alt kümesi ve 0 ila 4 arasında kalite seviyeleri sunar (varsayılan 2; glTF-Transform yardımında bunun 47,47 dB olduğu belirtilir). UASTC dosyaları diskte büyüktür, bu nedenle bunları Zstandard ile birlikte kullanın: glTF-Transform'un uastc komutu varsayılan olarak --zstd 18 kullanır ve ktx create --zstd 1 ila 22 arasında değer kabul eder.

Mip eşlemeleri bulunan 2048×2048 bir doku için hesap: RGBA8 olarak yaklaşık 22 MB, UASTC olarak yaklaşık 5,6 MB, 4 bpp biçimine dönüştürülmüş ETC1S olarak yaklaşık 2,8 MB.

Üç önemli kural vardır. Normal ve veri haritaları UASTC ve doğrusal renk uzayı gerektirir. glTF-Transform, RGB normal haritalarının ve oklüzyon/pürüzlülük/metallik haritalarının ETC1S ile kötü görünebileceği konusunda uyarır; ayrıca spesifikasyon, renk dokularının sRGB, renk dışı verilerin ise doğrusal olarak etiketlenmesini gerektirir. glTF-Transform bunu her yuva için sizin yerinize ayarlar. KTX2 sıkıştırıcıda bu, renk için açık, normal ve veri haritaları için kapalı olması gereken sRGB anahtarıdır. Boyutlar 4'ün katı olmalıdır, ikinin kuvvetleri önerilir. Mip eşlemeleri oluşturun. Spesifikasyona göre, mip eşlemeli küçültmeyle kullanılan bir KTX2 tam piramidi içermelidir; aksi hâlde motorun dokuyu çalışma zamanında açıp mip eşlemelerini oluşturması gerekir. Mip eşlemeleri glTF-Transform'da ve tarayıcı aracında varsayılan olarak açıktır; ktx create içinde ise --generate-mipmap kullanılır.

glTF-Transform komutları, KTX-Software paketindeki 4.4.0 veya sonraki bir sürüm olan ktx ikili dosyasını gerektirir:

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

Önce veri yuvalarına UASTC, ardından geri kalanlara ETC1S uygulayın. Taban rengi ve emisyon için ETC1S, normal ve ORM için UASTC kullanmak olağan yaklaşımdır.

Sonucu yükleme

Niceleme dışındaki her codec, istemcide bir kod çözücü gerektirir.

three.js. GLTFLoader, KHR_mesh_quantization ve EXT_texture_webp uzantılarını herhangi bir kurulum gerektirmeden okur. Diğerleri için three paketinin examples/jsm/libs/ dizininde draco/, basis/ ve meshopt_decoder.module.js olarak sunulan kod çözücüleri bağlamanız gerekir. draco/ ve basis/ dizinlerini genel erişime açık bir yola kopyalayın, ardından:

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, tarayıcı destekliyorsa WASM kod çözücüsünü seçer, desteklemiyorsa JS'ye geri döner. detectSupport(renderer), KTX2Loader bileşeninin cihazın GPU'su için uygun dönüştürme hedefini seçmesini sağlar.

Babylon.js. glTF yükleyicisi Draco, Meshopt (5.0'dan beri kurulum gerektirmez) ve KTX2'yi, kod çözücüleri https://cdn.babylonjs.com adresinden indirip web worker'larında çalıştırarak destekler. Kendi sunucunuzda barındırmak için Tools.CDNBaseUrl değerini ayarlayın veya ayrı ayrı yapılandırmalara yönlendirin: DracoDecoder.DefaultConfiguration (wasmUrl, wasmBinaryUrl, fallbackUrl), MeshoptCompression.Configuration.decoder.url ve KTX2 dönüştürücü kümesi için KhronosTextureContainer2.URLConfig. npm kullanıldığında @babylonjs/ktx2decoder, dönüştürücüleri paket içinde sunar.

PlayCanvas. Draco, dracoInitialize({ jsUrl, wasmUrl, numWorkers, lazyInit }) ile yapılandırılır ve Editor içe aktarma sırasında Draco sıkıştırması uygulayabilir. KTX2, basisInitialize({ glueUrl, wasmUrl, fallbackUrl }) üzerinden kullanılır. EXT_meshopt_compression, motor 2.x itibarıyla GLB ayrıştırıcısında bulunmaz (2020 tarihli özellik talebi hâlâ açıktır); bu nedenle PlayCanvas için Draco veya yalnızca niceleme uygulanmış çıktı seçin.

Unity. Resmî içe aktarıcı glTFast'tir (com.unity.cloud.gltfast). KHR_mesh_quantization kutudan çıktığı gibi çalışır; Draco için com.unity.cloud.draco, KTX2 için com.unity.cloud.ktx, Meshopt için ise com.unity.meshopt.decompress gerekir. WebP tasarım gereği desteklenmez; dolayısıyla Unity hedefi için KTX2 kullanın.

Mobil web oyunu için hedefler

Bunun için bir spesifikasyon yoktur ancak telefonların rahat çalışmasını sağlayan bazı değerler vardır. İlk sahnenin tamamını ağ üzerinden yaklaşık 10 MB'ın altında tutun ve geri kalanını akışla yükleyin (akışla varlık yükleme eğitimi, katmanları ve kodu açıklar). Doku VRAM kullanımını 150 ila 200 MB'ın altında tutun; bu, RGBA8 biçiminde dört veya beş, ETC1S biçiminde ise otuz adet 2048 dokuya karşılık gelir. Çevre nesnelerini 5.000 üçgenin, ana karakteri 30.000 ila 50.000 üçgenin altında; çizim çağrılarını ise birkaç yüz seviyesinde tutun. Çevre nesneleri için 1024, yalnızca kameranın yaklaştığı öğeler için 2048 doku kullanın. Meshopt ve nicelenmiş çıktılar buna dayandığından GLB dosyalarını brotli veya gzip etkin olarak sunun.

Yayınlamadan önce doğrulayın

Dosya boyutu kolay ölçülen değerdir. Sonucu GLB görüntüleyicide açın ve geri kalanını inceleyin: Extensions paneli EXT_meshopt_compression, KHR_draco_mesh_compression veya KHR_texture_basisu uzantısının dosyaya gerçekten eklendiğini doğrular; Textures sekmesi her dokuyu gerçek VRAM maliyetine göre büyükten küçüğe listeler; durum çubuğu ise canlı çizim çağrısı ve üçgen sayısını gösterir. Ardından oyuncunun göreceği mesafede silüetleri ve UV dikişlerini sadeleştirme artefaktları açısından kontrol edin ve birleştirme işleminin hareket etmesi gereken bir parçayı kaynaştırmadığından emin olmak için tüm animasyonları oynatın. Kaynak başlangıçta GLB değilse, gerçekten yükleyeceğiniz dosyayı sıkıştırmak için önce FBX veya OBJ dosyasını FBX'ten GLB'ye dönüştürücüden geçirin.

Uzantının dosyaya gerçekten eklendiğini doğrulamak için sıkıştırılmış çıktıyı burada açın; ardından durum çubuğundan çizim çağrılarını ve üçgen sayısını, Textures sekmesinden de her dokunun gerçek VRAM maliyetini okuyun.

Sık Sorulan Sorular

GLB dosya boyutunu nasıl küçültebilirim?

Dokuların mı yoksa geometrinin mi daha fazla yer kapladığını görmek için gltf-transform inspect komutunu çalıştırın. Dokularsa boyutlarını 1024 veya 2048'e düşürüp WebP ya da KTX2'ye dönüştürün. Geometriyse sadeleştirin ve ardından Meshopt veya Draco ile sıkıştırın. gltf-transform optimize in.glb out.glb --texture-compress webp tüm işlemleri sırayla gerçekleştirir; tarayıcıdaki GLB iyileştirici ise bunu kurulum gerektirmeden yapar.

Draco ve Meshopt: hangisi daha iyi?

Çoğu web oyunu için Meshopt. Çok daha hızlı çözülür, birkaç yüz kilobaytlık WASM yerine 32 KB'lık bir kod çözücü sunar ve Draco'nun atladığı animasyonları ve morph hedeflerini sıkıştırır. Draco, statik mesh'ler için daha küçük dosyalar üretir (28 MB'lık test modelimizde gzip sonrası 3,3 MB'a karşı 2,6 MB) ve PlayCanvas'ın desteklediği seçenektir; bu nedenle varlık statik bir taramaysa ve baytların çoğunu geometri oluşturuyorsa daha iyi sonuç verir.

KTX2 nedir ve Basis'ten farkı nedir?

Basis Universal, ETC1S ve UASTC adlı iki modu bulunan sıkıştırma codec'idir. KTX2 ise Basis ile sıkıştırılmış doku verilerini, mip eşlemelerini ve meta verileri barındıran Khronos kapsayıcı dosyasıdır; glTF buna KHR_texture_basisu üzerinden başvurur. Eski işlem hatları bağımsız bir .basis dosyası kullanırdı. .ktx2 kullanın.

ETC1S mi yoksa UASTC mi kullanmalıyım?

Taban rengi ve yakından görülmeyen her şey için ETC1S kullanın: küçük dosyalar ve VRAM'de piksel başına 4 bit. Normal haritaları, pürüzlülük/metallik/oklüzyon ve ana öğe dokuları için UASTC kullanın; indirme boyutunu makul tutmak için Zstandard süper sıkıştırmasını etkinleştirin. Renk dokularını sRGB, veri dokularını ise doğrusal olarak etiketleyin; aksi takdirde normaller yanlış gölgelenir.

glTF dokularını nasıl sıkıştırabilirim?

İndirme boyutu için önce gltf-transform resize, ardından gltf-transform webp kullanın. GPU belleği için KTX-Software kurulu olarak gltf-transform etc1s veya uastc kullanın ya da PNG dosyalarını KTX2 sıkıştırıcıya bırakın. Her iki durumda da önce boyutları sınırlayın: 4096'lık bir doku RGBA8 olarak 89 MB VRAM kullanır ve tarayıcıda böyle bir doku sunmak için neredeyse hiçbir zaman geçerli bir neden yoktur.

GLB dosyam mobilde three.js için neden çok büyük?

Sorun genellikle dosya boyutu değil, doku belleğidir. Dört adet 2048 RGBA doku, sahne henüz hiçbir şey çizmeden yaklaşık 90 MB VRAM kullanır ve telefon tarayıcıları birkaç yüz megabaytın üzerine çıkıldığında sekmeyi sonlandırır. Dokuların GPU'da sıkıştırılmış kalması için KTX2'ye dönüştürün, mümkün olan yerlerde 1024 ile sınırlayın ve cihazın biçimine dönüştürülmesi için KTX2Loader.detectSupport(renderer) çağrısını kullanın.

gltfpack, gltf-transform ile aynı şeyi mi yapıyor?

Büyük ölçüde. gltfpack, meshoptimizer projesinin varsayılan olarak niceleme, GPU önbelleği için tepe noktalarını yeniden sıralama, mesh'leri birleştirme ve Meshopt sıkıştırması uygulayan tek bir yerel ikili dosyasıdır. glTF-Transform ise aynı işlemleri ayrı ve betiklenebilir adımlar olarak sunan bir Node kütüphanesi ve CLI'dır; ayrıca gltfpack'in yazamadığı Draco çıktısını da destekler. Test dosyamızda Meshopt çıktıları birbirlerinin yaklaşık yüzde 10'u içinde kaldı.

İlgili içerikler

• Web oyunları için akışla varlık yükleme: az önce küçülttüğünüz dosyalar için katmanlar, öncelik kuyrukları ve ilerleme çubukları
• 2026'da Web Oyunları Teknoloji Yığını: API düzeyinde WebGL, WebGPU, Wasm ve varlık biçimleri
• Ücretsiz 3D Model Siteleri: modellerin nereden geldiği ve neden büyük oldukları
• En İyi Yapay Zekâ 3D Model Oluşturucuları: oluşturucuların ne ürettiği ve geometrinin ne kadar yoğun olduğu
• Three.js ve Babylon.js Karşılaştırması: ikisi de farklı kurulumlarla Draco, Meshopt ve KTX2 yükler
• PlayCanvas ve Three.js Karşılaştırması: varlık işlem hatları dâhil motor ve kütüphane karşılaştırması