अगर आपने WebXR Device API का पहले ही इस्तेमाल कर लिया है, तो आपने उस एपीआई को सबसे पहले इस्तेमाल कर लिया है.
WebXR Device API, पिछले साल की फ़ॉल सीज़न में Chrome 79 के साथ लॉन्च हुआ था. जैसा कि हमने बताया था कि Chrome में एपीआई को लागू करने का काम जारी है. Chrome को यह बताते हुए खुशी हो रही है कि कुछ काम पूरे हो चुके हैं. Chrome 81 में दो नई सुविधाएं जोड़ी गई हैं:
इस लेख में ऑगमेंटेड रिएलिटी (एआर) के बारे में बताया गया है. अगर आपने पहले से ही WebXR डिवाइस एपीआई का इस्तेमाल किया है, तो आपको यह जानकर खुशी होगी कि आपको बहुत कम नई चीज़ें सीखनी होंगी. WebXR सेशन में जाने का तरीका भी काफ़ी हद तक एक जैसा ही है. फ़्रेम लूप चलाना काफ़ी हद तक एक जैसा ही है. इनमें अंतर, कॉन्फ़िगरेशन में होता है. इनकी मदद से, ऑगमेंटेड रिएलिटी के लिए कॉन्टेंट को सही तरीके से दिखाया जा सकता है. अगर आपको WebXR के बुनियादी सिद्धांतों के बारे में नहीं पता है, तो आपको WebXR Device API पर मेरी पुरानी पोस्ट पढ़नी चाहिए या कम से कम उसमें शामिल विषयों के बारे में जानकारी होनी चाहिए. आपको सेशन का अनुरोध करने और सेशन में शामिल होने का तरीका पता होना चाहिए. साथ ही, आपको फ़्रेम लूप चलाने का तरीका भी पता होना चाहिए.
हिट टेस्टिंग के बारे में जानकारी के लिए, साथी लेख असल दुनिया के व्यू में वर्चुअल चीज़ों की जगह तय करना पढ़ें. इस लेख में दिया गया कोड, इमर्सिव वेब वर्किंग ग्रुप के WebXR डिवाइस एपीआई के सैंपल से मिले इमर्सिव एआर सेशन के सैंपल (डेमो सोर्स) पर आधारित है.
कोड में बदलाव करने से पहले, आपको इमर्सिव एआर सेशन के सैंपल का इस्तेमाल कम से कम एक बार करना चाहिए. आपके पास ऐसा आधुनिक Android फ़ोन होना चाहिए जिसमें Chrome 81 या इसके बाद का वर्शन हो.
यह किस काम का है?
कई मौजूदा या नए वेब पेजों के लिए, बेहतर असली अनुभव का इस्तेमाल करना बहुत फ़ायदेमंद होगा. इससे, ब्राउज़र से बाहर निकले बिना, एआर के इस्तेमाल के उदाहरण लागू किए जा सकेंगे. उदाहरण के लिए, इससे लोगों को शिक्षा से जुड़ी साइटों पर सीखने में मदद मिल सकती है. साथ ही, संभावित खरीदारों को खरीदारी करते समय अपने घर में ऑब्जेक्ट को विज़ुअलाइज़ करने में मदद मिल सकती है.
इस्तेमाल के दूसरे उदाहरण पर विचार करें. कल्पना करें कि एक सीन में किसी वर्चुअल ऑब्जेक्ट को उसके असली साइज़ में रखकर दिखाया गया हो. इमेज को चुनी गई जगह पर सेट करने के बाद, वह उसी जगह पर बनी रहती है. साथ ही, वह उसी साइज़ में दिखती है जिस साइज़ में वह असल में उस जगह पर दिखती. साथ ही, उपयोगकर्ता उस इमेज को इधर-उधर घुमाने के साथ-साथ, उससे ज़्यादा या कम दूरी पर भी जा सकता है. इससे दर्शकों को ऑब्जेक्ट के बारे में ज़्यादा जानकारी मिलती है, जो दो डाइमेंशन वाली इमेज से नहीं मिलती.
मैं थोड़ा आगे बढ़ रहा हूं. मैंने जो तरीका बताया है उसे इस्तेमाल करने के लिए, आपके पास एआर (ऑगमेंटेड रिएलिटी) की सुविधा और सतहों का पता लगाने के कुछ तरीके होने चाहिए. इस लेख में, पहले विकल्प के बारे में बताया गया है. WebXR हिट टेस्ट एपीआई (ऊपर लिंक किया गया) के बारे में लेख में, इस बारे में बताया गया है.
सेशन का अनुरोध करना
सेशन का अनुरोध करने का तरीका, पहले जैसा ही है. सबसे पहले, xr.isSessionSupported() को कॉल करके यह पता करें कि आपका मनचाहा सेशन टाइप मौजूदा डिवाइस पर उपलब्ध है या नहीं. पहले की तरह 'immersive-vr' का अनुरोध करने के बजाय,
'immersive-ar' का अनुरोध करें.
if (navigator.xr) {
const supported = await navigator.xr.isSessionSupported('immersive-ar');
if (supported) {
xrButton.addEventListener('click', onButtonClicked);
xrButton.textContent = 'Enter AR';
xrButton.enabled = supported; // supported is Boolean
}
}
इससे, पहले की तरह ही 'एआर में जाएं' बटन चालू हो जाता है. जब उपयोगकर्ता उस पर क्लिक करता है, तो xr.requestSession() को कॉल करें और 'immersive-ar' को भी पास करें.
let xrSession = null;
function onButtonClicked() {
if (!xrSession) {
navigator.xr.requestSession('immersive-ar')
.then((session) => {
xrSession = session;
xrSession.isImmersive = true;
xrButton.textContent = 'Exit AR';
onSessionStarted(xrSession);
});
} else {
xrSession.end();
}
}
सुविधा वाली प्रॉपर्टी
आपने शायद देखा होगा कि मैंने पिछले कोड सैंपल में दो लाइनें हाइलाइट की हैं.
ऐसा लगता है कि XRSession ऑब्जेक्ट में isImmersive नाम की प्रॉपर्टी है. यह एक ऐसी प्रॉपर्टी है जिसे मैंने खुद बनाया है. यह स्पेसिफ़िकेशन का हिस्सा नहीं है. इसका इस्तेमाल, दर्शकों को क्या दिखाना है, यह तय करने के लिए किया जाएगा. यह प्रॉपर्टी, एपीआई का हिस्सा क्यों नहीं है? आपके ऐप्लिकेशन को इस प्रॉपर्टी को अलग तरीके से ट्रैक करने की ज़रूरत पड़ सकती है.
इसलिए, स्पेसिफ़िकेशन लेखकों ने एपीआई को साफ़ रखने का फ़ैसला किया है.
सत्र में प्रवेश किया जा रहा है
याद करें कि मेरे पिछले लेख में onSessionStarted() कैसा दिखता था:
function onSessionStarted(xrSession) {
xrSession.addEventListener('end', onSessionEnded);
let canvas = document.createElement('canvas');
gl = canvas.getContext('webgl', { xrCompatible: true });
xrSession.updateRenderState({
baseLayer: new XRWebGLLayer(session, gl)
});
xrSession.requestReferenceSpace('local-floor')
.then((refSpace) => {
xrRefSpace = refSpace;
xrSession.requestAnimationFrame(onXRFrame);
});
}
मुझे ऑगमेंटेड रिएलिटी (एआर) रेंडर करने के लिए, कुछ चीज़ें जोड़नी हैं. बैकग्राउंड बंद करें पहले मुझे यह तय करना है कि मुझे बैकग्राउंड की ज़रूरत है या नहीं. यह पहली जगह है जहां मैं अपनी सुविधा वाली प्रॉपर्टी का इस्तेमाल करने जा रहा हूं.
function onSessionStarted(xrSession) {
xrSession.addEventListener('end', onSessionEnded);
if (session.isImmersive) {
removeBackground();
}
let canvas = document.createElement('canvas');
gl = canvas.getContext('webgl', { xrCompatible: true });
xrSession.updateRenderState({
baseLayer: new XRWebGLLayer(session, gl)
});
refSpaceType = xrSession.isImmersive ? 'local' : 'viewer';
xrSession.requestReferenceSpace(refSpaceType).then((refSpace) => {
xrSession.requestAnimationFrame(onXRFrame);
});
}
रेफ़रंस स्पेस
मेरे पिछले लेखों में, रेफ़रंस स्पेस के बारे में कम जानकारी दी गई थी. जिस सैंपल के बारे में हम बता रहे हैं उसमें इनमें से दो एट्रिब्यूट का इस्तेमाल किया गया है. इसलिए, अब इस कमी को ठीक करने का समय आ गया है.
रेफ़रंस स्पेस, वर्चुअल वर्ल्ड और उपयोगकर्ता के भौतिक वातावरण के बीच के संबंध के बारे में बताता है. यह इन तरीकों से काम करता है:
- आभासी दुनिया में स्थितियों को बताने के लिए इस्तेमाल किए जाने वाले निर्देशांक सिस्टम का मूल तय करना.
- यह बताना कि उपयोगकर्ता को उस निर्देशांक प्रणाली में ही रहना है या नहीं.
- क्या उस निर्देशांक प्रणाली की सीमाएं पहले से तय हैं. (यहां दिए गए उदाहरणों में, पहले से तय की गई सीमाओं वाले निर्देशांक सिस्टम का इस्तेमाल नहीं किया गया है.)
सभी रेफ़रंस स्पेस के लिए, X निर्देशांक से बाईं और दाईं ओर की जानकारी मिलती है, Y निर्देशांक से ऊपर और नीचे की जानकारी मिलती है, और Z निर्देशांक से आगे और पीछे की जानकारी मिलती है. पॉज़िटिव वैल्यू, दाईं, ऊपर, और पीछे की ओर होती हैं.
XRFrame.getViewerPose() से मिले निर्देशांक, अनुरोध किए गए रेफ़रंस स्पेस टाइप पर निर्भर करते हैं.
फ़्रेम लूप के बारे में ज़्यादा जानकारी, आगे दी गई है. फ़िलहाल, हमें ऑगमेंटेड रिएलिटी के लिए सही रेफ़रंस टाइप चुनना होगा. इसमें भी, my
convenience प्रॉपर्टी का इस्तेमाल किया गया है.
let refSpaceType
function onSessionStarted(xrSession) {
xrSession.addEventListener('end', onSessionEnded);
if (session.isImmersive) {
removeBackground();
}
let canvas = document.createElement('canvas');
gl = canvas.getContext('webgl', { xrCompatible: true });
xrSession.updateRenderState({
baseLayer: new XRWebGLLayer(session, gl)
});
refSpaceType = xrSession.isImmersive ? 'local' : 'viewer';
xrSession.requestReferenceSpace(refSpaceType).then((refSpace) => {
xrSession.requestAnimationFrame(onXRFrame);
});
}
अगर आपने इमर्सिव एआर सेशन का सैंपल देख लिया है, तो आपको पता चलेगा कि शुरुआत में सीन स्टैटिक होता है और एआर का इस्तेमाल नहीं किया जाता. सीन पर इधर-उधर जाने के लिए, उसे अपनी उंगली से खींचकर छोड़ा जा सकता है. "एआर शुरू करें" पर क्लिक करने पर, बैकग्राउंड हट जाता है और डिवाइस को हिलाकर, सीन में इधर-उधर घूमा जा सकता है. ये मोड, रेफ़रंस स्पेस के अलग-अलग टाइप का इस्तेमाल करते हैं. ऊपर हाइलाइट किया गया टेक्स्ट दिखाता है कि इसे कैसे चुना जाता है. इसमें इन तरह के रेफ़रंस का इस्तेमाल किया जाता है:
local - सेशन बनाने के समय, ऑरिजिन दर्शक की जगह पर होता है. इसका मतलब है कि इस अनुभव में, ज़रूरी नहीं है कि फ़्लोर की जानकारी साफ़ तौर पर दी गई हो. साथ ही, प्लैटफ़ॉर्म के हिसाब से ऑरिजिन की सटीक जगह अलग-अलग हो सकती है. हालांकि, स्पेस के लिए पहले से कोई तय सीमा नहीं होती, लेकिन उम्मीद है कि कॉन्टेंट को घुमाने के अलावा, किसी और तरह से नहीं देखा जा सकता. जैसा कि हमारे एआर उदाहरण से पता चलता है, हो सकता है कि स्पेस में कुछ गतिविधि हो.
viewer - पेज में इनलाइन दिखाए गए कॉन्टेंट के लिए सबसे ज़्यादा इस्तेमाल किया जाता है. यह
स्पेस, व्यू वाले डिवाइस के बाद होता है. getViewerPose फ़ंक्शन में इस्तेमाल करने पर, यह ट्रैकिंग की सुविधा नहीं देता. इसलिए, जब तक ऐप्लिकेशन XRReferenceSpace.getOffsetReferenceSpace() की मदद से इसमें बदलाव नहीं करता, तब तक यह हमेशा ऑरिजिन पर पोज़ की जानकारी देता है. सैंपल में, कैमरे को टच करके पैन करने की सुविधा चालू करने के लिए, इसका इस्तेमाल किया गया है.
फ़्रेम लूप चलाना
कॉन्सेप्ट के हिसाब से, इसमें कुछ भी बदलाव नहीं हुआ है. मैंने अपने पिछले लेखों में, वीआर सेशन के बारे में जो बताया था वही अब भी लागू है. रेफ़रंस स्पेस के टाइप को XRFrame.getViewerPose() में पास करें.
XRViewerPose का इस्तेमाल, रेफ़रंस के तौर पर इस्तेमाल किए जा रहे मौजूदा स्पेस टाइप के लिए किया जाएगा. viewer को डिफ़ॉल्ट के तौर पर इस्तेमाल करने से, एआर या वीआर के लिए उपयोगकर्ता की
सहमति मांगने से पहले, किसी पेज पर कॉन्टेंट की झलक दिखती है. इससे एक अहम बात पता चलती है: इनलाइन कॉन्टेंट, इमर्सिव कॉन्टेंट के उसी फ़्रेम लूप का इस्तेमाल करता है. इससे, ऐसे कोड की संख्या कम हो जाती है जिसे बनाए रखना ज़रूरी होता है.
function onXRFrame(hrTime, xrFrame) {
let xrSession = xrFrame.session;
xrSession.requestAnimationFrame(onXRFrame);
let xrViewerPose = xrFrame.getViewerPose(refSpaceType);
if (xrViewerPose) {
// Render based on the pose.
}
}
नतीजा
इस लेखों की सीरीज़ में, वेब पर इमर्सिव कॉन्टेंट लागू करने के बारे में सिर्फ़ बुनियादी बातें बताई गई हैं. इमर्सिव वेब वर्किंग ग्रुप के WebXR Device API के सैंपल, कई और सुविधाएं और इस्तेमाल के उदाहरण पेश करते हैं. हमने हाल ही में एक हिट टेस्ट लेख भी पब्लिश किया है. इसमें, सतहों का पता लगाने और कैमरे के रीयल-वर्ल्ड व्यू में वर्चुअल आइटम डालने के लिए, एपीआई के बारे में बताया गया है. इन लेखों को पढ़ें और आने वाले साल में ज़्यादा लेखों के लिए, web.dev ब्लॉग देखें.
Unsplash पर David Grandmougin की फ़ोटो