इमर्सिव वेब में आपका स्वागत है

इमर्सिव वेब का मतलब है, ब्राउज़र के ज़रिए होस्ट किए जाने वाले वर्चुअल वर्ल्ड के अनुभव. वर्चुअल रिएलिटी के ये सभी अनुभव, ब्राउज़र या वीआर की सुविधा वाले हेडसेट में दिखते हैं.

Joe Medley

इमर्सिव वेब का मतलब है, ब्राउज़र के ज़रिए होस्ट किए जाने वाले वर्चुअल वर्ल्ड के अनुभव. इसमें ब्राउज़र या वीआर की सुविधा वाले हेडसेट में दिखाए जाने वाले वर्चुअल रिएलिटी (वीआर) के अनुभव के बारे में बताया गया है. जैसे, Google के Daydream, Oculus Rift, Samsung Gear VR, HTC Vive, और WindowsMed रिएलिटी हेडसेट. साथ ही, एआर (ऑगमेंटेड रिएलिटी) की सुविधा वाले मोबाइल डिवाइसों के लिए डेवलप की गई ऑगमेंटेड रिएलिटी (एआर) की सुविधा का अनुभव.

हम बेहतरीन अनुभवों के बारे में बताने के लिए दो शब्दों का इस्तेमाल करते हैं. हालांकि, इन्हें पूरी तरह से असली से लेकर पूरी तरह से वीआर वाले माहौल तक के स्पेक्ट्रम के तौर पर देखा जाना चाहिए. इन दोनों के बीच, एआर के अलग-अलग लेवल होते हैं.

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

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

मैं वहाँ कैसे पहुँच सकता हूँ?

इमर्सिव वेब करीब एक साल से भ्रूण के रूप में उपलब्ध है. ऐसा WebVR 1.1 एपीआई की मदद से किया गया था. यह एपीआई, 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 क्या है?

पहले से ही WebXR के बारे में दिए गए निर्देशों की तरह ही, WebXR Device API भी Immersive Web Community Group का प्रॉडक्ट है. इसमें Google, Microsoft, Mozilla, और अन्य लोगों ने योगदान दिया है. 'एक्सआर में X' का मतलब, ऐल्जेब्रिक वैरिएबल से है. यह इमर्सिव अनुभवों के स्पेक्ट्रम में किसी भी चीज़ के लिए इस्तेमाल किया जा सकता है. यह सुविधा, पहले बताए गए ओरिजिन ट्रायल के साथ-साथ, पॉलीफ़िल के ज़रिए भी उपलब्ध है.

जब यह लेख मूल रूप से Chrome 67 के बीटा वर्शन के दौरान पब्लिश किया गया था, तब सिर्फ़ वर्चुअल रिएलिटी (वीआर) की सुविधाएं चालू थीं. ऑगमेंटेड रिएलिटी (एआर) की सुविधा, Chrome 69 में उपलब्ध हुई थी. इसके बारे में वेब के लिए ऑगमेंटेड रिएलिटी में पढ़ें.

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

इस लेख में, हम XR सेशन को शुरू करने, बंद करने, और चलाने के बारे में बात करेंगे. साथ ही, इनपुट को प्रोसेस करने के बारे में कुछ बुनियादी बातें भी बताएंगे.

हम स्क्रीन पर एआर/वीआर कॉन्टेंट बनाने का तरीका नहीं बताएंगे. WebXR Device API, इमेज रेंडर करने की सुविधाएं नहीं देता. यह आप पर निर्भर है. ड्रॉइंग, WebGL API का इस्तेमाल करके की जाती है. अगर आपका मकसद ज़्यादा से ज़्यादा कमाई करना है, तो ऐसा किया जा सकता है. हमारा सुझाव है कि आप फ़्रेमवर्क का इस्तेमाल करें. इमर्सिव वेब सैंपल में, सिर्फ़ डेमो के लिए बनाए गए Cottontail का इस्तेमाल किया जाता है. Three.js, मई से WebXR के साथ काम करता है. मैंने A-Frame के बारे में कुछ नहीं सुना है.

ऐप्लिकेशन को शुरू और चलाना

मूल प्रक्रिया यह है:

1. एक्सआर डिवाइस का अनुरोध करें.
2. अगर यह उपलब्ध है, तो XR सेशन का अनुरोध करें. अगर आपको उपयोगकर्ता को हेडसेट में अपना फ़ोन डालने के लिए कहना है, तो इसे इमर्सिव सेशन कहा जाता है. इसमें उपयोगकर्ता को कोई जेस्चर करना होता है.
3. सेशन का इस्तेमाल करके, रेंडर लूप चलाएं. इससे हर सेकंड 60 इमेज फ़्रेम मिलते हैं. हर फ़्रेम में स्क्रीन पर सही कॉन्टेंट बनाएं.
4. जब तक उपयोगकर्ता बाहर नहीं निकलता, तब तक रेंडर लूप चलाएं.
5. 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
})

रेंडर लूप चलाना

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

रेंडर लूप की बुनियादी प्रोसेस इस तरह की होती है:

1. ऐनिमेशन फ़्रेम का अनुरोध करें.
2. डिवाइस की जगह की जानकारी के लिए क्वेरी.
3. कॉन्टेंट को डिवाइस की पोज़िशन के हिसाब से खींचें.
4. इनपुट डिवाइसों के लिए ज़रूरी काम करें.
5. जब तक उपयोगकर्ता इसे बंद नहीं करता, तब तक हर सेकंड में 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 में कभी-कभी कैनरी) में उपलब्ध होगी. हालांकि, हमारा सुझाव है कि आप अब तक उपलब्ध सुविधाओं को आज़माएं. इसे बेहतर बनाने के लिए, हमें आपके सुझाव, राय या शिकायत की ज़रूरत है. WebXR हिट टेस्ट के लिए, ChromeStatus.com पर जाकर इसकी प्रोग्रेस देखें. WebXR ऐंकर का इस्तेमाल करके भी पोज़ ट्रैकिंग को बेहतर बनाया जा सकता है.