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

जो मेडले
जो मेडली

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

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

इस एपीआई को आने वाले समय के लिए कैनरी में रखने के लिए बनाया गया है. हम एक लंबी टेस्टिंग अवधि चाहते हैं, क्योंकि यह एपीआई का एक नया प्रस्ताव है. साथ ही, हम पक्का करना चाहते हैं कि यह डेवलपर के लिए कारगर और सही हो.

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

इनके साथ, डेमो के बारे में ज़्यादा जानें या हमारा कोडलैब आज़माएं.

यह बस वेब है

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

एआर 30 फ़्रेम प्रति सेकंड पर चलता है

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

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

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

कोड पर जाने के लिए

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

एआर (ऑगमेंटेड रिएलिटी) सेशन में जाने और रेंडर लूप को चलाने की बुनियादी बातें, एआर (ऑगमेंटेड रिएलिटी) के लिए भी एक जैसी हैं. अगर आप इस बारे में नहीं जानते, तो मेरा पिछला लेख पढ़ें. खास तौर पर कहें, तो एआर सेशन में शामिल होना और चलाना, बिलकुल वीआर मैजिक विंडो सेशन में जाने जैसा लगता है. मैजिक विंडो की तरह ही, सेशन टाइप में ज़्यादा जानकारी नहीं होनी चाहिए. साथ ही, रेफ़रंस टाइप का फ़्रेम '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.
  }
}

सेशन और पोज़ देने के बाद, तय करें कि किरण कहां कास्ट कर रही है. सैंपल कोड, ग्लि-मैट्रिक्स मैथ लाइब्रेरी का इस्तेमाल करता है. हालांकि, ग्ल-मैट्रिक्स की ज़रूरत नहीं है. अहम बात यह जानना है कि आप इससे क्या कैलकुलेट कर रहे हैं और यह आपके डिवाइस की स्थिति से तय होगा. 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() को चुनिंदा इवेंट में कॉल करें, जैसा कि सैंपल में दिखाया गया है.

नतीजा

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

हमने इमर्सिव वेब एपीआई बनाने का काम पूरा नहीं किया है, न कि लंबे शॉट से. जैसे-जैसे इस विषय में बदलाव आएगा, हम नए लेख यहां पब्लिश करेंगे.