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