Google I/O के लिए तैयारी करते समय, हम वेब पर ऑगमेंटेड रिएलिटी (एआर) की रोमांचक संभावनाओं को हाइलाइट करना चाहते थे. Chacmool, वेब पर जानकारी देने वाला एक डेमो है, जिसे हमने यह दिखाने के लिए बनाया है कि वेब पर आधारित एआर से उपयोगकर्ताओं को एआर अनुभव के साथ जुड़ने में कितनी आसानी हो सकती है. वेब पर एआर (ऑगमेंटेड रिएलिटी) का इस्तेमाल हर जगह आसानी से और आसानी से किया जा सकता है.
हमने अब इस डेमो को, Android O या इसके बाद के वर्शन वाले ARCore के साथ काम करने वाले Android डिवाइसों पर, Chrome कैनरी पर चालू कर दिया है. आपको
ARCore इंस्टॉल भी करना होगा.
यह काम एक नए WebXR प्रस्ताव (WebXR Hit Test API) पर निर्भर करता है.
इसलिए, यह कैनरी में ही रहना चाहिए, क्योंकि हम इमर्सिव वेब कम्यूनिटी ग्रुप के अन्य सदस्यों के साथ
एपीआई के नए प्रस्ताव की जांच और उसे बेहतर बनाते हैं. डेमो ऐक्सेस करने के लिए, आपको chrome://flags:
#webxr और #webxr-hit-test में दो फ़्लैग चालू करने होंगे. इन दोनों को चालू करने और कैनरी को फिर से चालू करने के बाद, Chacmool का डेमो देखें.
Chacmol AR एक्सपीरियंस में शिक्षा से जुड़ी चीज़ें शामिल हैं. इसमें एआर (ऑगमेंटेड रिएलिटी) का इस्तेमाल करके, लोगों को प्राचीन चाक मूल की मूर्तियों के बारे में जानकारी दी जा रही है. उपयोगकर्ता अपनी असलियत में एक बड़ी मूर्ति लगा सकते हैं और अलग-अलग कोणों और दूरी से उस मूर्ति को देखने के लिए इधर-उधर घूम सकते हैं. एआर (ऑगमेंटेड रिएलिटी) की शानदार प्रकृति से उपयोगकर्ता, असल दुनिया की तरह आसानी से कॉन्टेंट खोज सकते हैं, उसे खोज सकते हैं, और उसका इस्तेमाल कर सकते हैं. एआर (ऑगमेंटेड रिएलिटी) में किसी ऑब्जेक्ट को सपाट 2D स्क्रीन पर देखने के बजाय, हम इस बात को बेहतर तरीके से समझ पाते हैं कि हम क्या देख रहे हैं. इसकी वजह यह है कि हम इसे कई अलग-अलग कोणों और दूरियों से देख सकते हैं. इसके लिए हम बेहद सहज इंटरैक्शन मॉडल का इस्तेमाल करते हैं: ऑब्जेक्ट के आस-पास या उससे दूर जाना. साथ ही, इस अनुभव में, सीधे मूर्ति पर एनोटेशन लगाए गए हैं. इससे उपयोगकर्ता, टेक्स्ट में बताई गई चीज़ों के बारे में सीधे तौर पर जुड़ पाते हैं. साथ ही, वे यह भी जान पाते हैं कि मूर्तिकला पर कौनसी चीज़ें मौजूद हैं.
इस डेमो को बनाने में करीब एक महीने का समय लगा. इसमें WebXR टीम के वेब पर आधारित एआर डेमो, WebAR-article के कुछ कॉम्पोनेंट का इस्तेमाल किया गया. मूर्ति के बारे में जानकारी, इसके Google के Arts & Culture पेज से ली गई है. यह 3D मॉडल, Google Arts & Culture के पार्टनर CyArk से मिला है. 3D मॉडल को वेब पर तैयार करने के लिए, मेशलैब और मेश मिक्सर के कॉम्बिनेशन का इस्तेमाल मॉडल की मरम्मत करने और फ़ाइल का साइज़ कम करने के लिए, मेश को बंद करने के लिए किया गया. इसके बाद, ड्रैको, 3D जियोमेट्रिक मेश और पॉइंट क्लाउड को कंप्रेस और डिकंप्रेस करने के लिए बनाई गई लाइब्रेरी है. इस लाइब्रेरी का इस्तेमाल करके, मॉडल की फ़ाइल का साइज़ 44.3 मेगाबाइट से घटाकर सिर्फ़ 225 किलोबाइट प्रति सेकंड किया गया. आखिर में, वेब वर्कर का इस्तेमाल बैकग्राउंड थ्रेड पर मॉडल लोड करने के लिए किया जाता है, ताकि मॉडल के लोड होने और डीकंप्रेस किए जाने के दौरान पेज इंटरैक्टिव बना रहे. इस कार्रवाई से आम तौर पर जैंक हो जाता है और पेज स्क्रोल नहीं होता.
हम इसे डेस्कटॉप पर शुरू कर रहे थे और फ़ोन पर डिप्लॉय कर रहे थे. इसलिए, अनुभव की जांच करने के लिए Chrome के रिमोट डीबगिंग टूल का इस्तेमाल करके, कोड में बदलावों को तेज़ी से दोहराया जाता है. Chrome में, डीबग करने और परफ़ॉर्मेंस की जांच करने के लिए शानदार डेवलपर टूल हैं.
एआर/वीआर का इस्तेमाल करने के लिए सबसे सही तरीके
नेटिव एआर अनुभवों के लिए डिज़ाइन तैयार करने के ज़्यादातर डिज़ाइन और इंजीनियरिंग दिशा-निर्देश, वेब आधारित एआर (ऑगमेंटेड रिएलिटी) अनुभव बनाने के लिए लागू होते हैं. अगर आपको सबसे सही सामान्य तरीकों के बारे में ज़्यादा जानकारी चाहिए, तो एआर डिज़ाइन से जुड़े दिशा-निर्देश देखें जिन्हें हमने हाल ही में रिलीज़ किया है.
खास तौर पर, वेब पर आधारित एआर अनुभव डिज़ाइन करते समय पूरी स्क्रीन का इस्तेमाल करना बेहतर होता है. इसका मतलब है कि एआर (ऑगमेंटेड रिएलिटी) का इस्तेमाल करते समय पूरी स्क्रीन का इस्तेमाल करना बेहतर है, जैसे कि मोबाइल पर वीडियो प्लेयर की तरह फ़ुलस्क्रीन मोड पर जाएं. इससे उपयोगकर्ता, व्यू को स्क्रोल नहीं कर पाते या वेब पेज के दूसरे एलिमेंट की वजह से उनका ध्यान नहीं भटकता. एआर (ऑगमेंटेड रिएलिटी) पर स्विच करना, आसान और आसान होना चाहिए, ताकि एआर ऑनबोर्डिंग में जाने से पहले कैमरा व्यू दिखे (उदाहरण के लिए, एक रेटिकल ड्रॉ करना). वेब आधारित एआर के बारे में ध्यान देने वाली बात यह है कि स्थानीय लोगों के उलट, डेवलपर के पास कैमरे के फ़्रेम, रोशनी का अनुमान लगाने, ऐंकर या हवाई जहाज़ (अभी तक) का ऐक्सेस नहीं होता. इसलिए, वेब आधारित एआर अनुभव डिज़ाइन करते समय डिज़ाइनर और डेवलपर को इन सीमाओं का ध्यान रखना चाहिए.
इसके अलावा, वेब अनुभवों के लिए कई तरह के डिवाइस इस्तेमाल किए जाने की वजह से, यह ज़रूरी है कि परफ़ॉर्मेंस को इस तरह ऑप्टिमाइज़ किया जाए कि सबसे अच्छा उपयोगकर्ता अनुभव मिल सके. इसलिए: पॉली की गिनती कम रखें, कम से कम लाइटों से दूर जाने की कोशिश करें, अगर संभव हो, तो शैडो का अनुमान लगाएं और ड्रॉ कॉल को कम करें. एआर (ऑगमेंटेड रिएलिटी) में टेक्स्ट दिखाते समय, टेक्स्ट रेंडरिंग की आधुनिक तकनीक (जैसे, साइन की गई दूरी के फ़ील्ड के हिसाब से) का इस्तेमाल करें इससे यह पक्का किया जा सकता है कि टेक्स्ट साफ़ दिख रहा हो और उसे हर तरफ़ से आसानी से पढ़ा जा सके. व्याख्या करते समय, उपयोगकर्ता की नज़र को अन्य इनपुट के तौर पर देखें.साथ ही, व्याख्याएं तब दिखाएं, जब वे काम के हों. जैसे, नज़दीकियों के आधार पर तैयार की गई व्याख्याएं, जो तब दिखती हैं, जब उपयोगकर्ता अपनी पसंद के विषय पर फ़ोकस करता है.
आखिर में, क्योंकि यह कॉन्टेंट वेब पर आधारित है, इसलिए वेब के लिए डिज़ाइन करने के सबसे सही सबसे अच्छे तरीकों को भी लागू करना ज़रूरी है. यह पक्का करें कि साइट सभी डिवाइसों (डेस्कटॉप, टैबलेट, मोबाइल, हेडसेट वगैरह) पर अच्छा अनुभव देती हो - प्रोग्रेसिव एन्हैंसमेंट की सुविधा का मतलब है कि ऐसे डिवाइसों के लिए डिज़ाइन करना भी जिनमें एआर (ऑगमेंटेड रिएलिटी) की सुविधा नहीं है. जैसे, बिना एआर (ऑगमेंटेड रिएलिटी) वाले डिवाइसों पर 3D मॉडल व्यूअर दिखाना.
अगर आप अपना खुद का वेब-आधारित एआर अनुभव डेवलप करना चाहते हैं, तो हमारे पास यहां एक सहयोगी पोस्ट है, जिसमें खुद वेब पर एआर बनाने शुरू करने के तरीके के बारे में ज़्यादा जानकारी दी जाएगी. (Chacmoo के डेमो का सोर्स भी देखा जा सकता है.) WebXR Device API पर लगातार काम चल रहा है. हमें सुझाव, शिकायत या राय दें, ताकि हम यह पक्का कर सकें कि यह सभी तरह के ऐप्लिकेशन और इस्तेमाल के उदाहरणों को चालू करे. इसलिए, कृपया GitHub पर जाएं और बातचीत में शामिल हों!