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

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

Joe Medley
Joe Medley

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

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

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

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

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

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

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

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

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

सेशन का अनुरोध करने का तरीका, पहले जैसा ही है. सबसे पहले, 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
  }
}

पहले की तरह, इससे 'एआर में जाएं' बटन चालू हो जाता है. जब उपयोगकर्ता उस पर क्लिक करता है, तो 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() से मिले निर्देशांक, अनुरोध किए गए रेफ़रंस स्पेस टाइप पर निर्भर करते हैं. फ़्रेम लूप के बारे में ज़्यादा जानकारी, आगे दी गई है. फ़िलहाल, हमें ऑगमेंटेड रिएलिटी के लिए सही रेफ़रंस टाइप चुनना होगा. इसमें भी, my convenience प्रॉपर्टी का इस्तेमाल किया गया है.

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 डिवाइस एपीआई के सैंपल में, कई और सुविधाओं और इस्तेमाल के उदाहरणों के बारे में बताया गया है. हमने हाल ही में एक हिट टेस्ट लेख भी पब्लिश किया है. इसमें, सतहों का पता लगाने और कैमरे के रीयल-वर्ल्ड व्यू में वर्चुअल आइटम डालने के लिए, एपीआई के बारे में बताया गया है. इन लेखों को पढ़ें और आने वाले साल में ज़्यादा लेखों के लिए, web.dev ब्लॉग देखें.

Unsplash पर David Grandmougin की ओर से अपलोड की गई फ़ोटो