3D Model Viewer: glTF और GLB ऑनलाइन

glTF/GLB 3D Model Viewer क्या है?

glTF/GLB 3D Model Viewer आपको .gltf और .glb 3D मॉडल फ़ाइलें सीधे वेब ब्राउज़र में खोलने और जांचने की सुविधा देता है — बिना सॉफ़्टवेयर इंस्टॉलेशन, बिना अकाउंट और बिना किसी सर्वर पर फ़ाइल अपलोड किए। एक मॉडल ड्रॉप ज़ोन में खींचें और माउस से तुरंत ऑर्बिट, ज़ूम और पैन करें। यह टूल Google के model-viewer वेब कंपोनेंट पर आधारित है — वही प्रोडक्शन-क्वालिटी रेंडरर जो Google Search के 3D प्रोडक्ट प्रीव्यू और AR Quick Look में इस्तेमाल होता है। आप पांच एनवायरनमेंट लाइटिंग प्रीसेट के बीच स्विच कर सकते हैं, एक्सपोज़र और शैडो इंटेंसिटी एडजस्ट कर सकते हैं, ऑटो-रोटेट चालू-बंद कर सकते हैं और मौजूदा व्यू का स्क्रीनशॉट एक्सपोर्ट कर सकते हैं।

मुख्य विशेषताएं

• glTF और GLB के लिए Drag & Drop — एक .gltf या .glb फ़ाइल खींचें; गलत एक्सटेंशन होने पर लोड होने से पहले एरर दिखाई देता है
• ऑर्बिट, ज़ूम और पैन कंट्रोल — ऑर्बिट के लिए लेफ्ट-क्लिक + ड्रैग, ज़ूम के लिए स्क्रॉल, पैन के लिए राइट-क्लिक + ड्रैग; <model-viewer> एलिमेंट पर camera-controls सक्षम है
• ऑटो-रोटेट टॉगल — एक स्विच <model-viewer> कंपोनेंट पर auto-rotate एट्रीब्यूट को सक्षम या अक्षम करता है; डिफ़ॉल्ट रूप से चालू
• पांच एनवायरनमेंट लाइटिंग प्रीसेट — Neutral, Warm, Legacy, Commerce, Spruit Sunrise; सीधे environment-image एट्रीब्यूट से मैप होते हैं
• एक्सपोज़र एडजस्टमेंट — 0.1 से 3.0 तक स्लाइडर (स्टेप 0.1); डिफ़ॉल्ट 1.0
• शैडो इंटेंसिटी एडजस्टमेंट — 0.0 से 2.0 तक स्लाइडर (स्टेप 0.1); डिफ़ॉल्ट 1.0; shadow-intensity एट्रीब्यूट से मैप
• स्क्रीनशॉट एक्सपोर्ट — modelViewer.toBlob() कॉल करता है और {मॉडलनाम}_{आस्पेक्टरेशियो}_{लाइटिंग}_{रेज़ोल्यूशन}.png के रूप में सेव करता है
• आस्पेक्ट रेशियो प्रीसेट — फ़्री, 1:1, 4:3, 16:9, 9:16, 3:2 और 21:9 में से चुनें
• कई अपलोड विधियां — एकल .gltf/.glb फ़ाइल, glTF बंडल वाला ZIP आर्काइव या पूरा फ़ोल्डर अपलोड करें
• Google model-viewer द्वारा संचालित — PBR (फ़िज़िकली-बेस्ड रेंडरिंग) मैटेरियल सपोर्ट के साथ प्रोडक्शन-क्वालिटी WebGL रेंडरिंग

glTF/GLB 3D Model Viewer का उपयोग कैसे करें

चरण 1: 3D मॉडल लोड करें

glTF/GLB 3D Model Viewer खोलें। अपने फ़ाइल सिस्टम से एक .gltf या .glb फ़ाइल ड्रॉप ज़ोन पर खींचें। वैकल्पिक रूप से, फ़ाइल पिकर खोलने के लिए ड्रॉप ज़ोन पर क्लिक करें (accept एट्रीब्यूट .gltf,.glb पर सेट है)। मॉडल एक लोकल ऑब्जेक्ट URL का उपयोग करके लोड होता है — नेटवर्क पर कोई डेटा नहीं भेजा जाता।

यदि आप किसी असमर्थित एक्सटेंशन वाली फ़ाइल ड्रॉप करते हैं, तो एक टोस्ट नोटिफ़िकेशन "Invalid file" दिखाता है और कुछ भी लोड नहीं होता।

चरण 2: मॉडल नेविगेट करें

लोड होने के बाद, व्यूअर 500 px ऊंचे व्यूपोर्ट में मॉडल दिखाता है। नेविगेट करने के लिए माउस का उपयोग करें:

• लेफ्ट-क्लिक और ड्रैग — मॉडल के चारों ओर ऑर्बिट करें
• स्क्रॉल व्हील — ज़ूम इन और आउट करें
• राइट-क्लिक और ड्रैग — कैमरा पैन करें

टच जेस्चर मोबाइल पर समान रूप से काम करते हैं: ऑर्बिट के लिए एक उंगली से खींचें, ज़ूम के लिए पिंच करें, पैन के लिए दो उंगलियों से खींचें।

मॉडल का नाम कंट्रोल पैनल में मोनोस्पेस फ़ॉन्ट में दिखता है। वर्तमान मॉडल अनलोड करके ड्रॉप ज़ोन पर वापस जाने के लिए कभी भी Load New Model पर क्लिक करें।

चरण 3: लाइटिंग एडजस्ट करें

दाईं ओर के कंट्रोल पैनल में, नाम पर क्लिक करके पांच में से एक एनवायरनमेंट लाइटिंग प्रीसेट चुनें:

चयनित प्रीसेट फ़िल्ड बैकग्राउंड के साथ हाइलाइट होता है। बदलाव तुरंत लागू होते हैं — रीलोड की ज़रूरत नहीं।

चरण 4: एक्सपोज़र और शैडो फाइन-ट्यून करें

लाइटिंग प्रीसेट के नीचे, दो स्लाइडर आपको अतिरिक्त कंट्रोल देते हैं:

• Exposure (0.1–3.0) — सीन की कुल ब्राइटनेस बढ़ाता या घटाता है। 1.0 न्यूट्रल रेफरेंस है। गहरे मॉडल को ब्राइट करने के लिए 1.5–2.0 आज़माएं।
• Shadow Intensity (0.0–2.0) — मॉडल के नीचे ग्राउंड शैडो कितना शार्प और गहरा दिखे, यह नियंत्रित करता है। शैडो पूरी तरह हटाने के लिए 0.0 करें।

दोनों वैल्यू रियल टाइम में <model-viewer> एट्रीब्यूट अपडेट करती हैं।

चरण 5: ऑटो-रोटेट टॉगल करें और स्क्रीनशॉट एक्सपोर्ट करें

Auto Rotate टॉगल स्विच से मॉडल को उसकी वर्टिकल एक्सिस पर धीरे-धीरे घुमाना शुरू या बंद करें। ऑटो-रोटेट डिफ़ॉल्ट रूप से चालू है, जिससे आप हाथ लगाए बिना पूरे मॉडल का व्यू देख सकते हैं।

जब व्यू मनचाही पोज़िशन पर हो, Screenshot पर क्लिक करें। टूल मौजूदा रेंडर कैप्चर करता है और परिणाम PNG फ़ाइल के रूप में डाउनलोड करता है जिसका नाम मॉडल नाम, आस्पेक्ट रेशियो, लाइटिंग प्रीसेट और रेज़ोल्यूशन से बना होता है। कंट्रोल पैनल से स्क्रीनशॉट रेज़ोल्यूशन भी चुन सकते हैं — Viewport (वर्तमान साइज़), 720p, 1080p, 2K और 4K विकल्प हैं।

व्यावहारिक उदाहरण

इंटीग्रेशन से पहले गेम असेट की जांच

एक गेम डेवलपर को player-character.glb के रूप में एक कैरेक्टर मॉडल मिलता है। वे इसे व्यूअर में ड्रैग करते हैं यह जांचने के लिए कि असेट सही दिखता है या नहीं: Neutral लाइटिंग में टेक्सचर सही से लग रहे हैं या नहीं, और आउटडोर सीन के लिए Warm लाइटिंग में कैरेक्टर कैसा दिखता है। वे रिव्यू टिकट में अटैच करने के लिए स्क्रीनशॉट एक्सपोर्ट करते हैं।

ई-कॉमर्स लिस्टिंग के लिए प्रोडक्ट मॉडल चेक करना

एक ई-कॉमर्स टीम को एक सप्लायर से .glb फ़ॉर्मेट में 3D प्रोडक्ट मॉडल मिलता है। वे इसे व्यूअर में लोड करते हैं, Commerce लाइटिंग प्रीसेट (क्लीन प्रोडक्ट फ़ोटोग्राफ़ी के लिए ऑप्टिमाइज़्ड) चुनते हैं, अधिक स्पष्टता के लिए एक्सपोज़र 1.4 करते हैं और सॉफ्टर लुक के लिए शैडो इंटेंसिटी 0.5 कम करते हैं। वे प्रोडक्ट पेज पर स्टैटिक फ़ॉलबैक इमेज के रूप में उपयोग के लिए स्क्रीनशॉट एक्सपोर्ट करते हैं।

Blender से glTF एक्सपोर्ट वैलिडेट करना

एक 3D आर्टिस्ट Blender से .gltf फ़ाइल के रूप में एक सीन एक्सपोर्ट करता है और इसे व्यूअर में खोलकर क्विक सैनिटी चेक करता है: क्या मॉडल बिना एरर के लोड होता है? क्या मैटेरियल सही रंगों के साथ रेंडर हो रहे हैं? क्या स्केल सही है? व्यूअर के ऑर्बिट कंट्रोल से सभी साइड्स जल्दी जांची जा सकती हैं। Spruit Sunrise प्रीसेट यह वेरिफ़ाई करने में मदद करता है कि मॉडल नैचुरल आउटडोर लाइट में कैसा दिखता है।

टिप्स और बेस्ट प्रैक्टिस

स्क्रीनशॉट एक्सपोर्ट में idealAspect: true पैरामीटर कैप्चर की गई इमेज को व्यूअर के मौजूदा आस्पेक्ट रेशियो से मेल खाने देता है, स्क्वेयर क्रॉप फ़ोर्स करने के बजाय। अगर आपका मॉडल ऊंचाई से ज़्यादा चौड़ा है, तो स्क्रीनशॉट इसे दर्शाएगा।

model-viewer वेब कंपोनेंट glTF स्पेसिफ़िकेशन में परिभाषित PBR (फ़िज़िकली-बेस्ड रेंडरिंग) मैटेरियल सपोर्ट करता है। अगर कोई मॉडल फ्लैट या वाशआउट दिखे, तो जांचें कि इसे आपके 3D सॉफ्टवेयर से PBR मैटेरियल के साथ एक्सपोर्ट किया गया था या नहीं। बिना मैटेरियल डेटा के एक्सपोर्ट किए गए मॉडल डिफ़ॉल्ट ग्रे शेडिंग में रेंडर होंगे।

बाहरी टेक्सचर रेफरेंस वाली .gltf फ़ाइलों के लिए, फ़ाइल पिकर से लोड करना विफल हो सकता है क्योंकि ब्राउज़र डायरेक्टरी में अन्य फ़ाइलें एक्सेस नहीं कर सकता। ब्राउज़र में विश्वसनीय लोडिंग के लिए .glb फ़ॉर्मेट (जो सभी टेक्सचर एम्बेड करता है) का उपयोग करें।

व्यूअर मॉडल के आयामों की परवाह किए बिना 500 px ऊंचाई पर रेंडर करता है। मॉडल को पोज़िशन करने के लिए ऑर्बिट कंट्रोल का उपयोग करें, फिर स्क्रीनशॉट लें — स्क्रीनशॉट वास्तविक डिस्प्ले डायमेंशन पर रेंडर कैप्चर करता है।

सामान्य समस्याएं और ट्रबलशूटिंग

"Invalid file" एरर। टूल केवल .gltf या .glb एक्सटेंशन वाली फ़ाइलें स्वीकार करता है (.match(/\.(gltf|glb)$/i) से केस-इनसेंसिटिव चेक)। ज़रूरत हो तो फ़ाइल का नाम बदलें, या जांचें कि आपका एक्सपोर्ट टूल सही फ़ॉर्मेट बना रहा है।

मॉडल लोड होता है लेकिन टेक्सचर गायब हैं। अगर आप .gltf फ़ाइल (JSON वेरिएंट) लोड कर रहे हैं, तो संबंधित टेक्सचर इमेज और बाइनरी बफर फ़ाइलें उसी डायरेक्टरी में होनी चाहिए। ब्राउज़र का फ़ाइल पिकर केवल चुनी गई एकल फ़ाइल तक पहुंच देता है, डायरेक्टरी तक नहीं। सब कुछ एक फ़ाइल में बंडल करने के लिए .glb फ़ॉर्मेट का उपयोग करें।

"Screenshot error" टोस्ट के साथ स्क्रीनशॉट विफल। model-viewer.toBlob() मेथड के लिए WebGL उपलब्ध होना ज़रूरी है। अगर आपके ब्राउज़र में WebGL अक्षम है या ग्राफ़िक्स ड्राइवर इसे ब्लॉक कर रहा है, तो स्क्रीनशॉट विफल होंगे। chrome://settings/graphics (Chrome) या अपने ब्राउज़र का समकक्ष जांचें।

ऑटो-रोटेट नहीं रुकता। Auto Rotate टॉगल auto-rotate एट्रीब्यूट को रियल टाइम में कंट्रोल करता है। अगर टॉगल करने से रोटेशन नहीं रुकती, तो कैमरा कंट्रोल वापस पाने के लिए मॉडल पर क्लिक करें (model-viewer के डिफ़ॉल्ट बिहेवियर के अनुसार ऑटो-रोटेट भी पॉज़ होती है)।

गोपनीयता और सुरक्षा

glTF/GLB 3D Model Viewer आपकी मॉडल फ़ाइलें ब्राउज़र-लोकल URL.createObjectURL() से लोड करता है — डेटा कभी आपके डिवाइस से बाहर नहीं जाता। Google model-viewer कंपोनेंट JavaScript लाइब्रेरी के रूप में लोड होता है और पूरी तरह आपके GPU पर WebGL के ज़रिए रेंडर करता है। कोई मॉडल ज्योमेट्री, टेक्सचर या मेटाडेटा किसी सर्वर को ट्रांसमिट नहीं होता। यह टूल को मालिकाना 3D असेट, अप्रकाशित प्रोडक्ट या गोपनीय औद्योगिक डिज़ाइन के साथ उपयोग के लिए सुरक्षित बनाता है।

अक्सर पूछे जाने वाले प्रश्न

क्या glTF/GLB 3D Model Viewer मुफ़्त है?

हां, पूरी तरह मुफ़्त — कोई अकाउंट नहीं, कोई यूसेज लिमिट नहीं। यह Glyph Widgets के फ्री टूल सूट का हिस्सा है।

क्या glTF/GLB 3D Model Viewer ऑफ़लाइन काम करता है?

एक बार पेज लोड होने के बाद (@google/model-viewer कंपोनेंट सहित), आप इंटरनेट कनेक्शन के बिना लोकल मॉडल फ़ाइलें लोड और देख सकते हैं। व्यूअर लाइब्रेरी डाउनलोड करने के लिए पेज का पहला लोड नेटवर्क एक्सेस चाहता है।

क्या glTF/GLB 3D Model Viewer में मेरा डेटा सुरक्षित है?

आपकी मॉडल फ़ाइलें URL.createObjectURL() से लोड होती हैं और WebGL में लोकली रेंडर होती हैं। कोई ज्योमेट्री, टेक्सचर या मेटाडेटा किसी सर्वर को नहीं भेजा जाता। Google का model-viewer कंपोनेंट पूरी तरह ब्राउज़र में काम करता है।

टूल कौन से फ़ाइल फ़ॉर्मेट सपोर्ट करता है?

केवल .gltf (JSON + बाहरी फ़ाइलें) और .glb (बाइनरी बंडल्ड फ़ॉर्मेट)। अन्य 3D फ़ॉर्मेट (.obj, .fbx, .stl, .dae) सपोर्ट नहीं हैं। लोड करने से पहले Blender या Khronos के glTF कनवर्टर जैसे टूल से glTF में कनवर्ट करें।

glTF और GLB में क्या अंतर है?

glTF एक JSON टेक्स्ट फ़ाइल है जो बाहरी बाइनरी बफर और टेक्सचर इमेज रेफरेंस करती है। GLB बाइनरी कंटेनर फ़ॉर्मेट है जो JSON, बफर और टेक्सचर को एक फ़ाइल में बंडल करता है। ब्राउज़र लोडिंग के लिए GLB को प्राथमिकता दें क्योंकि सभी असेट सेल्फ-कंटेंड होते हैं।

उपलब्ध लाइटिंग प्रीसेट क्या हैं?

पांच प्रीसेट हैं: Neutral (बैलेंस्ड स्टूडियो लाइटिंग), Warm (एम्बर/वार्म टोन), Legacy (क्लासिक रेंडरिंग), Commerce (क्लीन, हाई-कॉन्ट्रास्ट प्रोडक्ट लाइटिंग) और Spruit Sunrise (नैचुरल आउटडोर लाइट)। ये model-viewer कंपोनेंट के environment-image एट्रीब्यूट से मैप होते हैं।

एक्सपोज़र स्लाइडर क्या करता है?

एक्सपोज़र रेंडर की गई सीन की कुल ब्राइटनेस 0.1 से 3.0 तक एडजस्ट करता है। डिफ़ॉल्ट 1.0 है। 1.0 से ऊपर सीन ब्राइट करता है; नीचे डार्क करता है। यह फ़ोटोग्राफी या रेंडरर में एक्सपोज़र सेटिंग के बराबर है।

क्या मैं एनिमेटेड glTF मॉडल देख सकता/सकती हूं?

model-viewer कंपोनेंट glTF एनिमेशन सपोर्ट करता है, लेकिन Glyph Widgets का इंटरफ़ेस एनिमेशन के लिए प्लेबैक कंट्रोल नहीं देता। ऑटो-रोटेट वर्तमान UI में एकमात्र मोशन फ़ीचर है। glTF एनिमेशन प्रीव्यू करने के लिए Khronos glTF Sample Viewer जैसे डेडिकेटेड टूल का उपयोग करें।

स्क्रीनशॉट किस रेज़ोल्यूशन पर एक्सपोर्ट होते हैं?

कंट्रोल पैनल में पांच रेज़ोल्यूशन विकल्पों में से चुनें: Viewport (मौजूदा डिस्प्ले साइज़), 720p (1280x720), 1080p (1920x1080), 2K (2560x1440) और 4K (3840x2160)। Viewport रेज़ोल्यूशन पर, स्क्रीनशॉट व्यूअर के डिस्प्ले डायमेंशन से मेल खाता है। अधिक रेज़ोल्यूशन के लिए, टूल व्यूअर एलिमेंट को अस्थायी रूप से रिसाइज़ करता है और फिर रिस्टोर करता है।

क्या मैं बहुत बड़ी GLB फ़ाइलें लोड कर सकता/सकती हूं?

कोई निर्धारित साइज़ लिमिट नहीं है, लेकिन बड़ी फ़ाइलें (50 MB+) लोकल ऑब्जेक्ट URL बनाने और model-viewer रेंडरर इनिशियलाइज़ करने में कुछ सेकंड ले सकती हैं। परफ़ॉर्मेंस आपके ब्राउज़र, GPU और उपलब्ध RAM पर निर्भर करती है।

संबंधित टूल

• जल्द आ रहा है: Image Converter — व्यूअर से एक्सपोर्ट किए गए स्क्रीनशॉट को विभिन्न इमेज फ़ॉर्मेट में कनवर्ट करें
• जल्द आ रहा है: SVG to PNG — SVG-आधारित डिज़ाइन असेट कनवर्ट करें जो 3D वर्कफ़्लो को पूरक बनाते हैं
• जल्द आ रहा है: EXIF Viewer — 3D मॉडलिंग के लिए रेफरेंस इमेज के रूप में उपयोग की गई फ़ोटोग्राफ में मेटाडेटा देखें

अभी glTF/GLB 3D Model Viewer आज़माएं: Glyph Widgets glTF/GLB 3D Model Viewer