वेब के लिए ऑगमेंटेड रिएलिटी (एआर)

Joe Medley

Chrome 67 में, हमने एआर और वर्चुअल रिएलिटी (वीआर), दोनों के लिए WebXR Device API का एलान किया था. हालांकि, इसमें सिर्फ़ वीआर की सुविधाएं चालू थीं. वीआर का अनुभव पूरी तरह से कंप्यूटिंग डिवाइस पर निर्भर करता है. वहीं, एआर की मदद से असल दुनिया में वर्चुअल ऑब्जेक्ट रेंडर किए जा सकते हैं. उन ऑब्जेक्ट को प्लेस करने और ट्रैक करने की अनुमति देने के लिए, हमने Chrome Canary में WebXR हिट टेस्ट एपीआई जोड़ा है. यह एक नया तरीका है, जो इमर्सिव वेब कोड को असली दुनिया में ऑब्जेक्ट प्लेस करने में मदद करता है.

ध्यान दें: अगर आपको Chrome में स्पेसिफ़िकेशन के अपडेट के बारे में सूचना चाहिए, तो इमर्सिव वेब के शुरुआती उपयोगकर्ताओं के लिए गाइड को GitHub के रिपॉज़िटरी में रखा गया है. जब भी Chrome में स्पेसिफ़िकेशन में बदलाव होता है, तो इसे अपडेट किया जाता है. इन अपडेट के बारे में सूचना पाने के लिए, GitHub पर इसकी डेटा स्टोर करने की जगह देखें.

मुझे यह कहां मिलेगा?

फ़िलहाल, यह एपीआई Canary में ही उपलब्ध रहेगा. हम जांच के लिए ज़्यादा समय चाहते हैं, क्योंकि यह एपीआई का एक नया प्रस्ताव है. हमें यह पक्का करना है कि यह डेवलपर के लिए सही और मज़बूत हो.

Chrome Canary के अलावा, आपको इन चीज़ों की भी ज़रूरत होगी:

• काम करने वाला स्मार्टफ़ोन, जिसमें Android O या इसके बाद का वर्शन हो.
• ARCore इंस्टॉल करने के लिए.
• Chrome के दो फ़्लैग (chrome://flags): WebXRDevice API (#webxr) और WebXR Hit Test (#webxr-hit-test)

इनकी मदद से, डेमो देखे जा सकते हैं या हमारा कोडलैब आज़माया जा सकता है.

ध्यान दें: इमर्सिव वेब कम्यूनिटी ग्रुप के कुछ मौजूदा डेमो, खास तौर पर मैजिक विंडो का इस्तेमाल करने वाले डेमो, WebXR हिट टेस्ट चालू होने पर काम नहीं करते. कृपया कंस्ट्रक्शन के मलबे के लिए हमें माफ़ करें.

• Chacmool
• इमर्सिव वेब का सैंपल
• Codelab

यह सिर्फ़ वेब है

इस साल के Google IO में, हमने Chrome के शुरुआती वर्शन के साथ ऑगमेंटेड रिएलिटी (AR) का डेमो दिखाया था. मैंने उन तीन दिनों के दौरान, डेवलपर और नॉन-डेवलपर, दोनों को एक ही बात बार-बार कही थी. मुझे इस बात का अफ़सोस है कि मैंने इसे अपने इमर्सिव वेब लेख में शामिल नहीं किया: "यह सिर्फ़ वेब है."

"मुझे कौनसा Chrome एक्सटेंशन इंस्टॉल करना होगा?" "कोई एक्सटेंशन नहीं है. यह सिर्फ़ वेब है."

"क्या मुझे किसी खास ब्राउज़र की ज़रूरत है?" "यह सिर्फ़ वेब है."

"मुझे कौनसा ऐप्लिकेशन इंस्टॉल करना होगा?" "कोई खास ऐप्लिकेशन नहीं है. यह सिर्फ़ वेब है."

यह बात आपको पता हो सकती है, क्योंकि आपने यह लेख वेब से जुड़ी वेबसाइट पर पढ़ा है. अगर आपने इस नए एपीआई की मदद से डेमो बनाए हैं, तो इस सवाल के लिए तैयार रहें. आपको इस तरह की टिप्पणियां बहुत बार मिलेंगी.

IO के बारे में बात करते हुए, अगर आपको इमर्सिव वेब के बारे में ज़्यादा जानना है, तो यह वीडियो देखें. इसमें आपको यह जानकारी मिलेगी कि इमर्सिव वेब कहां है और यह आगे कहां तक जाएगा.

यह किस काम का है?

ऑगमेंटेड रिएलिटी (एआर) की सुविधा, कई मौजूदा वेब पेजों के लिए काफ़ी काम की साबित होगी. उदाहरण के लिए, इससे लोगों को शिक्षा से जुड़ी साइटों पर सीखने में मदद मिल सकती है. साथ ही, संभावित खरीदारों को खरीदारी करते समय अपने घर में ऑब्जेक्ट को विज़ुअलाइज़ करने में मदद मिल सकती है.

हमारे डेमो में इसकी जानकारी दी गई है. इनकी मदद से, उपयोगकर्ता किसी ऑब्जेक्ट को असल ज़िंदगी की तरह, अपने हिसाब से बड़ा या छोटा कर सकते हैं. इमेज को चुनी गई जगह पर सेट करने के बाद, वह उसी जगह पर बनी रहती है. साथ ही, वह उसी साइज़ में दिखती है जिस साइज़ में वह असल में उस जगह पर दिखती. साथ ही, उपयोगकर्ता उस इमेज को इधर-उधर घुमाने के साथ-साथ, उससे नज़दीक या दूर भी जा सकता है. इससे दर्शकों को ऑब्जेक्ट के बारे में ज़्यादा जानकारी मिलती है, जो दो डाइमेंशन वाली इमेज से नहीं मिलती.

अगर आपको नहीं पता कि इन सबका क्या मतलब है, तो डेमो का इस्तेमाल करने पर आपको यह साफ़ तौर पर पता चल जाएगा. अगर आपके पास ऐसा डिवाइस नहीं है जिस पर डेमो चलाया जा सकता है, तो इस लेख में सबसे ऊपर दिए गए वीडियो का लिंक देखें.

डेमो और वीडियो में यह नहीं दिखाया गया है कि एआर किसी असल ऑब्जेक्ट का साइज़ कैसे बता सकता है. इस वीडियो में, शिक्षा के मकसद से बनाए गए एक डेमो के बारे में बताया गया है. इसे हमने Chacmool नाम दिया है. इससे जुड़े लेख में, इस डेमो के बारे में ज़्यादा जानकारी दी गई है. इस बातचीत के लिए अहम बात यह है कि जब चकमूल की मूर्ति को ऑगमेंटेड रिएलिटी में रखा जाता है, तो आपको उसका साइज़ ऐसा दिखता है जैसे वह असल में आपके कमरे में हो.

चाकमूल का उदाहरण शिक्षा के मकसद से दिया गया है, लेकिन इसे आसानी से व्यावसायिक तौर पर भी इस्तेमाल किया जा सकता है. फ़र्नीचर की खरीदारी करने वाली ऐसी साइट की कल्पना करें जिस पर अपने लिविंग रूम में सोफ़ा रखने की सुविधा मिलती हो. एआर ऐप्लिकेशन से आपको पता चलता है कि सोफ़ा आपके स्पेस में फ़िट होगा या नहीं. साथ ही, यह भी पता चलता है कि यह आपके दूसरे फ़र्नीचर के साथ कैसा दिखेगा.

रे कास्ट, हिट टेस्ट, और रेटिकल

ऑगमेंटेड रिएलिटी को लागू करते समय, एक मुख्य समस्या यह होती है कि ऑब्जेक्ट को असल दुनिया के व्यू में कैसे रखा जाए. ऐसा करने के तरीके को रे कास्टिंग कहा जाता है. रे कास्टिंग का मतलब है, पॉइंटर रे और असल दुनिया में मौजूद किसी सतह के बीच के इंटरसेक्शन का हिसाब लगाना. उस इंटरसेक्शन को हिट कहा जाता है और यह तय करना कि हिट हुआ है या नहीं, इसे हिट टेस्ट कहा जाता है.

Chrome Canary में, नए कोड सैंपल को आज़माने का यह सही समय है. कुछ भी करने से पहले, दोबारा जांच लें कि आपने सही फ़्लैग चालू किए हैं. अब सैंपल लोड करें और "एआर शुरू करें" पर क्लिक करें.

कुछ बातों पर ध्यान दें. पहला, स्पीड मीटर, जो आपको अन्य इमर्सिव सैंपल से पता चल सकता है, वह 60 के बजाय हर सेकंड 30 फ़्रेम दिखाता है. यह वह दर है जिस पर वेब पेज को कैमरे से इमेज मिलती हैं.

एआर हिट टेस्ट का डेमो

आपको सूरजमुखी की इमेज पर भी ध्यान देना चाहिए. आपके चलते-फिरते यह भी चलता है और फ़्लोर और टेबल टॉप जैसी जगहों पर स्नैप हो जाता है. स्क्रीन पर टैप करने पर, किसी सतह पर एक सूरजमुखी दिखेगा. साथ ही, आपके डिवाइस के साथ एक नया सूरजमुखी भी चलेगा.

आपके डिवाइस के साथ चलने वाली और सतहों पर लॉक होने की कोशिश करने वाली इमेज को रेटिकल कहा जाता है. रेटिकल एक ऐसी इमेज होती है जो कुछ समय के लिए दिखती है. इसकी मदद से, ऑगमेंटेड रिएलिटी में किसी ऑब्जेक्ट को रखा जा सकता है. इस डेमो में, रेटिकल उस इमेज की कॉपी है जिसे डालना है. हालांकि, ऐसा करना ज़रूरी नहीं है. उदाहरण के लिए, Chacmool के डेमो में, यह एक ऐसा रेक्टैंगल बॉक्स है जिसका आकार, प्लेस किए जा रहे ऑब्जेक्ट के बेस के आकार से मिलता-जुलता है.

कोड पर जाएं

Chacmool डेमो से पता चलता है कि किसी प्रोडक्शन ऐप्लिकेशन में एआर कैसा दिख सकता है. अहम बात यह है कि WebXR सैंपल रेपो में, इससे भी आसान डेमो मौजूद है. मेरा सैंपल कोड, उस रिपॉज़िटरी में मौजूद एआर हिट टेस्ट डेमो से लिया गया है. आपके जानकारी के लिए बता दें कि मुझे कोड के उदाहरणों को आसान बनाना पसंद है, ताकि आपको यह समझने में मदद मिल सके कि क्या हो रहा है.

एआर सेशन में शामिल होने और रेंडर लूप चलाने के बुनियादी तरीके, एआर और वीआर के लिए एक जैसे होते हैं. अगर आपको इस बारे में जानकारी नहीं है, तो मेरा पिछला लेख पढ़ें. ज़्यादा जानकारी के लिए, एआर सेशन में शामिल होना और उसे चलाना, वीआर मैजिक विंडो सेशन में शामिल होने जैसा ही लगता है. मैजिक विंडो की तरह, सेशन टाइप नॉन-इमर्सिव होना चाहिए और रेफ़रंस टाइप का फ़्रेम 'eye-level' होना चाहिए.

नया एपीआई

अब हम आपको नए एपीआई का इस्तेमाल करने का तरीका बताएंगे. याद रखें कि एआर में, आइटम डालने से पहले रेटिकल, किसी सतह को ढूंढने की कोशिश करता है. ऐसा करने के लिए, हिट जांच की जाती है. हिट टेस्ट करने के लिए, XRSession.requestHitTest() को कॉल करें. यह इस तरह दिखता है:

xrSession.requestHitTest(origin, direction, frameOfReference)
.then(xrHitResult => {
  //
});

इस तरीके के तीन आर्ग्युमेंट, रे कास्ट को दिखाते हैं. रे कास्ट को रे के दो बिंदुओं (origin और direction) और उन बिंदुओं की गिनती करने के तरीके (frameOfReference) से तय किया जाता है. ऑरिजिन और डायरेक्शन, दोनों 3D वैक्टर होते हैं. कोई भी वैल्यू सबमिट करने पर, उसे सामान्य (1 लंबाई में) कर दिया जाएगा.

रेटिकल को मूव करना

डिवाइस को घुमाने पर, रेटिकल को भी उसी दिशा में घुमाना पड़ता है, ताकि वह ऐसी जगह ढूंढ सके जहां ऑब्जेक्ट को रखा जा सकता है. इसका मतलब है कि हर फ़्रेम में रीटिकल को फिर से बनाना होगा.

requestAnimationFrame() कॉलबैक से शुरू करें. वीआर की तरह, आपको एक सेशन और पोज़ की ज़रूरत होगी.

function onXRFrame(t, frame) {
  let xrSession = frame.session;
  // The frame of reference, which was set elsewhere, is 'eye-level'.
  // See onSessionStarted() ins the sample code for details.
  let xrPose = frame.getDevicePose(xrFrameOfRef);
  if (xrPose && xrPose.poseModelMatrix) {
    // Do the hit test and draw the reticle.
  }
}

सेशन और पोज़ सेट करने के बाद, यह तय करें कि किरण कहां से आ रही है. सैंपल कोड में, gl-matrix मथमैटिक्स लाइब्रेरी का इस्तेमाल किया गया है. हालांकि, gl-matrix का इस्तेमाल करना ज़रूरी नहीं है. अहम बात यह जानना है कि इसका इस्तेमाल किस चीज़ का हिसाब लगाने के लिए किया जा रहा है और यह डिवाइस की जगह के आधार पर कैसा काम करता है. XRPose.poseModalMatrix से डिवाइस की जगह की जानकारी पाएं. रे कास्ट करने के बाद, requestHitTest() को कॉल करें.

function onXRFrame(t, frame) {
  let xrSession = frame.session;
  // The frame of reference, which was set elsewhere, is 'eye-level'.
  // See onSessionStarted() ins the sample code for details.
  let xrPose = frame.getDevicePose(xrFrameOfRef);
  if (xrPose && xrPose.poseModelMatrix) {
    // Calculate the origin and direction for the raycast.
    xrSession.requestHitTest(rayOrigin, rayDirection, xrFrameOfRef)
    .then((results) => {
      if (results.length) {
        // Draw for each view.
      }
    });
  }
  session.requestAnimationFrame(onXRFrame);
}

हालांकि, हिट टेस्ट सैंपल में यह साफ़ तौर पर नहीं दिखता है, फिर भी सीन को ड्रॉ करने के लिए, आपको व्यू को लूप में चलाना होगा. ड्रॉइंग, WebGL API का इस्तेमाल करके की जाती है. अगर आपका मकसद सचमुच बड़ा है, तो ऐसा किया जा सकता है. हालांकि, हमारा सुझाव है कि आप किसी फ़्रेमवर्क का इस्तेमाल करें. इमर्सिव वेब के सैंपल में, सिर्फ़ डेमो के लिए बनाए गए Cottontail का इस्तेमाल किया जाता है. साथ ही, Three.js में मई से WebXR की सुविधा काम कर रही है.

कोई ऑब्जेक्ट डालना

जब उपयोगकर्ता स्क्रीन पर टैप करता है, तो किसी ऑब्जेक्ट को एआर में रखा जाता है. इसके लिए, select इवेंट का इस्तेमाल करें. इस चरण में, यह जानना ज़रूरी है कि इसे कहां रखना है. हिट टेस्ट के लिए, मूविंग रेटिकल का इस्तेमाल किया जाता है. इसलिए, किसी ऑब्जेक्ट को आसानी से डालने के लिए, उसे आखिरी हिट टेस्ट के समय रेटिकल की जगह पर ड्रॉ करें. अगर आपको लगता है कि आपके पास रेटिकल न दिखाने की कोई मान्य वजह है, तो चुने गए इवेंट में requestHitTest() को कॉल किया जा सकता है. जैसा कि सैंपल में दिखाया गया है.

नतीजा

इस बारे में जानने का सबसे अच्छा तरीका यह है कि आप सैंपल कोड को देखें या कोडलैब आज़माएं. उम्मीद है कि मैंने आपको दोनों के बारे में ज़रूरी जानकारी दे दी है.

हम इमर्सिव वेब एपीआई बनाने की प्रोसेस जारी रखेंगे. जैसे-जैसे हम इस सुविधा को बेहतर बनाते रहेंगे, हम यहां नए लेख पब्लिश करते रहेंगे.