WebXR का इस्तेमाल करके डेवलप करना

Android XR पर Chrome, WebXR के साथ काम करता है. WebXR, W3C का एक ओपन स्टैंडर्ड है. यह इसके साथ काम करने वाले ब्राउज़र में, बेहतर परफ़ॉर्मेंस वाले XR API उपलब्ध कराता है. अगर आपको वेब के लिए कॉन्टेंट बनाना है, तो 3D मॉडल की मदद से मौजूदा साइटों को बेहतर बनाया जा सकता है या दर्शकों को बेहतर अनुभव देने वाली नई साइटें बनाई जा सकती हैं.

Chrome for Android XR में, WebXR की ये सुविधाएं काम करती हैं:

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

ज़रूरी शर्त: WebXR फ़्रेमवर्क चुनना

डेवलपमेंट शुरू करने से पहले, सही WebXR फ़्रेमवर्क चुनना ज़रूरी है. इससे आपकी उत्पादकता काफ़ी बढ़ती है और आपके बनाए गए अनुभवों की क्वालिटी भी बेहतर होती है.

  • 3D सीन पर पूरा कंट्रोल पाने और कस्टम या जटिल इंटरैक्शन बनाने के लिए, हमारा सुझाव है कि आप three.js और babylon.js का इस्तेमाल करें.
  • हमारा सुझाव है कि A-Frame और model-viewer का इस्तेमाल करके, तेज़ी से प्रोटोटाइप बनाएं या 3D सीन बनाने के लिए एचटीएमएल जैसे सिंटैक्स का इस्तेमाल करें.
  • ज़्यादा फ़्रेमवर्क और सैंपल कोड भी देखे जा सकते हैं.

अगर आपको नेटिव JavaScript और WebGL का इस्तेमाल करना है, तो अपना पहला WebXR प्रयोग बनाने के लिए, GitHub पर WebXR देखें.

Android XR के लिए ऐप्लिकेशन को अडैप्ट करना

अगर आपके पास दूसरे डिवाइसों पर चल रहे वेबएक्सआर अनुभव हैं, तो आपको Android XR पर वेबएक्सआर को सही तरीके से काम करने के लिए, अपना कोड अपडेट करना पड़ सकता है. उदाहरण के लिए, मोबाइल डिवाइसों पर फ़ोकस करने वाले वेबXR अनुभवों को Android XR में, एक स्क्रीन से दो स्टीरियो स्क्रीन पर बदलना होगा. मोबाइल डिवाइसों या मौजूदा हेडसेट को टारगेट करने वाले वेबएक्सआर अनुभवों के लिए, इनपुट कोड को हाथ के हिसाब से बदलना पड़ सकता है.

Android XR पर WebXR का इस्तेमाल करते समय, आपको अपने कोड को अपडेट करना पड़ सकता है. ऐसा इसलिए, क्योंकि इसमें दो स्क्रीन होती हैं, एक हर आंख के लिए.

WebXR में गहराई की अनुभूति देने के बारे में जानकारी

जब कोई उपयोगकर्ता अपने फ़िज़िकल स्पेस में वर्चुअल ऑब्जेक्ट डालता है, तो उसका स्केल सटीक होना चाहिए, ताकि यह असल में वहां मौजूद लगे. उदाहरण के लिए, फ़र्नीचर खरीदने के लिए बने ऐप्लिकेशन में, उपयोगकर्ताओं को भरोसा करना होगा कि वर्चुअल आर्मचेअर उनके लिविंग रूम में सही से फ़िट होगी.

'Android के लिए Chrome XR', WebXR में डेप्थ सेंसिंग मॉड्यूल के साथ काम करता है. इससे डिवाइस को, असल दुनिया के आस-पास के माहौल के डाइमेंशन और कॉन्टूर को समझने में मदद मिलती है. इस ज़्यादा जानकारी की मदद से, ज़्यादा असरदार और असल जैसे इंटरैक्शन बनाए जा सकते हैं. इससे, उपयोगकर्ताओं को ज़्यादा सोच-समझकर फ़ैसले लेने में मदद मिलती है.

मोबाइल फ़ोन पर मौजूद डेप्थ सेंसिंग की सुविधा के मुकाबले, Android XR में डेप्थ सेंसिंग की सुविधा स्टीरियोस्कोपिक है. यह सुविधा, रीयल-टाइम में दो डेप्थ मैप को स्ट्रीम करती है, ताकि ऑब्जेक्ट को दोनों आंखों से देखा जा सके. स्टीरियो डेप्थ फ़्रेम के साथ सही तरीके से काम करने के लिए, आपको अपना WebXR कोड अपडेट करना पड़ सकता है.

नीचे दिए गए उदाहरण में, गहराई की जानकारी को स्टीरियोस्कोपिक तरीके से रेंडर किया गया है:

// Called every time a XRSession requests that a new frame be drawn.
function onXRFrame(t, frame) {
  const session = frame.session;
  session.requestAnimationFrame(onXRFrame);
  const baseLayer = session.renderState.baseLayer;
  const pose = frame.getViewerPose(xrRefSpace);

  if (pose) {
    gl.bindFramebuffer(gl.FRAMEBUFFER, session.renderState.baseLayer.framebuffer);

    // Clears the framebuffer.
    gl.clearColor(0, 0, 0, 0);
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

    // Note: Two views will be returned from pose.views.
    for (const view of pose.views) {
      const viewport = baseLayer.getViewport(view);
      gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height);

      const depthData = frame.getDepthInformation(view);
      if (depthData) {
        renderDepthInformationGPU(depthData, view, viewport);
      }
    }
  } else {
    console.error('Pose unavailable in the current frame!');  }
}

कोड के बारे में खास जानकारी

  • डेप्थ डेटा ऐक्सेस करने के लिए, कोई मान्य पोज़ होना चाहिए.
  • pose.views हर आंख के लिए एक व्यू दिखाता है और उससे जुड़ा for लूप दो बार चलता है.

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

WebXR में हाथ से इंटरैक्ट करने की सुविधा जोड़ना

अपने WebXR ऐप्लिकेशन में हाथ से इंटरैक्ट करने की सुविधा जोड़ने से, उपयोगकर्ता जुड़ाव बढ़ता है. ऐसा, उपयोगकर्ताओं को ज़्यादा सहज और बेहतर अनुभव देने की वजह से होता है.

Android XR में, हाथ से दिए जाने वाले निर्देश, इंटरैक्शन का मुख्य तरीका है. Android XR के लिए Chrome, डिफ़ॉल्ट इनपुट के तौर पर Hand Input API के साथ काम करता है. इस एपीआई की मदद से, उपयोगकर्ता किसी सीन में मौजूद एलिमेंट को पकड़ने, धकेलने या उनमें बदलाव करने के लिए, जेस्चर और हाथ की हरकतों का इस्तेमाल करके, वर्चुअल ऑब्जेक्ट के साथ स्वाभाविक तरीके से इंटरैक्ट कर सकते हैं.

ऐसा हो सकता है कि मोबाइल फ़ोन या कंट्रोलर पर काम करने वाले XR डिवाइसों पर, हाथ से दिए जाने वाले इनपुट की सुविधा अभी काम न करे. हाथ से इनपुट करने की सुविधा को सही तरीके से इस्तेमाल करने के लिए, आपको अपने WebXR कोड को अपडेट करना पड़ सकता है. हाथों से इमर्सिव वीआर सेशन में, अपने WebXR प्रोजेक्ट में हाथों को ट्रैक करने की सुविधा को इंटिग्रेट करने का तरीका बताया गया है.

नीचे दिए गए ऐनिमेशन में, पिंच करने की सुविधा को WebXR API के साथ जोड़ने का उदाहरण दिया गया है. इससे, उपयोगकर्ता को वर्चुअल स्पेस के सतह को "मिटाते" हुए दिखाया गया है, ताकि रीयल वर्ल्ड में पास-थ्रू विंडो दिख सके.

WebXR का डेमो, जिसमें हाथ से पिंच करके स्क्रीन को मिटाकर, असल दुनिया को देखा जा रहा है.

WebXR में अनुमतियां

अनुमति की ज़रूरत वाले WebXR API का इस्तेमाल करने पर, Chrome उपयोगकर्ता से साइट को अनुमति देने के लिए कहता है. सभी WebXR API के लिए, 3D मैपिंग और कैमरा ट्रैकिंग की अनुमति ज़रूरी है. ट्रैक किए गए चेहरे, आंख, और हाथ के डेटा को ऐक्सेस करने की अनुमतियों को भी सुरक्षित रखा जाता है. अगर सभी ज़रूरी अनुमतियां मिल जाती हैं, तो navigator.xr.requestSession('immersive-ar', options) को कॉल करने पर, एक मान्य WebXR सेशन मिलता है.

उपयोगकर्ता की चुनी गई अनुमतियों की प्राथमिकता, हर डोमेन के लिए बनी रहती है. किसी दूसरे डोमेन में WebXR अनुभव को ऐक्सेस करने पर, Chrome फिर से अनुमतियों के लिए पूछता है. अगर WebXR अनुभव के लिए कई अनुमतियां ज़रूरी हैं, तो Chrome एक-एक करके हर अनुमति के लिए अनुरोध करता है.

वेब पर सभी अनुमतियों की तरह, आपको उन स्थितियों को सही तरीके से मैनेज करना चाहिए जहां अनुमति अस्वीकार की जाती है.