इस पेज का अनुवाद Cloud Translation API से किया गया है.

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

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

Joe Medley

Chrome 79 में अब वेब पर इमर्सिव अनुभव उपलब्ध है. WebXR Device API, वर्चुअल रिएलिटी में वर्चुअल रिएलिटी की सुविधा देता है. वहीं दूसरी ओर, Chrome 81 में ऑगमेंटेड रिएलिटी (एआर) की सुविधा उपलब्ध होने वाली है. Gamepad API के अपडेट से, कंट्रोल के बेहतर इस्तेमाल को वीआर में भी बढ़ाया जा सकता है. अन्य ब्राउज़र में, जल्द ही इस तरह की जानकारी उपलब्ध होगी. इनमें Firefox हर जगह, Oculus ब्राउज़र, Edge, और Magic Leap का Helio ब्राउज़र शामिल होगा.

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

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

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

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

इमर्सिव मोड के अनुभव के कुछ उदाहरण यहां दिए गए हैं:

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

सिद्धांत और इस्तेमाल

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

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

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

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

XR सेशन में साइन इन करने के लिए, उपयोगकर्ता के जेस्चर की ज़रूरत होती है. इसके लिए, सुविधा की पहचान करने की सुविधा का इस्तेमाल करके, navigator.xr की मदद से XRSystem की जांच करें और 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> एलिमेंट की भी ज़रूरत होगी. यह XR के साथ काम करने वाला होना चाहिए WebGLRenderingContext या WebGL2RenderingContext का होना चाहिए. सभी ड्रॉइंग उन्हें या WebGL पर आधारित फ़्रेमवर्क, जैसे कि Three.js का इस्तेमाल करके की जाती हैं.

अब जब मेरे पास ड्रॉइंग करने के लिए जगह है, तो उस पर ड्रॉइंग करने के लिए मुझे कॉन्टेंट के सोर्स की ज़रूरत होगी. इसके लिए, मैं 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 फ़्रेम प्रति सेकंड पर चलता है. आपके कोड को किसी खास फ़्रेम रेट को नहीं मानना चाहिए.

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

XRSession.requestAnimationFrame() पर कॉल करें. जवाब में, उपयोगकर्ता एजेंट आपके तय किए गए XRFrameRequestCallback को शुरू करता है.
आपके कॉलबैक फ़ंक्शन में:
1. XRSession.requestAnimationFrame() को फिर से कॉल करें.
2. दर्शक का पोज़ देखें.
3. WebGLFramebuffer को XRWebGLLayer से WebGLRenderingContext में पास ('बाइंड') करें.
4. हर XRView ऑब्जेक्ट पर दोहराएं, इसके XRViewport को XRWebGLLayer से वापस लाएं और 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 की फ़ोटो