इमर्सिव वेब का मतलब है, ब्राउज़र के ज़रिए होस्ट किए गए वर्चुअल दुनिया के अनुभव. वर्चुअल रिएलिटी का यह अनुभव, ब्राउज़र या वीआर की सुविधा वाले हेडसेट में दिखता है.
इमर्सिव वेब का मतलब है, ब्राउज़र से होस्ट किए गए वर्चुअल दुनिया के अनुभव. इसमें ब्राउज़र या वीआर की सुविधा वाले हेडसेट, जैसे कि Google's Daydream, Oculus Rift, Samsung गियर वीआर, HTC Vive, और Windows मिक्स रिएलिटी हेडसेट के साथ दिखने वाले वर्चुअल रिएलिटी (वीआर) के पूरे अनुभव के साथ-साथ एआर की सुविधा वाले मोबाइल डिवाइसों के लिए डेवलप किए गए ऑगमेंटेड रिएलिटी (एआर) अनुभव की जानकारी भी शामिल होती है.
हालांकि, शानदार अनुभवों के बारे में बताने के लिए हम दो शब्दों का इस्तेमाल करते हैं, फिर भी उन्हें पूरी हकीकत से लेकर पूरी तरह से इमर्सिव वीआर एनवायरमेंट तक के नज़रिए से देखा जाना चाहिए. इनके बीच में एआर के अलग-अलग लेवल होने चाहिए.
इमर्सिव मोड के अनुभव के कुछ उदाहरण यहां दिए गए हैं:
- इमर्सिव 360° वीडियो
- पारंपरिक 2D (या 3D) वीडियो को शानदार माहौल में दिखाया गया हो
- डेटा विज़ुअलाइज़ेशन
- घर से खरीदारी करने की सुविधा
- कला
- कुछ ऐसा शानदार जिसके बारे में अभी तक किसी ने सोचा भी नहीं है
मैं वहाँ कैसे पहुँच सकता हूँ?
इमर्सिव वेब करीब एक साल से, भ्रूण के रूप में उपलब्ध है. ऐसा WebVR 1.1 API की मदद से किया गया था. यह सुविधा Chrome 62 के बाद से, ऑरिजिन ट्रायल में उपलब्ध है. वह एपीआई Firefox और Edge पर भी काम करता है. साथ ही, Safari के लिए पॉलीफ़िल पर भी काम करता है.
लेकिन, अब आगे बढ़ने का समय है.
ऑरिजिन ट्रायल 24 जुलाई, 2018 को खत्म हो गया था. WebXR Device API और नए ऑरिजिन ट्रायल ने इस स्पेसिफ़िकेशन की जगह ले ली है.
WebVR 1.1 का क्या हुआ?
हमने WebVR 1.1 से बहुत कुछ सीखा है, लेकिन समय के साथ-साथ, यह साफ़ हो गया कि डेवलपर जिस तरह के ऐप्लिकेशन बनाना चाहते हैं, उसकी सहायता करने के लिए कुछ बड़े बदलाव करने की ज़रूरत थी. सीखे गए लेसन की पूरी सूची यहां दी जा सकती है. हालांकि, इसमें एपीआई के मुख्य JavaScript थ्रेड से जुड़े होने जैसी समस्याएं, डेवलपर के लिए गलत कॉन्फ़िगरेशन सेट अप करने के बहुत ज़्यादा मौके, और जान-बूझकर किए गए सुविधा के बजाय, मैजिक विंडो जैसे आम इस्तेमाल का खराब असर होना भी शामिल है. (मैजिक विंडो, हेडसेट के बिना इमर्सिव कॉन्टेंट देखने की एक तकनीक है. इसमें ऐप्लिकेशन, डिवाइस के ओरिएंटेशन सेंसर के आधार पर एक ही व्यू रेंडर करता है.)
नए डिज़ाइन से लागू करना आसान हो जाता है और परफ़ॉर्मेंस में बड़े सुधार किए जा सकते हैं. इसी दौरान, एआर (ऑगमेंटेड रिएलिटी) और इस्तेमाल के अन्य मामले सामने आने लगे थे. ऐसे में यह ज़रूरी हो गया था कि आने वाले समय में इस एपीआई का इस्तेमाल किया जा सके.
WebXR Device API को, इस्तेमाल के इन उदाहरणों को ध्यान में रखकर डिज़ाइन और नाम दिया गया है. यह एक बेहतर पाथ उपलब्ध कराता है. WebVR के लागू करने वाले टूल ने WebXR Device API पर माइग्रेट करने का वादा किया है.
WebXR Device API क्या है?
पहले WebVR स्पेसिफ़िकेशन की तरह, WebXR Device API, Immersive Web Community Group का प्रॉडक्ट है. इसमें Google, Microsoft, Mozilla, और अन्य प्लैटफ़ॉर्म के योगदान देने वाले लोग शामिल हैं. 'X में XR' का मकसद एक तरह के बीजीय वैरिएबल की तरह है, जिसका इस्तेमाल इमर्सिव एक्सपीरियंस के दायरे में होने वाली किसी भी चीज़ को बताने के लिए किया जाता है. यह पहले बताए गए ऑरिजिन ट्रायल में और polyfill की मदद से उपलब्ध है.
जब इस लेख को मूल रूप से Chrome 67 के बीटा वर्शन में पब्लिश किया गया था, तो सिर्फ़ वीआर की सुविधाएं चालू की गई थीं. ऑगमेंटेड रिएलिटी (एआर) की सुविधा Chrome 69 में उपलब्ध है. वेब के लिए ऑगमेंटेड रिएलिटी (एआर) में इसके बारे में पढ़ें.
इस नए एपीआई में अभी और सुविधाएं हैं, जिनके बारे में मैं इस तरह के लेख में नहीं बता सकता. मैं चाहता हूं कि आपको WebXR के सैंपल को समझने में मदद मिले. आपको ओरिजनल एक्सप्लेनर और इमर्सिव वेब शुरुआती एडॉप्टर गाइड, दोनों में ज़्यादा जानकारी मिल सकती है. जैसे-जैसे ऑरिजिन ट्रायल होगा मैं बाद वाले हिस्से को बड़ा कर रहा हूं. समस्याओं को बेझिझक पूछें या पुल अनुरोध सबमिट करें.
इस लेख में, एक XR सेशन को शुरू करने, बंद करने, और चलाने के बारे में बताया गया है. साथ ही, इनपुट को प्रोसेस करने के बारे में कुछ बुनियादी बातें बताई गई हैं.
मैं इस बारे में बात नहीं करूँगी कि स्क्रीन पर एआर/वीआर कॉन्टेंट कैसे बनाया जाए. WebXR Device API में इमेज रेंडरिंग की सुविधाएं नहीं मिलती हैं. यह आप पर निर्भर है. ड्रॉइंग, WebGL API का इस्तेमाल करके की जाती है. अगर आप बहुत महत्वाकांक्षी हैं, तो ऐसा किया जा सकता है. हालांकि, हम आपको फ़्रेमवर्क इस्तेमाल करने का सुझाव देते हैं. ध्यान खींचने वाले वेब सैंपल में, ऐसे सैंपल का इस्तेमाल किया जाता है जो सिर्फ़ डेमो के लिए बनाया गया है और जिसे कॉटनटेल कहा जाता है. मई से तीन.js ने WebXR का इस्तेमाल किया है. मैंने A-फ़्रेम के बारे में कुछ नहीं सुना है.
कोई ऐप्लिकेशन शुरू करना और चलाना
बुनियादी प्रक्रिया यह है:
- XR डिवाइस के लिए अनुरोध करें.
- अगर यह उपलब्ध है, तो XR सेशन का अनुरोध करें. अगर उपयोगकर्ता अपने फ़ोन को हेडसेट में रखना चाहते हैं, तो इसे इमर्सिव सेशन कहा जाता है. इसमें, उपयोगकर्ता के जेस्चर की ज़रूरत होती है.
- सेशन का इस्तेमाल करके ऐसा रेंडर लूप चलाएं जो हर सेकंड में 60 इमेज फ़्रेम देता हो. हर फ़्रेम में, स्क्रीन पर सही कॉन्टेंट बनाएं.
- रेंडर लूप को तब तक चलाएं, जब तक उपयोगकर्ता इसे बंद न कर दे.
- XR सेशन को खत्म करें.
आइए, थोड़ा और विस्तार से इसे देखते हैं और इसमें कुछ कोड शामिल करते हैं. मैं आपको जो दिखाने जा रही हूं, उससे कोई ऐप नहीं चला पाएगा. हालांकि, यह सिर्फ़ समझाने के लिए है.
XR डिवाइस के लिए अनुरोध करें
यहां, आपको मानक सुविधा पहचान कोड की पहचान होगी. इसे, checkForXR() जैसे किसी फ़ंक्शन में रैप किया जा सकता है.
अगर इमर्सिव सेशन का इस्तेमाल नहीं किया जा रहा है, तो इस सुविधा के विज्ञापन को स्किप किया जा सकता है और उपयोगकर्ता जेस्चर का इस्तेमाल नहीं किया जा सकता. इसके बाद, सीधे सेशन का अनुरोध करें. इमर्सिव सेशन ऐसा होता है जिसमें हेडसेट की ज़रूरत होती है. बिना इमर्सिव सेशन में डिवाइस की स्क्रीन पर सिर्फ़ कॉन्टेंट दिखता है. जब आप वर्चुअल रिएलिटी या ऑगमेंटेड रिएलिटी (एआर) की बात करते हैं, तो ज़्यादातर लोग इसी के बारे में सोचते हैं. इसे कभी-कभी 'जादू की खिड़की' कहा जाता है.
if (navigator.xr) {
navigator.xr.requestDevice()
.then(xrDevice => {
// Advertise the AR/VR functionality to get a user gesture.
})
.catch(err => {
if (err.name === 'NotFoundError') {
// No XRDevices available.
console.error('No XR devices available:', err);
} else {
// An error occurred while requesting an XRDevice.
console.error('Requesting XR device failed:', err);
}
})
} else{
console.log("This browser does not support the WebXR API.");
}
XR सेशन का अनुरोध करें
अब हमारे पास डिवाइस और उपयोगकर्ता जेस्चर के बारे में जानकारी है. इसलिए, सेशन तैयार करने का समय आ गया है. कोई सेशन बनाने के लिए, ब्राउज़र को कैनवस की ज़रूरत होती है, जिस पर ड्रॉ करना है.
xrPresentationContext = htmlCanvasElement.getContext('xrpresent');
let sessionOptions = {
// The immersive option is optional for non-immersive sessions; the value
// defaults to false.
immersive: false,
outputContext: xrPresentationContext
}
xrDevice.requestSession(sessionOptions)
.then(xrSession => {
// Use a WebGL context as a base layer.
xrSession.baseLayer = new XRWebGLLayer(session, gl);
// Start the render loop
})
रेंडर लूप चलाएं
इस चरण के लिए कोड को समझने में थोड़ी मुश्किल होती है. इसे सुलझाने के लिए, मैं आपको कुछ शब्द देने दूंगी. अगर आपको फ़ाइनल कोड पर एक नज़र डालना है, तो उसे फटाफट देखने के लिए आगे बढ़ें और फिर पूरी जानकारी पाने के लिए वापस आएं. ऐसा भी कुछ है जिसका अंदाज़ा शायद आप न लगा पाएं.
रेंडर लूप की बुनियादी प्रक्रिया इस तरह है:
- ऐनिमेशन फ़्रेम का अनुरोध करें.
- डिवाइस की स्थिति के बारे में क्वेरी करें.
- डिवाइस की जगह के आधार पर, कॉन्टेंट को उसकी पोज़िशन पर ले जाएं.
- इनपुट डिवाइस के लिए ज़रूरी काम करें.
- एक सेकंड में 60 बार दोहराएँ, जब तक उपयोगकर्ता बंद करने का फ़ैसला नहीं लेता.
प्रज़ेंटेशन फ़्रेम का अनुरोध करें
वेब एक्सआर के हिसाब से, 'फ़्रेम' शब्द के कई मतलब होते हैं. पहला, रेफ़रंस का फ़्रेम है. इससे यह पता चलता है कि निर्देशांक सिस्टम के शुरू होने की जगह का हिसाब कहां से लगाया गया है और डिवाइस के इधर-उधर जाने पर उस ऑरिजिन का क्या होता है. (क्या उपयोगकर्ता के हिलने-डुलने पर या बदलने पर भी व्यू वैसा ही रहता है, जैसा कि असल ज़िंदगी में होता है?)
दूसरे टाइप का फ़्रेम प्रज़ेंटेशन फ़्रेम है, जिसे XRFrame ऑब्जेक्ट से दिखाया जाता है. इस ऑब्जेक्ट में वह जानकारी होती है जो डिवाइस पर एआर/वीआर सीन का एक फ़्रेम रेंडर करने के लिए ज़रूरी है. यह थोड़ा भ्रम में डालने वाला होता है,
क्योंकि requestAnimationFrame() को कॉल करके प्रज़ेंटेशन फ़्रेम वापस पाया जाता है.
इससे यह window.requestAnimationFrame() के साथ काम करता है.
इससे पहले कि मैं आपको डाइजेस्ट के लिए और जानकारी दूँ, मैं आपको कुछ कोड दूँगा. नीचे दिए गए नमूने से पता चलता है कि रेंडर लूप कैसे शुरू होता है और उसे कैसे मैनेज करता है. वर्ड फ़्रेम के दोहरा उपयोग पर
ध्यान दें. साथ ही, requestAnimationFrame() को बार-बार किए जाने वाले कॉल का पता लगाएं. इस
फ़ंक्शन को एक सेकंड में 60 बार कॉल किया जाएगा.
xrSession.requestFrameOfReference('eye-level')
.then(xrFrameOfRef => {
xrSession.requestAnimationFrame(onFrame(time, xrFrame) {
// The time argument is for future use and not implemented at this time.
// Process the frame.
xrFrame.session.requestAnimationFrame(onFrame);
}
});
पोज़
स्क्रीन पर कुछ भी बनाने से पहले, आपको यह जानने की ज़रूरत होगी कि डिसप्ले डिवाइस कहां ले जा रहा है और आपको स्क्रीन का ऐक्सेस चाहिए. आम तौर पर, एआर/वीआर में किसी चीज़ की पोज़िशन और स्क्रीन की दिशा को पोज़ कहा जाता है. व्यूअर और इनपुट डिवाइस, दोनों का एक पोज़ होता है. (मैं बाद में इनपुट डिवाइस को कवर करता/करती हूं.) दर्शक और इनपुट डिवाइस के पोज़, दोनों को 4 x 4 मैट्रिक्स के तौर पर दिखाया जाता है. इन्हें कॉलम के खास क्रम में, Float32Array में स्टोर किया जाता है. मौजूदा ऐनिमेशन फ़्रेम ऑब्जेक्ट पर XRFrame.getDevicePose() को कॉल करने पर आपको दर्शक का पोज़ मिलता है.
हमेशा यह देखें कि आपको पोज़ वापस मिला है या नहीं. अगर कुछ गलत हो जाता है,
तो आपको स्क्रीन पर ड्रॉ नहीं करना होगा.
let pose = xrFrame.getDevicePose(xrFrameOfRef);
if (pose) {
// Draw something to the screen.
}
व्यू
पोज़ की जांच करने के बाद, कुछ बनाने का समय आ गया है. जिस ऑब्जेक्ट पर फ़ोकस किया जाता है उसे व्यू (XRView) कहा जाता है. यहां पर सेशन टाइप अहम हो जाता है. व्यू, XRFrame ऑब्जेक्ट से अरे के तौर पर फ़ेच किए जाते हैं. अगर आप किसी इमर्सिव सेशन में हैं, तो अरे में एक व्यू होता है. अगर आप किसी इमर्सिव सेशन में हैं, तो अरे में हर आंख के लिए दो, एक-एक होते हैं.
for (let view of xrFrame.views) {
// Draw something to the screen.
}
यह WebXR और अन्य इमर्सिव सिस्टम के बीच एक अहम फ़र्क़ है. हालांकि, एक व्यू से दोहराना बेकार लग सकता है, लेकिन ऐसा करने से आपको कई तरह के डिवाइसों के लिए, एक ही रेंडरिंग पाथ बनाने की सुविधा मिलती है.
पूरे रेंडर लूप
अगर मैं यह सब एक साथ रखूं, तो मुझे कोड नीचे मिलेगा. मैंने इनपुट डिवाइस के लिए एक प्लेसहोल्डर दिया है, जिसके बारे में मैं बाद के सेक्शन में बताऊंगी.
xrSession.requestFrameOfReference('eye-level')
.then(xrFrameOfRef => {
xrSession.requestAnimationFrame(onFrame(time, xrFrame) {
// The time argument is for future use and not implemented at this time.
let pose = xrFrame.getDevicePose(xrFrameOfRef);
if (pose) {
for (let view of xrFrame.views) {
// Draw something to the screen.
}
}
// Input device code will go here.
frame.session.requestAnimationFrame(onFrame);
}
}
XR सेशन को खत्म करें
XR सेशन कई वजहों से खत्म हो सकता है. इनमें, XRSession.end() पर कॉल करके आपके खुद के कोड से खत्म होना भी शामिल है. अन्य वजहों में, हेडसेट का
डिसकनेक्ट होना या किसी दूसरे ऐप्लिकेशन का कंट्रोल होना शामिल है. इसलिए, अच्छी तरह काम करने वाले ऐप्लिकेशन को आखिरी इवेंट को मॉनिटर करना चाहिए और इसके होने पर, सेशन और रेंडरर ऑब्जेक्ट को छोड़ देना चाहिए. खत्म होने के बाद, XR सेशन को फिर से शुरू नहीं किया जा सकता.
xrDevice.requestSession(sessionOptions)
.then(xrSession => {
// Create a WebGL layer and initialize the render loop.
xrSession.addEventListener('end', onSessionEnd);
});
// Restore the page to normal after immersive access has been released.
function onSessionEnd() {
xrSession = null;
// Ending the session stops executing callbacks passed to the XRSession's
// requestAnimationFrame(). To continue rendering, use the window's
// requestAnimationFrame() function.
window.requestAnimationFrame(onDrawFrame);
}
इंटरैक्शन कैसे काम करता है?
ऐप्लिकेशन के लाइफ़टाइम की ही तरह, मैं आपको एआर या वीआर में ऑब्जेक्ट के साथ इंटरैक्ट करने का तरीका बताऊंगी.
WebXR Device API, उपयोगकर्ता के इनपुट के लिए "पॉइंट और क्लिक" वाला तरीका अपनाता है. इस तरीके से,
हर इनपुट सोर्स में एक तय पॉइंटर रे होती है. इससे पता चलता है कि इनपुट डिवाइस कहां पॉइंट कर रहा है. साथ ही, इवेंट से पता चलता है कि कुछ चुना गया था.
आपका ऐप्लिकेशन, पॉइंटर रे दिखाता है और दिखाता है कि वह कहां दिख रही है. जब उपयोगकर्ता
इनपुट डिवाइस पर क्लिक करता है, तो इवेंट ट्रिगर होते हैं - खास तौर पर - select, selectStart, और
selectEnd. आपका ऐप्लिकेशन तय करता है कि किस पर क्लिक किया गया था और वह सही जवाब देता है.
इनपुट डिवाइस और पॉइंटर रे
उपयोगकर्ताओं के लिए, पॉइंटर रे, कंट्रोलर और जिस चीज़ की ओर इशारा कर रहा है उसके बीच बस एक हल्की सी लाइन होती है. लेकिन आपके ऐप्लिकेशन को उसे ड्रॉ करना होगा. इसका मतलब है कि इनपुट डिवाइस का पोज़ देना और उसकी जगह से एआर/वीआर स्पेस में मौजूद किसी ऑब्जेक्ट तक लाइन खींचना. वह प्रोसेस कुछ इस तरह दिखती है:
let inputSources = xrSession.getInputSources();
for (let xrInputSource of inputSources) {
let inputPose = frame.getInputPose(inputSource, xrFrameOfRef);
if (!inputPose) {
continue;
}
if (inputPose.gripMatrix) {
// Render a virtual version of the input device
// at the correct position and orientation.
}
if (inputPose.pointerMatrix) {
// Draw a ray from the gripMatrix to the pointerMatrix.
}
}
यह इमर्सिव वेब कम्यूनिटी ग्रुप के इनपुट ट्रैकिंग सैंपल का हटाया गया वर्शन है. फ़्रेम रेंडरिंग की तरह ही, पॉइंटर रे बनाना और डिवाइस आप पर निर्भर करता है. जैसा कि पहले बताया गया है, इस कोड को रेंडर लूप के हिस्से के तौर पर चलाना चाहिए.
वर्चुअल स्पेस में आइटम चुनना
एआर/वीआर में किसी चीज़ की ओर इशारा करना भी काफ़ी बेकार है. कुछ भी काम का करने के लिए,
उपयोगकर्ताओं के पास चीज़ें चुनने की सुविधा होनी चाहिए. WebXR Device API, उपयोगकर्ताओं के इंटरैक्शन का जवाब देने के लिए तीन इवेंट उपलब्ध कराता है: select, selectStart, और selectEnd. इनमें ऐसी अजीब गड़बड़ी है जिसकी मुझे उम्मीद नहीं थी: वे आपको सिर्फ़ इतना बताते हैं कि
एक इनपुट डिवाइस पर क्लिक किया गया था. इनसे आपको यह नहीं पता चलता कि आस-पास के किस आइटम पर क्लिक किया गया था. इवेंट हैंडलर XRSession ऑब्जेक्ट में जोड़े जाते हैं और उपलब्ध होते ही इन्हें जोड़ दिया जाना चाहिए.
xrDevice.requestSession(sessionOptions)
.then(xrSession => {
// Create a WebGL layer and initialize the render loop.
xrSession.addEventListener('selectstart', onSelectStart);
xrSession.addEventListener('selectend', onSelectEnd);
xrSession.addEventListener('select', onSelect);
});
अगर आपको ज़्यादा जानकारी चाहिए, तो यह कोड इनपुट के उदाहरण पर आधारित होता है.
यह पता करने के लिए कि क्या क्लिक किया गया था, आपको पोज़ का इस्तेमाल करना है. (क्या आप हैरान हैं? मैंने ऐसा नहीं सोचा था.) यह जानकारी आपके ऐप्लिकेशन या इस्तेमाल किए जा रहे फ़्रेमवर्क के हिसाब से होती है. इसलिए, यह लेख में शामिल नहीं है. Cottontail का तरीका, इनपुट सेलेक्शन के उदाहरण में है.
function onSelect(ev) {
let inputPose = ev.frame.getInputPose(ev.inputSource, xrFrameOfRef);
if (!inputPose) {
return;
}
if (inputPose.pointerMatrix) {
// Figure out what was clicked and respond.
}
}
निष्कर्ष: आगे की ओर देखना
जैसा कि मैंने पहले बताया, Chrome 69 (जून 2018 में कभी कैनरी) में ऑगमेंटेड रिएलिटी की सुविधा की उम्मीद है. फिर भी, मैं आपको बढ़ावा देता/देती हूं कि आप हमारे पास मौजूद विकल्पों को ज़रूर आज़माएं. इसे बेहतर बनाने के लिए हमें आपके सुझाव, शिकायत या राय की ज़रूरत है. WebXR हिट टेस्ट के लिए ChromeStatus.com देखकर इसकी प्रोग्रेस को फ़ॉलो करें. आप WebXR ऐंकर को भी फ़ॉलो कर सकते हैं, जिससे पोज़ ट्रैकिंग को बेहतर बनाया जा सकेगा.