Android XR पर वेब के लिए ऐप्लिकेशन डेवलप करना

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

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

Android XR के लिए Chrome में, WebXR की इन सुविधाओं का इस्तेमाल किया जा सकता है:

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

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

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

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

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

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

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

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

WebXR में डेप्थ का एहसास कराने के बारे में जानकारी

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

Android XR के लिए Chrome, 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 depth sensing API का इस्तेमाल करके, रीयल-टाइम में डेप्थ विज़ुअलाइज़ेशन. लाल रंग से पता चलता है कि पिक्सल पास में हैं, जबकि नीले रंग से पता चलता है कि पिक्सल दूर हैं.

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

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

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

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

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

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

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

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

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

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