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

वर्चुअल रिएलिटी, ऑगमेंटेड रिएलिटी, और इन दोनों के बीच की हर चीज़ के बारे में कुछ बुनियादी बातें.

Joe Medley
Joe Medley
GitHub

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 के बारे में बताया जाएगा. यह एआर सेशन में सतहों का पता लगाने का एक तरीका है. जब तक अलग से न बताया जाए, तब तक इस लेख और आने वाले लेखों में बताई गई हर बात, एआर और वीआर, दोनों पर समान रूप से लागू होती है.

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

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

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

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

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

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

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

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

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

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

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

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

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

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 के लिए AR, 30 फ़्रेम प्रति सेकंड पर काम करता है. आपके कोड में किसी खास फ़्रेम रेट का इस्तेमाल नहीं किया जाना चाहिए.

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

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

इस लेख के बाकी हिस्से में, पहले चरण और दूसरे चरण के कुछ हिस्से के बारे में बताया गया है. इसमें XRFrameRequestCallback को सेट अप करने और कॉल करने के बारे में बताया गया है. दूसरे चरण के बाकी आइटम, भाग 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';
}

नतीजा

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