इमर्सिव वेब का मतलब है, ब्राउज़र की मदद से होस्ट किए जाने वाले वर्चुअल वर्ल्ड के अनुभव. वर्चुअल रिएलिटी के ये सभी अनुभव, ब्राउज़र या वीआर की सुविधा वाले हेडसेट में दिखते हैं.
इमर्सिव वेब का मतलब है, ब्राउज़र के ज़रिए होस्ट किए जाने वाले वर्चुअल वर्ल्ड के अनुभव. इसमें, ब्राउज़र या वीआर की सुविधा वाले हेडसेट में दिखने वाले वर्चुअल रिएलिटी (वीआर) के सभी अनुभव शामिल हैं. जैसे, Google के Daydream, Oculus Rift, Samsung Gear VR, HTC Vive, और Windows Mixed Reality हेडसेट. साथ ही, एआर की सुविधा वाले मोबाइल डिवाइसों के लिए तैयार किए गए ऑगमेंटेड रिएलिटी (एआर) के अनुभव भी शामिल हैं.
हम बेहतरीन अनुभवों के बारे में बताने के लिए दो शब्दों का इस्तेमाल करते हैं. हालांकि, इन्हें पूरी तरह से असली से लेकर पूरी तरह से वीआर वाले माहौल तक के स्पेक्ट्रम के तौर पर देखा जाना चाहिए. इन दोनों के बीच, एआर के अलग-अलग लेवल होते हैं.
इमर्सिव अनुभवों के उदाहरणों में ये शामिल हैं:
- इमर्सिव 360° वीडियो
- इमर्सिव (अतिरिक्त जानकारी देने वाले) माहौल में दिखाए जाने वाले पारंपरिक 2D (या 3D) वीडियो
- डेटा विज़ुअलाइज़ेशन
- होम शॉपिंग
- कला
- ऐसा कोई मज़ेदार आइडिया जिसे अब तक किसी ने नहीं सोचा हो
मैं वहाँ कैसे पहुँच सकता हूँ?
इमर्सिव वेब, बीटा वर्शन में करीब एक साल से उपलब्ध है. ऐसा WebVR 1.1 एपीआई की मदद से किया गया था. यह एपीआई, Chrome 62 से ऑरिजिन ट्रायल के तौर पर उपलब्ध है. यह एपीआई, Firefox और Edge के साथ-साथ Safari के लिए polyfill पर भी काम करता है.
हालांकि, अब आगे बढ़ने का समय आ गया है.
ऑरिजिन ट्रायल 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 भी इमर्सिव वेब कम्यूनिटी ग्रुप का प्रॉडक्ट है. इस ग्रुप में Google, Microsoft, Mozilla वगैरह के लोग शामिल हैं. 'एक्सआर में X' का मतलब, ऐल्जेब्रिक वैरिएबल से है. यह इमर्सिव अनुभवों के स्पेक्ट्रम में किसी भी चीज़ के लिए इस्तेमाल किया जा सकता है. यह सुविधा, पहले बताए गए ओरिजिन ट्रायल के साथ-साथ, पॉलीफ़िल के ज़रिए भी उपलब्ध है.
जब यह लेख मूल रूप से Chrome 67 के बीटा वर्शन के दौरान पब्लिश किया गया था, तब सिर्फ़ वर्चुअल रिएलिटी (वीआर) की सुविधाएं चालू थीं. ऑगमेंटेड रिएलिटी (एआर) की सुविधा, Chrome 69 में उपलब्ध हुई थी. इसके बारे में वेब के लिए ऑगमेंटेड रिएलिटी में पढ़ें.
इस नए एपीआई के बारे में इस तरह के लेख में ज़्यादा नहीं बताया जा सकता. हम आपको WebXR के सैंपल को समझने के लिए ज़रूरी जानकारी देना चाहते हैं. ज़्यादा जानकारी के लिए, ओरिजनल एक्सप्लेनर और इमर्सिव वेब के शुरुआती उपयोगकर्ताओं के लिए बनी हमारी गाइड पढ़ें. ऑरिजिन ट्रायल के दौरान, हम इस सूची को और भी बड़ा करेंगे. समस्याएं खोलें या पुश अनुरोध सबमिट करें.
इस लेख में, हम XR सेशन को शुरू करने, बंद करने, और चलाने के बारे में बात करेंगे. साथ ही, इनपुट को प्रोसेस करने के बारे में कुछ बुनियादी बातें भी बताएंगे.
हम स्क्रीन पर एआर/वीआर कॉन्टेंट बनाने का तरीका नहीं बताएंगे. WebXR Device API, इमेज रेंडर करने की सुविधाएं नहीं देता. यह आप पर निर्भर है. ड्रॉइंग, WebGL API का इस्तेमाल करके की जाती है. अगर आपका मकसद ज़्यादा से ज़्यादा कमाई करना है, तो ऐसा किया जा सकता है. हालांकि, हमारा सुझाव है कि आप किसी फ़्रेमवर्क का इस्तेमाल करें. इमर्सिव वेब सैंपल में, सिर्फ़ डेमो के लिए बनाए गए Cottontail का इस्तेमाल किया जाता है. Three.js, मई से WebXR के साथ काम करता है. मुझे A-Frame के बारे में कुछ नहीं पता.
ऐप्लिकेशन को शुरू और चलाना
बुनियादी प्रोसेस यह है:
- एक्सआर डिवाइस का अनुरोध करें.
- अगर यह उपलब्ध है, तो XR सेशन का अनुरोध करें. अगर आपको उपयोगकर्ता को हेडसेट में अपना फ़ोन डालने के लिए कहना है, तो इसे इमर्सिव सेशन कहा जाता है. इसमें उपयोगकर्ता को कोई जेस्चर करना होता है.
- सेशन का इस्तेमाल करके, रेंडर लूप चलाएं. इससे हर सेकंड 60 इमेज फ़्रेम मिलते हैं. हर फ़्रेम में स्क्रीन पर सही कॉन्टेंट बनाएं.
- जब तक उपयोगकर्ता बाहर नहीं निकलता, तब तक रेंडर लूप चलाएं.
- 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);
}
इंटरैक्शन कैसे काम करता है?
ऐप्लिकेशन के लाइफ़टाइम की तरह ही, हम आपको AR या VR में ऑब्जेक्ट के साथ इंटरैक्ट करने का तरीका बताएंगे.
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 में Canary में) में उपलब्ध होगी. हालांकि, हमारा सुझाव है कि आप अब तक उपलब्ध सुविधाओं को आज़माएं. इसे बेहतर बनाने के लिए, हमें आपके सुझाव, राय या शिकायत की ज़रूरत है. WebXR हिट टेस्ट के लिए, ChromeStatus.com पर जाकर इसकी प्रोग्रेस देखें. WebXR ऐंकर का इस्तेमाल करके भी पोज़ ट्रैकिंग को बेहतर बनाया जा सकता है.