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

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

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

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 की फ़ोटो