वर्चुअल रिएलिटी अब वेब पर उपलब्ध

शानदार अनुभव के लिए तैयार करने के लिए कुछ बुनियादी बातें: वर्चुअल रिएलिटी, ऑगमेंटेड रिएलिटी (एआर), और इनके बीच की अन्य चीज़ें.

Joe Medley
Joe Medley

Chrome 79 में, वेब पर बेहतर अनुभव देने की सुविधाएं लॉन्च की गईं. WebXR Device API की मदद से वर्चुअल रिएलिटी का अनुभव मिलता है. वहीं, Chrome 81 में ऑगमेंटेड रिएलिटी की सुविधा उपलब्ध है. वहीं, GamePad API के अपडेट से, कंट्रोल के बेहतर इस्तेमाल को VR में भी इस्तेमाल किया जा सकता है. अन्य ब्राउज़र जल्द ही इन स्पेसिफ़िकेशन के साथ काम करेंगे. इनमें Firefox Reality, Oculus Browser, Edge, और Magic Leap का Helio ब्राउज़र वगैरह शामिल हैं.

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

इमर्सिव वेब क्या है?

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

पूरी हकीकत से लेकर पूरी तरह इमर्सिव (पूरी तरह से इमर्सिव) अनुभव तक के विज़ुअल अनुभवों के स्पेक्ट्रम को दिखाने वाला ग्राफ़.
इमर्सिव अनुभवों का स्पेक्ट्रम

इमर्सिव अनुभवों के उदाहरणों में ये शामिल हैं:

  • गेम
  • 360-डिग्री वाले वीडियो
  • इमर्सिव विज़ुअल के साथ दिखाए जाने वाले पारंपरिक 2D (या 3D) वीडियो
  • घर खरीदना
  • प्रॉडक्ट खरीदने से पहले, उन्हें अपने घर में देखना
  • इमर्सिव आर्ट
  • ऐसा कोई मज़ेदार आइडिया जिसे अब तक किसी ने नहीं सोचा हो

कॉन्सेप्ट और इस्तेमाल

हम आपको WebXR Device API इस्तेमाल करने के बारे में कुछ बुनियादी बातें बता रहे हैं. अगर आपको इस बारे में ज़्यादा जानकारी चाहिए, तो इमर्सिव वेब वर्किंग ग्रुप के WebXR के सैंपल या MDN के बढ़ते रेफ़रंस मैटीरियल देखें. अगर आपको WebXR Device API के शुरुआती वर्शन के बारे में पता है, तो आपको इस पूरी जानकारी को एक नज़र में देखना चाहिए. बदलाव किए गए हैं.

इस लेख में दिया गया कोड, इमर्सिव वेब वर्किंग ग्रुप के बेरबोन्स सैंपल (डेमो, सोर्स) पर आधारित है. हालांकि, इसे आसानी से समझने के लिए इसमें बदलाव किया गया है.

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

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

XR सेशन में जाने के लिए, उपयोगकर्ता के जेस्चर की ज़रूरत होती है. ऐसा करने के लिए, XRSystem (navigator.xr के ज़रिए) की जांच करने के लिए, सुविधा का पता लगाने की सुविधा का इस्तेमाल करें और XRSystem.isSessionSupported() को कॉल करें. ध्यान रखें कि Chrome के 79 और 80 वर्शन में, XRSystem ऑब्जेक्ट को XR कहा गया था.

नीचे दिए गए उदाहरण में, मैंने बताया है कि मुझे 'immersive-vr' सेशन टाइप वाला वर्चुअल रिएलिटी सेशन चाहिए. अन्य टाइप के सेशन के लिए, 'immersive-ar' और 'inline' का इस्तेमाल किया जाता है. इनलाइन सेशन, एचटीएमएल में कॉन्टेंट दिखाने के लिए होता है. इसका इस्तेमाल मुख्य रूप से टीज़र कॉन्टेंट के लिए किया जाता है. इमर्सिव एआर सेशन के सैंपल में इसका उदाहरण दिया गया है. मैं इस बारे में बाद के लेख में बताऊंगा.

जब मुझे पता चलता है कि वर्चुअल रिएलिटी सेशन काम करते हैं, तो मैं एक बटन चालू करता/करती हूं. इससे मुझे उपयोगकर्ता के जेस्चर का डेटा मिलता है.

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

बटन चालू करने के बाद, मैं क्लिक इवेंट का इंतज़ार करता/करती हूं. इसके बाद, सेशन का अनुरोध करता/करती हूं.

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

इस कोड में ऑब्जेक्ट के क्रम पर ध्यान दें. यह navigator से xr पर, फिर XRSession इंस्टेंस पर जाता है. एपीआई के शुरुआती वर्शन में, किसी स्क्रिप्ट को सेशन का अनुरोध करने से पहले डिवाइस का अनुरोध करना पड़ता था. अब, डिवाइस अपने-आप ऐक्सेस हो जाता है.

कोई सेशन डालना

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

मुझे अपना सीन बनाने के लिए, <canvas> एलिमेंट की भी ज़रूरत होगी. यह WebGLRenderingContext या WebGL2RenderingContext होना चाहिए, जो XR के साथ काम करता हो. सभी ड्रॉइंग, इनका इस्तेमाल करके या Three.js जैसे WebGL-आधारित फ़्रेमवर्क का इस्तेमाल करके की जाती हैं.

अब मेरे पास ड्रॉ करने की जगह है, लेकिन मुझे उस पर ड्रॉ करने के लिए कॉन्टेंट का सोर्स चाहिए. इसके लिए, मैं XRWebGLLayer का एक इंस्टेंस बनाता हूं. मैंने XRSession.updateRenderState() को कॉल करके इसे कैनवस से जोड़ा है.

सेशन के दौरान, मुझे यह पता लगाने का तरीका खोजना होगा कि वर्चुअल रीयलिटी में चीज़ें कहां दिखती हैं. मुझे रेफ़रंस के लिए जगह चाहिए. 'local-floor' रेफ़रंस स्पेस वह होता है जहां ऑरिजिन, दर्शक के पास होता है और फ़्लोर लेवल पर y-ऐक्सिस 0 होता है. साथ ही, इसकी उम्मीद नहीं की जाती कि यह आगे-पीछे हो. अन्य तरह के रेफ़रंस स्पेस भी हैं. हालांकि, यह एक मुश्किल विषय है, जिसके बारे में मुझे यहां नहीं बताया जा सकता. मैं रेफ़रंस स्पेस को वैरिएबल में सेव करता/करती हूं, क्योंकि स्क्रीन पर ड्रॉ करते समय मुझे इसकी ज़रूरत पड़ेगी.

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

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

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

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

रेफ़रंस स्पेस मिलने के बाद, मैं XRSession.requestAnimationFrame() को कॉल करता/करती हूं. यह वर्चुअल कॉन्टेंट को प्रज़ेंट करने की शुरुआत है, जिसे फ़्रेम लूप में किया जाता है.

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

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

फ़्रेम लूप की बुनियादी प्रोसेस इस तरह है:

  1. XRSession.requestAnimationFrame() पर कॉल करें. इसके जवाब में, उपयोगकर्ता एजेंट उस XRFrameRequestCallback को लागू करता है जिसे आपने तय किया है.
  2. अपने कॉलबैक फ़ंक्शन के अंदर:
    1. XRSession.requestAnimationFrame() को फिर से कॉल करें.
    2. दर्शक का पोज़ चुनें.
    3. XRWebGLLayer से WebGLRenderingContext में WebGLFramebuffer को पास ('बाइंड') करें.
    4. हर XRView ऑब्जेक्ट पर दोहराना, XRWebGLLayer से उसकी XRViewport को हासिल करना और उसे WebGLRenderingContext पर भेजना.
    5. फ़्रेमबफ़र में कुछ बनाएं.

इस लेख के बाकी हिस्से में, पहले चरण और दूसरे चरण के कुछ हिस्से के बारे में बताया गया है. इसमें XRFrameRequestCallback को सेट अप करने और उसे कॉल करने के बारे में बताया गया है. चरण 2 के शेष आइटम पार्ट II में शामिल किए गए हैं.

XRFrameRequestCallback

XRFrameRequestCallback की वैल्यू, आपके हिसाब से तय की जाती है. इसमें दो पैरामीटर होते हैं: एक DOMHighResTimeStamp और एक XRFrame इंस्टेंस. XRFrame ऑब्जेक्ट, डिसप्ले पर एक फ़्रेम को रेंडर करने के लिए ज़रूरी जानकारी देता है. DOMHighResTimeStamp आर्ग्युमेंट, आने वाले समय में इस्तेमाल करने के लिए है.

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

function onXRFrame(hrTime, xrFrame) {
  let xrSession = xrFrame.session;
  xrSession.requestAnimationFrame(onXRFrame);
  // Render a frame.
}

अब दर्शकों के लिए कुछ ड्रॉ करने का समय आ गया है. यह तो दूसरे भाग की चर्चा है. वहां जाने से पहले, हम आपको सेशन खत्म करने का तरीका बताते हैं.

सेशन खत्म करें

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

सेशन में शामिल होना सेक्शन में बताया गया था कि सेटअप के दौरान, मैंने एक onend इवेंट हैंडलर जोड़ा था.

function onSessionStarted(xrSession) {
  xrSession.addEventListener('end', onSessionEnded);
  // More setup…
}

इवेंट हैंडलर में, उपयोगकर्ता के सेशन में शामिल होने से पहले ऐप्लिकेशन की स्थिति को वापस लाएं.

function onSessionEnded(event) {
  xrSession = null;
  xrButton.textContent = 'Enter VR';
}

नतीजा

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

Unsplash पर JESHOOTS.COM की फ़ोटो