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

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

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

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

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

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

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

• Chacmool
• Immersive Web सैंपल
• 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() को कॉल किया जा सकता है.

नतीजा

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

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