वेब के लिए GLB फ़ाइलों को ऑप्टिमाइज़ कैसे करें: Draco, Meshopt और KTX2 (2026)
अंतिम अपडेट: सितंबर 2026।
वेब के लिए GLB ऑप्टिमाइज़ करने हेतु इस क्रम में काम करें: पहले टेक्सचर छोटे करें (उन्हें अधिकतम 1024 या 2048 तक सीमित करें, डाउनलोड आकार घटाने के लिए WebP में या GPU मेमोरी घटाने के लिए KTX2 में दोबारा एन्कोड करें), वर्टेक्स डेटा को क्वांटाइज़ करें, Meshopt से ज्योमेट्री कंप्रेस करें (या जब डिकोड समय से अधिक अंतिम कुछ सौ किलोबाइट मायने रखते हों, तब Draco इस्तेमाल करें), यदि त्रिभुजों की संख्या अब भी बेहिसाब हो तो मेश सरल बनाएँ, फिर बची हुई सामग्री को प्रून, डीडुप्लिकेट और जॉइन करें। एक कमांड इनमें से अधिकांश काम कर देता है: gltf-transform optimize in.glb out.glb --texture-compress webp। क्रम महत्वपूर्ण है, क्योंकि आम तौर पर फ़ाइल का 80 प्रतिशत या उससे अधिक हिस्सा टेक्सचर होते हैं और वीडियो मेमोरी भी पूरी तरह इन्हीं में जाती है।
संक्षिप्त उत्तर
- टेक्सचर-प्रधान मॉडल (अधिकांश मॉडल): आकार घटाकर 1024 या 2048 करें, फिर
gltf-transform webpचलाएँ। यदि फ़ोन पर रुकावट आती है या ऐप क्रैश होता है, तो इसके बजाय ब्राउज़र में KTX2 कंप्रेसर से याgltf-transform etc1s/uastcसे KTX2 में बदलें। - ज्योमेट्री-प्रधान मॉडल (स्कैन, CAD, AI-जनरेटेड):
gltf-transform simplifyचलाएँ, फिरmeshopt। Draco फ़ाइल को थोड़ा और छोटा करता है, लेकिन धीमे डिकोड होता है और इसके लिए दस गुना बड़ा डिकोडर चाहिए। - एनिमेटेड कैरेक्टर: Draco नहीं, Meshopt इस्तेमाल करें। Draco एनिमेशन ट्रैक और मॉर्फ टार्गेट को नहीं छूता।
- फ़ाइल को ऐसे इंजन में खुलना है जिसे आप नियंत्रित नहीं करते:
gltf-transform quantize। किसी डिकोडर की आवश्यकता नहीं, केवलKHR_mesh_quantization, जिसे यहाँ का हर लोडर पढ़ता है। - टर्मिनल उपलब्ध नहीं है: GLB ऑप्टिमाइज़र आपके ब्राउज़र में प्रून, वेल्ड, जॉइन, सिंप्लिफ़ाई, टेक्सचर को WebP में री-साइज़ और Meshopt चलाता है तथा हर चरण के बाद आकार दिखाता है।
त्वरित संदर्भ
| केवल क्वांटाइज़ेशन | Meshopt | Draco | |
|---|---|---|---|
| एक्सटेंशन | KHR_mesh_quantization | EXT_meshopt_compression (+ क्वांटाइज़ेशन) | KHR_draco_mesh_compression |
| यह क्या कंप्रेस करता है | वर्टेक्स एट्रिब्यूट (कम बिट) | वर्टेक्स, इंडेक्स, मॉर्फ टार्गेट, एनिमेशन | केवल त्रिभुज-मेश ज्योमेट्री |
| हमारे 28 MB परीक्षण मॉडल का आकार | 22.8 MB (gzip के बाद 8.1 MB) | 5.1 MB (gzip के बाद 3.3 MB) | 2.6 MB (gzip के बाद 2.5 MB) |
| डिकोडर | कोई नहीं | इनलाइन WASM वाला 32 KB JS मॉड्यूल | 192 से 286 KB WASM और 58 KB रैपर, 719 KB JS फ़ॉलबैक |
| डिकोड गति | तत्काल, GPU इसे सीधे पढ़ता है | स्पेसिफ़िकेशन के अनुसार WASM SIMD के साथ लगभग 1 GB/s | glTF-Transform दस्तावेज़ों के अनुसार Meshopt से काफ़ी धीमा |
| सर्वर पर gzip/brotli की आवश्यकता | बहुत मददगार | हाँ, इसी के लिए डिज़ाइन किया गया है | बहुत कम लाभ |
| लोडर | three.js, Babylon.js, PlayCanvas, glTFast | three.js r122+, Babylon.js 5.0+, glTFast (अतिरिक्त पैकेज), PlayCanvas नहीं | three.js, Babylon.js, PlayCanvas, glTFast (अतिरिक्त पैकेज) |
यही आँकड़े बार के रूप में दिए गए हैं, साथ में तुलना-परीक्षण के gltfpack और simplify परिणाम भी हैं।
GLB में बाइट कहाँ खर्च होते हैं
सबसे पहले gltf-transform inspect model.glb चलाएँ। यह वर्टेक्स संख्या और एट्रिब्यूट प्रकारों सहित हर मेश, एन्कोडेड आकार और gpuSize सहित हर टेक्सचर तथा कीफ़्रेम संख्या सहित हर एनिमेशन की सूची देता है। इस गाइड के आँकड़े टूल दस्तावेज़ों और एक्सटेंशन स्पेसिफ़िकेशन के साथ-साथ इस सप्ताह दो वास्तविक फ़ाइलों पर gltf-transform 4.5.0 और gltfpack 1.2 से किए गए हमारे तुलना-परीक्षण से आए हैं। ये उन दो प्रकार के मॉडल दिखाते हैं जिनसे आपका सामना होगा।
2.2 MB के एक Sketchfab प्रॉप (कम-पॉली वाला कप) में 680 त्रिभुज और 39 KB ज्योमेट्री थी। शेष 2.18 MB में तीन 1024×1024 PNG थे, इसलिए टेक्सचर फ़ाइल का 98 प्रतिशत थे और inspect के अनुसार मिपमैप बनने के बाद प्रत्येक टेक्सचर लगभग 5.59 MB VRAM लेता। हाथ से बनाए गए एसेट में आम तौर पर यही स्थिति होती है।
28.7 MB का TRELLIS.2 आउटपुट इसका उल्टा था: 978,226 त्रिभुज और 27.5 MB float32 ज्योमेट्री, जबकि टेक्सचर केवल 1.1 MB के थे। लेकिन वे दोनों टेक्सचर 4096×4096 के थे, जिन्हें inspect के अनुसार प्रत्येक के लिए 89.5 MB VRAM चाहिए। 3D मॉडल जनरेटर और इसके जैसे अन्य टूल से बने मॉडल अक्सर इसी तरह आते हैं—बहुत घने और ज़रूरत से ज़्यादा बड़े टेक्सचर वाले—इसलिए उन्हें टेक्सचर चरणों के साथ ज्योमेट्री चरणों की भी आवश्यकता होती है।
ध्यान रखें कि एन्कोडेड टेक्सचर आकार और GPU आकार का आपस में कोई संबंध नहीं है। एक ही 2048×2048 इमेज का 4 MB PNG और 200 KB WebP, दोनों वीडियो मेमोरी में लगभग 22 MB बन जाते हैं—रॉ पिक्सेल और मिपमैप मिलाकर। केवल KTX2 इस आँकड़े को बदलता है।
नीचे दिए गए छह चरण इसी क्रम में चलते हैं, क्योंकि हर चरण अगले चरण के लिए संसाधित होने वाली सामग्री को छोटा करता है।
चरण 1: टेक्सचर
दो अलग समस्याएँ, दो अलग समाधान।
डाउनलोड आकार को रिसाइज़ और री-एन्कोड करके ठीक किया जाता है। बहुत कम प्रॉप्स को 1024×1024 से अधिक की आवश्यकता होती है, और किसी मुख्य कैरेक्टर को शायद ही कभी 2048 से अधिक चाहिए। gltf-transform resize --width 1024 --height 1024 कभी अपस्केल किए बिना आयामों को सीमित करता है, और gltf-transform webp sharp के साथ दोबारा एन्कोड करता है। कप पर केवल WebP ने फ़ाइल को 2.23 MB से घटाकर 246 KB कर दिया। पहले 512 तक रिसाइज़ करने पर यह 96 KB हो गई, और उस आकार के प्रॉप पर कोई दिखाई देने वाला बदलाव नहीं आया। WebP को EXT_texture_webp चाहिए, जिसे वेब इंजन पढ़ते हैं लेकिन Unity का glTFast नहीं पढ़ता (इसकी फ़ीचर तालिका कहती है कि यह "समर्थित नहीं होगा")।
GPU मेमोरी और अपलोड समय को केवल Basis Universal सुपरकंप्रेशन वाले KTX2 से ठीक किया जा सकता है, जो टेक्सचर को VRAM तक पूरे रास्ते GPU ब्लॉक फ़ॉर्मेट में रखता है और कच्चे RGBA की तुलना में 4 से 8 गुना कम मेमोरी लेता है। इसके लिए नीचे अलग अनुभाग है, क्योंकि सेटिंग्स महत्वपूर्ण हैं।
तुलनात्मक परीक्षण से एक सावधानी: gltf-transform optimize डिफ़ॉल्ट रूप से --texture-compress auto उपयोग करता है, जो टेक्सचर को उनके मूल फ़ॉर्मेट में दोबारा एन्कोड करता है। कप पर इससे PNG बड़े हो गए और फ़ाइल 2.2 MB से बढ़कर 2.8 MB हो गई। webp या ktx2 स्पष्ट रूप से दें।
चरण 2: क्वांटाइज़
क्वांटाइज़ेशन प्रत्येक वर्टेक्स एट्रिब्यूट को कम बिट्स में संग्रहीत करता है। एक पोज़िशन तीन 32-बिट फ़्लोट से तीन 16-बिट पूर्णांकों में बदल जाती है, जबकि स्केल और ऑफ़सेट को नोड ट्रांसफ़ॉर्म में (या स्किन किए गए मेश के लिए inverseBindMatrices में) शामिल कर दिया जाता है। KHR_mesh_quantization विनिर्देश के अनुसार एक सामान्य वर्टेक्स लगभग 48 के बजाय 20 बाइट लेता है। यह Khronos का अनुमोदित एक्सटेंशन है और इसे किसी डिकोडर की आवश्यकता नहीं होती: GPU पूर्णांक एट्रिब्यूट सीधे पढ़ता है, इसलिए क्वांटाइज़ की गई फ़ाइलें नेटवर्क ट्रांसफ़र के साथ-साथ VRAM में भी कम जगह लेती हैं।
glTF-Transform में डिफ़ॉल्ट रूप से पोज़िशन के लिए 14 बिट, नॉर्मल और टैन्जेंट के लिए 10, UV के लिए 12 तथा रंगों और वेट्स के लिए 8 बिट उपयोग होते हैं। gltfpack में ये क्रमशः 14, 8, 12 और 8 हैं। विशाल एकल मेश को छोड़कर दोनों के बदलाव दिखाई नहीं देते, लेकिन उसमें पूरे विस्तार पर 14 बिट के कारण सतह खंडित दिखाई दे सकती है। अकेले क्वांटाइज़ेशन का लाभ सीमित है: हमारा 28 MB मॉडल कच्चे रूप में 22.8 MB और gzip के साथ 8.1 MB हो गया। इसका वास्तविक काम Meshopt का पहला आधा भाग बनना और गंतव्य लोडर को लेकर अनिश्चितता होने पर सुरक्षित आउटपुट देना है। Draco समान डिफ़ॉल्ट के साथ आंतरिक रूप से क्वांटाइज़ करता है, इसलिए draco से पहले quantize न चलाएँ।
चरण 3: Meshopt या Draco
दोनों लॉसी ज्योमेट्री कोडेक हैं जो GPU पर अपलोड होने से पहले साधारण बफ़र में डिकोड होते हैं, इसलिए इनमें से कोई भी मॉडल को तेज़ी से रेंडर नहीं कराता। ये डाउनलोड आकार घटाते हैं। अंतर यह है कि वे क्या कंप्रेस करते हैं, कितनी तेज़ी से डिकोड होते हैं और आपको कितना बड़ा डिकोडर भेजना पड़ता है।
Meshopt (EXT_meshopt_compression) bufferView स्तर पर काम करता है, इसलिए वर्टेक्स एट्रिब्यूट, इंडेक्स, मॉर्फ़ टार्गेट डेल्टा और ऐनिमेशन कीफ़्रेम सभी कंप्रेस होते हैं। इसे क्वांटाइज़ेशन के ऊपर और gzip या brotli के नीचे उपयोग करने के लिए बनाया गया है: कोडेक बाइट्स को नियमित बनाता है और CDN का सामान्य-उद्देश्य कंप्रेसर बाकी काम करता है। विनिर्देश WebAssembly SIMD के साथ लगभग 1 GB/s की डिकोड गति बताता है, और three.js का डिकोडर केवल 32 KB का एक मॉड्यूल है। परीक्षण मॉडल पर: डिफ़ॉल्ट --level high में कच्चा आकार 5.1 MB और gzip के साथ 3.3 MB।
Draco (KHR_draco_mesh_compression) केवल ट्रायंगल-मेश प्रिमिटिव को कंप्रेस करता है। ऐनिमेशन, मॉर्फ़ टार्गेट, पॉइंट और लाइन बिना बदलाव के गुजरते हैं। यह अधिक कंप्रेशन करता है—उसी मॉडल पर 2.6 MB—और gzip से बहुत कम लाभ मिलता है क्योंकि आउटपुट पहले से ही सघन है। इसकी कीमत डिकोड समय और डिकोडर का आकार है: glTF-Transform के दस्तावेज़ स्पष्ट रूप से कहते हैं कि Meshopt की डिकोडिंग काफ़ी तेज़ है, और three.js में शामिल WASM डिकोडर 286 KB (glTF-ब्रांच बिल्ड के लिए 192 KB), साथ में 58 KB का रैपर और 719 KB का JavaScript फ़ॉलबैक है। Draco क्रम भी बदलता है और वर्टेक्स की संख्या बदल सकता है।
इसलिए: ऐनिमेटेड एसेट, मॉर्फ़ टार्गेट वाले एसेट, फ़ोन पर लोड समय महत्वपूर्ण होने वाले एसेट और brotli सक्षम करके सर्व किए जाने वाले एसेट के लिए Meshopt। जब एसेट स्थिर मेश हो, ज्योमेट्री का हिस्सा सबसे अधिक हो और नेटवर्क ट्रांसफ़र में 20 से 30 प्रतिशत कमी धीमे पहले फ़्रेम के लायक हो, तब Draco। निश्चित नहीं हैं? Meshopt चुनें। gltfpack का -cc (अधिक शक्तिशाली मोड में Meshopt) उसी फ़ाइल पर कच्चे रूप में 4.4 MB और gzip के साथ 3.1 MB रहा।
चरण 4: सिंप्लिफ़ाई
यदि कंप्रेशन के बाद भी मॉडल बड़ा है, तो उसमें बहुत अधिक ट्रायंगल हैं, और कोई कोडेक इसे ठीक नहीं कर सकता। दोनों टूल meshoptimizer सिंप्लिफ़ायर का उपयोग करते हैं, जो एक लक्षित अनुपात और त्रुटि सीमा लेता है तथा इनमें से जो पहले प्राप्त हो, वहीं रुक जाता है।
gltf-transform simplify --ratio 0.25 --error 0.01 का लक्ष्य मेश त्रिज्या के 1 प्रतिशत विचलन के भीतर वर्टेक्स की संख्या को 25 प्रतिशत करना है। 978k-ट्रायंगल वाले मॉडल पर इससे कंप्रेशन से पहले 244,556 ट्रायंगल और 8.1 MB का आकार मिला, जो गेम की दूरी से एक-जैसा दिखता था। optimize के डिफ़ॉल्ट आपकी अपेक्षा से अधिक आक्रामक हैं: --simplify-ratio 0 के साथ --simplify-error 0.0001, जिसका अर्थ है "0.01 प्रतिशत त्रुटि के भीतर जितना संभव हो उतना हटाएँ"। उसी अत्यधिक टेसेलेट किए गए मॉडल पर यह घटकर 6,582 ट्रायंगल रह गया, क्योंकि जनरेटर ने समतल सतहों पर लगभग दस लाख ट्रायंगल खर्च किए थे। सिंप्लिफ़ाई करने से पहले वेल्ड करें (optimize ऐसा करता है), क्योंकि विभाजित वर्टेक्स सीम पर सिंप्लिफ़ायर को रोक देते हैं।
gltfpack का -si 0.25 भी यही अवधारणा है, जिसमें -se 0.01 डिफ़ॉल्ट त्रुटि सीमा है, गुणवत्ता की परवाह किए बिना अनुपात प्राप्त करने के लिए -sa, और बॉर्डर वर्टेक्स लॉक करने के लिए -slb, ताकि मॉड्यूलर मेश में दरारें न खुलें। हार्ड-सर्फ़ेस प्रॉप्स आसानी से 50 प्रतिशत कमी सह लेते हैं, स्कैन किए गए और AI-जनरेटेड मेश आमतौर पर 90 प्रतिशत हटाना सह लेते हैं, और रिग किए गए कैरेक्टर के जोड़ वाले क्षेत्रों में सावधानी चाहिए क्योंकि वर्टेक्स कोलैप्स करने पर स्किन वेट्स भी कोलैप्स होते हैं।
चरण 5: प्रून, डीडुप, जॉइन, इंस्टेंस
ये बिना नुकसान के मिलने वाले लाभ हैं और optimize इन सभी को चलाता है। prune उन मटेरियल, टेक्सचर, एक्सेसर और नोड को हटाता है जिनका कहीं संदर्भ नहीं है, और एकल-रंग टेक्सचर को मटेरियल फ़ैक्टर में बदलता है। dedup किसी एक्सपोर्टर द्वारा दो बार लिखे गए समान एक्सेसर और टेक्सचर को मर्ज करता है। flatten हायरार्की को समेटता है और join समान मटेरियल साझा करने वाले मेश को मर्ज करता है, जिससे 200 ड्रॉ कॉल घटकर मुट्ठी भर रह जाते हैं। instance (5 प्रतियों से शुरू) बार-बार उपयोग होने वाले मेश को EXT_mesh_gpu_instancing में बदलता है, और palette केवल रंग में अलग मटेरियल को मर्ज करता है।
रिग किए गए कैरेक्टर या ऐसी किसी भी चीज़ पर join या flatten न चलाएँ जिसके हिस्सों को आपका गेम अलग-अलग हिलाता है, क्योंकि वे हिस्से एक ही मेश में विलीन हो जाते हैं। gltfpack में इससे बचने के लिए -kn (नामित नोड बनाए रखें) और -km (नामित मटेरियल बनाए रखें) हैं।
चरण 6: ऐनिमेशन
एक्सपोर्टर अक्सर हर फ़्रेम पर एक कीफ़्रेम बेक कर देते हैं। gltf-transform resample उन कीफ़्रेम को हटाता है जो अपने पड़ोसी कीफ़्रेमों के बीच की सीधी रेखा पर स्थित होते हैं (डिफ़ॉल्ट टॉलरेंस 1e-4), जो व्यवहार में लॉसलेस है। gltfpack का -af 30 हर ट्रैक को 30 Hz पर रीसैंपल करता है और Meshopt द्वारा कंप्रेस किए जाने से पहले ट्रांसलेशन को 16 बिट, रोटेशन को 12 और स्केल को 16 बिट (-at, -ar, -as) में क्वांटाइज़ करता है। कुछ क्लिप वाले सामान्य कैरेक्टर पर यह छोटा कदम है। मोशन लाइब्रेरी में यह अधिकतर बाइट्स बचा सकता है।
कमांड लाइन
glTF-Transform का CLI npm install --global @gltf-transform/cli, या npx @gltf-transform/cli है। एक ही बार में:
gltf-transform optimize in.glb out.glb --texture-compress webp --texture-size 1024यह क्रम से dedup, instance, palette, flatten, join, weld, simplify (अनुपात 0, त्रुटि 0.0001), resample, prune, sparse, 1024 सीमा पर टेक्सचर कंप्रेशन और high स्तर पर Meshopt चलाता है। Draco के लिए --compress draco, केवल क्वांटाइज़ेशन के लिए --compress quantize, रिग किए गए या आर्टिकुलेटेड मॉडल के लिए --no-join --no-flatten, यदि बाइट्स से अधिक सिल्हूट महत्वपूर्ण हो तो --simplify false, और KTX-Software इंस्टॉल होने पर --texture-compress ktx2 जोड़ें।
जब आपको अधिक नियंत्रण चाहिए, तब अलग-अलग चरण:
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अंतिम पंक्ति को gltf-transform draco d.glb out.glb से बदलें (--encode-speed और --decode-speed की सीमा 0 से 10 है, डिफ़ॉल्ट 5; कम मान से फ़ाइल छोटी होती है) या gltf-transform quantize d.glb out.glb उपयोग करें।
gltfpack को npm install -g gltfpack से इंस्टॉल किया जा सकता है, या meshoptimizer रिलीज़ से नेटिव बाइनरी ली जा सकती है, जिसकी README बड़ी फ़ाइलों के लिए अनुशंसा करती है। इसके डिफ़ॉल्ट पहले ही क्वांटाइज़ करते हैं, GPU कैश के लिए वर्टेक्स क्रम को ऑप्टिमाइज़ करते हैं और मेश मर्ज करते हैं:
gltfpack -i in.glb -o out.glb -cc -si 0.5 -tw -tl 1024 -kn-cc उच्च कंप्रेशन मोड में Meshopt है (-c तेज़ मोड है, -cf बिना डिकोडर वाले लोडर के लिए अनकंप्रेस्ड फ़ॉलबैक जोड़ता है)। -si 0.5, -se 0.01 के भीतर ट्रायंगल की संख्या आधी कर देता है। -tw टेक्सचर को WebP में बदलता है और -tl 1024 उनके आकार को सीमित करता है। -kn नामित नोड बनाए रखता है। KTX2 के लिए -tw को -tc (ETC1S) या -tc -tu (UASTC) से बदलें, जिसके लिए Basis Universal से लिंक किया गया gltfpack बिल्ड चाहिए।
यदि दोनों में से कोई CLI विकल्प उपलब्ध नहीं है, तो ब्राउज़र टूल वही क्रम चलाता है।
KTX2: ETC1S या UASTC
KTX2, GPU टेक्सचर के लिए Khronos का कंटेनर है। Basis Universal सुपरकंप्रेशन के साथ टेक्सचर को लोड के समय डिवाइस पर उपलब्ध ब्लॉक फ़ॉर्मेट (डेस्कटॉप पर BC, मोबाइल पर ASTC या ETC2) में ट्रांसकोड किया जाता है और यह मेमोरी में कंप्रेस्ड ही रहता है। glTF एक्सटेंशन KHR_texture_basisu है। Basis के दो मोड हैं। ETC1S छोटा वाला है: Basis README के अनुसार डिस्क पर इसका आकार लगभग 0.3 से 3 बिट प्रति पिक्सेल होता है और इसमें JPEG जैसा क्वालिटी डायल मिलता है (1 से 255, डिफ़ॉल्ट 128); मेमोरी में यह BC1 और ETC1 जैसे फ़ॉर्मेट में 4 बिट प्रति पिक्सेल लेता है। प्रॉप्स के बेस कलर के लिए इसका उपयोग करें। UASTC उच्च-क्वालिटी वाला मोड है: मेमोरी में 8 बिट प्रति पिक्सेल, ASTC 4×4 का 19-मोड उपसमुच्चय, और क्वालिटी स्तर 0 से 4 (डिफ़ॉल्ट 2, जिसे glTF-Transform की सहायता में 47.47 dB बताया गया है)। UASTC फ़ाइलें डिस्क पर बड़ी होती हैं, इसलिए उन्हें Zstandard के साथ उपयोग करें: glTF-Transform का uastc डिफ़ॉल्ट रूप से --zstd 18 इस्तेमाल करता है और ktx create --zstd में 1 से 22 तक मान लिया जा सकता है।
मिपमैप वाली 2048×2048 टेक्सचर का हिसाब: RGBA8 के रूप में लगभग 22 MB, UASTC के रूप में लगभग 5.6 MB और 4 bpp फ़ॉर्मेट में ट्रांसकोड किए गए ETC1S के रूप में लगभग 2.8 MB।
तीन नियम खास तौर पर महत्वपूर्ण हैं। नॉर्मल और डेटा मैप के लिए UASTC और लीनियर सेटिंग चाहिए। glTF-Transform चेतावनी देता है कि ETC1S के अंतर्गत RGB नॉर्मल मैप और ऑक्लूज़न/रफ़नेस/मेटलनेस मैप खराब दिख सकते हैं, और स्पेक के अनुसार कलर टेक्सचर को sRGB तथा गैर-कलर डेटा को लीनियर के रूप में टैग करना आवश्यक है। glTF-Transform आपके लिए हर स्लॉट के अनुसार यह सेट करता है। KTX2 कंप्रेसर में इसके लिए sRGB टॉगल है—कलर के लिए चालू और नॉर्मल व डेटा मैप के लिए बंद। आयाम 4 के गुणज होने चाहिए, और 2 की घात वाले आयाम सुझाए जाते हैं। मिपमैप जनरेट करें। स्पेक के अनुसार मिपमैप्ड मिनिफ़िकेशन के साथ उपयोग की गई KTX2 फ़ाइल में पूरा पिरामिड होना चाहिए, वरना इंजन को रनटाइम पर उसे डीकंप्रेस करके बनाना पड़ता है। glTF-Transform और ब्राउज़र टूल में मिपमैप डिफ़ॉल्ट रूप से चालू होते हैं, जबकि ktx create में इसके लिए --generate-mipmap है।
glTF-Transform कमांड के लिए KTX-Software का ktx बाइनरी, संस्करण 4.4.0 या बाद का, आवश्यक है:
gltf-transform uastc in.glb a.glb --level 2 --zstd 18 --slots "{normalTexture,occlusionTexture,metallicRoughnessTexture}"
gltf-transform etc1s a.glb out.glb --quality 128पहले डेटा स्लॉट पर UASTC लगाएँ, फिर बाकी पर ETC1S। सामान्य विभाजन यही है: बेस कलर और एमिसिव के लिए ETC1S तथा नॉर्मल और ORM के लिए UASTC।
परिणाम लोड करना
क्वांटाइज़ेशन को छोड़कर हर कोडेक के लिए क्लाइंट पर डिकोडर चाहिए।
three.js। GLTFLoader, KHR_mesh_quantization और EXT_texture_webp को बिना किसी सेटअप के पढ़ता है। बाकी के लिए डिकोडर जोड़ने पड़ते हैं, जो three पैकेज में examples/jsm/libs/ के अंतर्गत draco/, basis/ और meshopt_decoder.module.js के रूप में मिलते हैं। draco/ और basis/ को किसी सार्वजनिक पाथ पर कॉपी करें, फिर:
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 WASM डिकोडर चुनता है और अन्यथा JS का उपयोग करता है। detectSupport(renderer), KTX2Loader को डिवाइस के GPU के लिए सही ट्रांसकोड लक्ष्य चुनने देता है।
Babylon.js। glTF लोडर Draco, Meshopt (5.0 से, बिना सेटअप) और KTX2 को संभालता है। इसके लिए वह https://cdn.babylonjs.com से डिकोडर डाउनलोड करके उन्हें वेब वर्कर में चलाता है। स्वयं होस्ट करने के लिए Tools.CDNBaseUrl सेट करें या अलग-अलग कॉन्फ़िग की ओर संकेत करें: DracoDecoder.DefaultConfiguration (wasmUrl, wasmBinaryUrl, fallbackUrl), MeshoptCompression.Configuration.decoder.url, और KTX2 ट्रांसकोडर सेट के लिए KhronosTextureContainer2.URLConfig। npm के साथ @babylonjs/ktx2decoder में ट्रांसकोडर बंडल किए हुए मिलते हैं।
PlayCanvas। Draco को dracoInitialize({ jsUrl, wasmUrl, numWorkers, lazyInit }) से कॉन्फ़िगर किया जाता है और Editor इम्पोर्ट के समय Draco कंप्रेशन कर सकता है। KTX2 के लिए basisInitialize({ glueUrl, wasmUrl, fallbackUrl }) उपयोग होता है। इंजन 2.x तक EXT_meshopt_compression GLB पार्सर में उपलब्ध नहीं है (2020 का फ़ीचर अनुरोध अब भी खुला है), इसलिए PlayCanvas के लिए Draco या केवल-क्वांटाइज़ेशन आउटपुट चुनें।
Unity। आधिकारिक इम्पोर्टर glTFast (com.unity.cloud.gltfast) है। KHR_mesh_quantization बिना अतिरिक्त सेटअप के काम करता है, Draco के लिए com.unity.cloud.draco, KTX2 के लिए com.unity.cloud.ktx और Meshopt के लिए com.unity.meshopt.decompress चाहिए। WebP जानबूझकर समर्थित नहीं है, इसलिए Unity लक्ष्य के लिए KTX2 का उपयोग करें।
मोबाइल वेब गेम के लिए लक्ष्य
इसके लिए कोई स्पेक नहीं है, लेकिन कुछ व्यावहारिक आंकड़े फ़ोन पर अच्छा प्रदर्शन बनाए रखते हैं। पूरे पहले सीन का नेटवर्क डाउनलोड लगभग 10 MB से कम रखें और बाकी को स्ट्रीम करें (स्ट्रीमिंग एसेट लोडिंग ट्यूटोरियल में टियर और कोड दिए गए हैं)। टेक्सचर VRAM को 150 से 200 MB से कम रखें—यह RGBA8 में चार या पाँच 2048 टेक्सचर अथवा ETC1S में तीस टेक्सचर के बराबर है। प्रॉप्स को 5,000 त्रिभुजों से कम, मुख्य किरदार को 30,000 से 50,000 से कम और ड्रॉ कॉल को कुछ सौ के निचले स्तर पर रखें। प्रॉप्स के लिए 1024 टेक्सचर इस्तेमाल करें और 2048 केवल उन वस्तुओं के लिए रखें जिनके पास कैमरा जाता है। GLB को Brotli या gzip चालू करके सर्व करें, क्योंकि Meshopt और क्वांटाइज़्ड आउटपुट इस पर निर्भर करते हैं।
प्रकाशित करने से पहले सत्यापित करें
फ़ाइल आकार जाँचना आसान है। परिणाम को GLB व्यूअर में खोलकर बाकी जानकारी देखें: Extensions पैनल पुष्टि करता है कि EXT_meshopt_compression, KHR_draco_mesh_compression या KHR_texture_basisu वास्तव में फ़ाइल में शामिल हुआ है; Textures टैब हर टेक्सचर को उसकी वास्तविक VRAM लागत के अनुसार सबसे बड़े से छोटे क्रम में दिखाता है; और स्टेटस बार लाइव ड्रॉ कॉल तथा त्रिभुजों की संख्या दिखाता है। इसके बाद खिलाड़ी जिस दूरी से उन्हें देखेगा, वहाँ सिल्हूट और UV सीम पर सरलीकरण से बनी गड़बड़ियाँ जाँचें और सभी ऐनिमेशन चलाकर सुनिश्चित करें कि जॉइनिंग ने ऐसे हिस्सों को आपस में नहीं जोड़ दिया जिन्हें अलग-अलग हिलना चाहिए। अगर स्रोत शुरुआत में GLB नहीं था, तो पहले FBX या OBJ को FBX से GLB कन्वर्टर से चलाएँ, ताकि आप उसी फ़ाइल को कंप्रेस करें जिसे वास्तव में लोड किया जाएगा।
सामान्य प्रश्न
GLB फ़ाइल का आकार कैसे घटाएँ?
यह देखने के लिए gltf-transform inspect चलाएँ कि टेक्सचर या ज्योमेट्री में से कौन आकार पर अधिक प्रभाव डाल रहा है। अगर टेक्सचर बड़े हैं, तो उनका आकार 1024 या 2048 करें और उन्हें WebP या KTX2 में बदलें। अगर ज्योमेट्री बड़ी है, तो उसे सरल बनाकर Meshopt या Draco से कंप्रेस करें। gltf-transform optimize in.glb out.glb --texture-compress webp पूरी प्रक्रिया करता है, और ब्राउज़र वाला GLB ऑप्टिमाइज़र बिना इंस्टॉल किए यही काम करता है।
Draco बनाम Meshopt: कौन बेहतर है?
अधिकांश वेब गेम के लिए Meshopt। यह बहुत तेज़ी से डिकोड होता है, कुछ सौ किलोबाइट WASM के बजाय 32 KB का डिकोडर देता है और ऐनिमेशन व मॉर्फ टार्गेट भी कंप्रेस करता है, जिन्हें Draco छोड़ देता है। स्थिर मेश के लिए Draco छोटी फ़ाइलें बनाता है—हमारे 28 MB परीक्षण मॉडल पर gzip के बाद 3.3 MB के मुकाबले 2.6 MB—और PlayCanvas भी इसी का समर्थन करता है। इसलिए जब एसेट एक स्थिर स्कैन हो और अधिकांश बाइट्स ज्योमेट्री में हों, तब Draco बेहतर रहता है।
KTX2 क्या है और यह Basis से कैसे अलग है?
Basis Universal कंप्रेशन कोडेक है, जिसके दो मोड ETC1S और UASTC हैं। KTX2, Khronos का कंटेनर फ़ाइल फ़ॉर्मेट है, जिसमें Basis से कंप्रेस किया गया टेक्सचर डेटा, मिपमैप और मेटाडेटा रखा जाता है; glTF इसे KHR_texture_basisu के माध्यम से संदर्भित करता है। पुराने पाइपलाइन में सीधे .basis फ़ाइल उपयोग होती थी। .ktx2 का उपयोग करें।
क्या मुझे ETC1S या UASTC इस्तेमाल करना चाहिए?
बेस कलर और ऐसी किसी भी चीज़ के लिए ETC1S जिसका पास से दृश्य नहीं दिखता: छोटी फ़ाइलें और VRAM में 4 बिट प्रति पिक्सेल। नॉर्मल मैप, रफ़नेस/मेटलनेस/ऑक्लूज़न और मुख्य टेक्सचर के लिए UASTC इस्तेमाल करें तथा Zstandard सुपरकंप्रेशन चालू रखें, ताकि डाउनलोड आकार उचित रहे। कलर टेक्सचर को sRGB और डेटा टेक्सचर को लीनियर टैग करें, वरना नॉर्मल की शेडिंग गलत होगी।
glTF टेक्सचर कैसे कंप्रेस करूँ?
डाउनलोड आकार के लिए पहले gltf-transform resize, फिर gltf-transform webp चलाएँ। GPU मेमोरी के लिए KTX-Software इंस्टॉल करके gltf-transform etc1s या uastc चलाएँ, अथवा PNG फ़ाइलों को KTX2 कंप्रेसर पर डालें। दोनों ही स्थितियों में पहले आयाम सीमित करें: RGBA8 के रूप में 4096 टेक्सचर 89 MB VRAM लेता है और ब्राउज़र में इतना बड़ा टेक्सचर भेजने का लगभग कभी कोई कारण नहीं होता।
मोबाइल पर three.js के लिए मेरा GLB इतना बड़ा क्यों है?
आमतौर पर समस्या फ़ाइल आकार नहीं, बल्कि टेक्सचर मेमोरी होती है। चार 2048 RGBA टेक्सचर, सीन द्वारा कुछ भी ड्रॉ करने से पहले ही लगभग 90 MB VRAM लेते हैं और कुछ सौ MB के बाद फ़ोन ब्राउज़र टैब बंद कर देते हैं। KTX2 में बदलें ताकि टेक्सचर GPU पर कंप्रेस्ड रहें, जहाँ संभव हो उनका आकार 1024 तक सीमित करें और KTX2Loader.detectSupport(renderer) कॉल करें, ताकि वे डिवाइस के फ़ॉर्मेट में ट्रांसकोड हों।
क्या gltfpack वही काम करता है जो gltf-transform करता है?
अधिकतर। gltfpack, meshoptimizer प्रोजेक्ट का एकल नेटिव बाइनरी है, जो डिफ़ॉल्ट रूप से क्वांटाइज़ करता है, GPU कैश के लिए वर्टेक्स को दोबारा क्रमबद्ध करता है, मेश को मर्ज करता है और Meshopt से कंप्रेस करता है। glTF-Transform एक Node लाइब्रेरी और CLI है, जिसमें यही ऑपरेशन अलग-अलग स्क्रिप्ट किए जा सकने वाले चरणों के रूप में मिलते हैं, साथ ही Draco आउटपुट भी मिलता है जिसे gltfpack नहीं लिखता। हमारी परीक्षण फ़ाइल पर दोनों के Meshopt आउटपुट एक-दूसरे से लगभग 10 प्रतिशत के भीतर रहे।
संबंधित सामग्री
- वेब गेम के लिए स्ट्रीमिंग एसेट लोडिंग: अभी छोटी की गई फ़ाइलों के लिए टियर, प्राथमिकता कतारें और प्रगति बार
- 2026 में वेब गेम टेक स्टैक: API स्तर पर WebGL, WebGPU, Wasm और एसेट फ़ॉर्मेट
- मुफ़्त 3D मॉडल साइटें: मॉडल कहाँ से आते हैं और उनका आकार बड़ा क्यों होता है
- सर्वश्रेष्ठ AI 3D मॉडल जनरेटर: जनरेटर क्या आउटपुट देते हैं और उसकी ज्योमेट्री कितनी घनी होती है
- Three.js बनाम Babylon.js: दोनों अलग-अलग सेटअप के साथ Draco, Meshopt और KTX2 लोड करते हैं
- PlayCanvas बनाम Three.js: एसेट पाइपलाइन सहित इंजन बनाम लाइब्रेरी