ऑगमेंटेड रिएलिटी (एआर): आपको शायद इसके बारे में पहले से पता है

अगर आपने WebXR Device API का पहले ही इस्तेमाल कर लिया है, तो आप इसका इस्तेमाल आसानी से कर सकते हैं.

Joe Medley
Joe Medley
GitHub

पिछली बार Chrome 79 में, WebXR Device API भेजा गया था. जैसा कि बताया गया है, Chrome में एपीआई को लागू करने का काम जारी है. Chrome को यह बताते हुए खुशी हो रही है कि कुछ काम पूरा हो गया है. Chrome 81 में दो नई सुविधाएं उपलब्ध हैं:

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

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

कोड समझने से पहले, आपको कम से कम एक बार इमर्सिव एआर सेशन सैंपल का इस्तेमाल करना चाहिए. आपको Chrome 81 या उसके बाद के वर्शन वाले आधुनिक Android फ़ोन की ज़रूरत होगी.

यह किसके लिए उपयोगी है?

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

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

मैं खुद से थोड़ा आगे बढ़ रही हूं. मैंने जो बताया है उसे असल में करने के लिए, आपको एआर (ऑगमेंटेड रिएलिटी) फ़ंक्शन और सरफ़ेस का पता लगाने के कुछ तरीकों की ज़रूरत होगी. इस लेख में पुरानी जानकारी के बारे में बताया गया है. ऊपर दिए गए WebXR हिट टेस्ट एपीआई पर दिए गए लेख में, बाद वाले लेख के बारे में बताया गया है.

सेशन का अनुरोध करना

किसी सेशन का अनुरोध करना काफ़ी हद तक पहले देखे गए तरीके जैसा ही है. सबसे पहले xr.isSessionSupported() पर कॉल करके यह पता करें कि आपको जो सेशन टाइप चाहिए वह मौजूदा डिवाइस पर उपलब्ध है या नहीं. पहले की तरह 'immersive-vr' का अनुरोध करने के बजाय, 'immersive-ar' का अनुरोध करें.

if (navigator.xr) {
  const supported = await navigator.xr.isSessionSupported('immersive-ar');
  if (supported) {
    xrButton.addEventListener('click', onButtonClicked);
    xrButton.textContent = 'Enter AR';
    xrButton.enabled = supported; // supported is Boolean
  }
}

पहले की तरह ही, इससे 'AR डालें' बटन चालू हो जाता है. जब उपयोगकर्ता उस बटन पर क्लिक करता है, तो xr.requestSession() पर कॉल करें और 'immersive-ar' भी पास करें.

let xrSession = null;
function onButtonClicked() {
  if (!xrSession) {
    navigator.xr.requestSession('immersive-ar')
    .then((session) => {
      xrSession = session;
      xrSession.isImmersive = true;
      xrButton.textContent = 'Exit AR';
      onSessionStarted(xrSession);
    });
  } else {
    xrSession.end();
  }
}

सुविधाजनक प्रॉपर्टी

आपने शायद ध्यान दिया होगा कि मैंने पिछले कोड सैंपल में दो लाइनों को हाइलाइट किया था. ऐसा लगता है कि XRSession ऑब्जेक्ट में, isImmersive नाम की प्रॉपर्टी है. यह एक सुविधा प्रॉपर्टी है, जिसे मैंने खुद बनाया है. यह इस खास जानकारी का हिस्सा नहीं है. मैं इसका इस्तेमाल बाद में यह तय करने के लिए करूंगी कि दर्शक को क्या दिखाना है. यह प्रॉपर्टी, एपीआई का हिस्सा क्यों नहीं है? क्योंकि आपके ऐप्लिकेशन को इस प्रॉपर्टी को अलग तरह से ट्रैक करना पड़ सकता है इसलिए, विशेषज्ञों ने एपीआई को साफ़-सुथरा रखने का फ़ैसला किया.

सत्र में प्रवेश करना

याद करें कि मेरे पिछले लेख में, onSessionStarted() कैसे दिखते थे:

function onSessionStarted(xrSession) {
  xrSession.addEventListener('end', onSessionEnded);

  let canvas = document.createElement('canvas');
  gl = canvas.getContext('webgl', { xrCompatible: true });

  xrSession.updateRenderState({
    baseLayer: new XRWebGLLayer(session, gl)
  });

  xrSession.requestReferenceSpace('local-floor')
  .then((refSpace) => {
    xrRefSpace = refSpace;
    xrSession.requestAnimationFrame(onXRFrame);
  });
}

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

function onSessionStarted(xrSession) {
  xrSession.addEventListener('end', onSessionEnded);

  if (session.isImmersive) {
    removeBackground();
  }

  let canvas = document.createElement('canvas');
  gl = canvas.getContext('webgl', { xrCompatible: true });

  xrSession.updateRenderState({
    baseLayer: new XRWebGLLayer(session, gl)
  });

  refSpaceType = xrSession.isImmersive ? 'local' : 'viewer';
  xrSession.requestReferenceSpace(refSpaceType).then((refSpace) => {
    xrSession.requestAnimationFrame(onXRFrame);
  });

}

रेफ़रंस स्पेस

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

रेफ़रंस स्पेस से, वर्चुअल दुनिया और उपयोगकर्ता के असल माहौल के बीच संबंध के बारे में पता चलता है. यह इस तरह से काम करता है:

  • वर्चुअल दुनिया में पोज़िशन दिखाने के लिए इस्तेमाल किए जाने वाले निर्देशांक सिस्टम का ऑरिजिन तय करना.
  • यह तय करना कि उपयोगकर्ता को उस निर्देशांक सिस्टम में आगे बढ़ने की उम्मीद है या नहीं.
  • क्या उस निर्देशांक सिस्टम में पहले से ही सीमाएं तय हैं. (यहां दिखाए गए उदाहरणों में, पहले से तय सीमाओं वाली निर्देशांक प्रणालियों का इस्तेमाल नहीं किया गया है.)

सभी रेफ़रंस स्पेस के लिए, X निर्देशांक को बाएं और दाएं, Y को ऊपर और नीचे, और Z को आगे और पीछे की ओर दिखाया जाता है. पॉज़िटिव वैल्यू, दाएं, ऊपर, और पीछे की ओर होती हैं.

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

let refSpaceType
function onSessionStarted(xrSession) {
  xrSession.addEventListener('end', onSessionEnded);

  if (session.isImmersive) {
    removeBackground();
  }

  let canvas = document.createElement('canvas');
  gl = canvas.getContext('webgl', { xrCompatible: true });

  xrSession.updateRenderState({
    baseLayer: new XRWebGLLayer(session, gl)
  });

  refSpaceType = xrSession.isImmersive ? 'local' : 'viewer';
  xrSession.requestReferenceSpace(refSpaceType).then((refSpace) => {
    xrSession.requestAnimationFrame(onXRFrame);
  });
}

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

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

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

फ़्रेम लूप चलाना

एक सैद्धांतिक तौर पर, मैंने अपने पिछले लेखों में बताए गए वीआर सेशन में जो कुछ भी किया था, उससे कुछ भी नहीं बदलता. रेफ़रंस स्पेस टाइप को XRFrame.getViewerPose() के पास करें. लौटाया गया XRViewerPose, मौजूदा रेफ़रंस स्पेस टाइप के लिए होगा. viewer को डिफ़ॉल्ट के तौर पर इस्तेमाल करने से, एआर (ऑगमेंटेड रिएलिटी) या वीआर के लिए उपयोगकर्ता की सहमति का अनुरोध करने से पहले, पेज कॉन्टेंट की झलक दिखा सकता है. इससे एक अहम जानकारी मिलती है: इनलाइन कॉन्टेंट में इमर्सिव कॉन्टेंट वाले फ़्रेम लूप का ही इस्तेमाल किया जाता है. इससे, कोड की वह ज़रूरत कम हो जाती है जिसकी ज़रूरत है.

function onXRFrame(hrTime, xrFrame) {
  let xrSession = xrFrame.session;
  xrSession.requestAnimationFrame(onXRFrame);
  let xrViewerPose = xrFrame.getViewerPose(refSpaceType);
  if (xrViewerPose) {
    // Render based on the pose.
  }
}

नतीजा

लेखों की इस सीरीज़ में सिर्फ़ उन बुनियादी चीज़ों के बारे में बताया गया है जो वेब पर इमर्सिव कॉन्टेंट लागू करने से जुड़ी हैं. कई और क्षमताओं और इस्तेमाल के उदाहरणों को इमर्सिव वेब वर्किंग ग्रुप के WebXR Device API के सैंपल में पेश किया गया है. हमने अभी-अभी एक हिट टेस्ट लेख भी पब्लिश किया है. इसमें, सरफ़ेस का पता लगाने और वर्चुअल आइटम को असल कैमरे के व्यू में रखने वाले एपीआई के बारे में बताया गया है. आने वाले साल में और भी लेखों के लिए, Web.dev ब्लॉग देखें.

Unsplash पर डेविड ग्रैंडमोजिन की फ़ोटो