WebXR Device API का इस्तेमाल करके, ऑगमेंटेड रिएलिटी (एआर) ऐप्लिकेशन बनाना

1. शुरू करने से पहले

इस कोडलैब में, एआर वेब ऐप्लिकेशन बनाने का एक उदाहरण दिया गया है. इसमें JavaScript का इस्तेमाल करके, 3D मॉडल रेंडर किए जाते हैं. ये मॉडल ऐसे दिखते हैं जैसे वे असल दुनिया में मौजूद हों.

आपने WebXR Device API का इस्तेमाल किया हो. यह एपीआई, एआर और वर्चुअल रिएलिटी (वीआर) की सुविधाओं को एक साथ इस्तेमाल करने की सुविधा देता है. आपने WebXR Device API के एआर एक्सटेंशन पर फ़ोकस किया है, ताकि इंटरैक्टिव वेब पर चलने वाला एक आसान एआर ऐप्लिकेशन बनाया जा सके.

एआर क्या है?

एआर शब्द का इस्तेमाल आम तौर पर, कंप्यूटर से जनरेट किए गए ग्राफ़िक को असल दुनिया के साथ मिक्स करने के लिए किया जाता है. फ़ोन पर एआर की सुविधा का इस्तेमाल करने का मतलब है कि कंप्यूटर ग्राफ़िक्स को लाइव कैमरे की फ़ीड पर इस तरह से दिखाना कि वे असली लगें. फ़ोन को दुनिया में कहीं भी ले जाने पर, इस इफ़ेक्ट को असली जैसा दिखाने के लिए, एआर की सुविधा वाले डिवाइस को यह समझना होगा कि वह किस दुनिया में घूम रहा है. साथ ही, उसे 3D स्पेस में अपनी पोज़ (जगह और ओरिएंटेशन) का पता लगाना होगा. इसमें सतहों का पता लगाना और आस-पास की रोशनी का अनुमान लगाना शामिल हो सकता है.

Google के ARCore और Apple के ARKit के रिलीज़ होने के बाद, ऐप्लिकेशन में एआर का इस्तेमाल काफ़ी बढ़ गया है. चाहे वह सेल्फ़ी फ़िल्टर के लिए हो या एआर पर आधारित गेम के लिए.

आपको क्या बनाना है

इस कोडलैब में, एक ऐसा वेब ऐप्लिकेशन बनाया जाता है जो ऑगमेंटेड रिएलिटी का इस्तेमाल करके, मॉडल को असल दुनिया में दिखाता है. आपका ऐप्लिकेशन:

  1. टारगेट डिवाइस के सेंसर का इस्तेमाल करके, उसकी जगह और ओरिएंटेशन का पता लगाना और उसे ट्रैक करना
  2. लाइव कैमरा व्यू के ऊपर कंपोज़ किए गए 3D मॉडल को रेंडर करना
  3. असल दुनिया में मिली सतहों पर ऑब्जेक्ट रखने के लिए, हिट टेस्ट लागू करना

आपको क्या सीखने को मिलेगा

  • WebXR Device API का इस्तेमाल कैसे करें
  • सामान्य एआर सीन को कॉन्फ़िगर करने का तरीका
  • एआर हिट टेस्ट का इस्तेमाल करके, किसी सतह का पता लगाने का तरीका
  • असल दुनिया के कैमरे के फ़ीड के साथ सिंक किए गए 3D मॉडल को लोड और रेंडर करने का तरीका
  • 3D मॉडल के आधार पर शैडो रेंडर करने का तरीका

यह कोडलैब, एआर एपीआई पर फ़ोकस करता है. काम के न होने वाले कॉन्सेप्ट और कोड ब्लॉक को अनदेखा किया जाता है. साथ ही, इन्हें आपके लिए संबंधित रिपॉज़िटरी कोड में उपलब्ध कराया जाता है.

आपको किन चीज़ों की ज़रूरत होगी

  • कोडिंग और स्टैटिक वेब कॉन्टेंट को होस्ट करने के लिए वर्कस्टेशन
  • Android 8.0 Oreo पर काम करने वाला ARCore की सुविधा वाला Android डिवाइस
  • Google Chrome
  • Google Play Services for AR इंस्टॉल हो (Chrome, एआर के साथ काम करने वाले डिवाइसों पर इसे इंस्टॉल करने के लिए अपने-आप प्रॉम्प्ट करता है)
  • अपनी पसंद का वेब सर्वर
  • अपने एआर डिवाइस को वर्कस्टेशन से कनेक्ट करने के लिए यूएसबी केबल
  • सैंपल कोड
  • टेक्स्ट एडिटर
  • एचटीएमएल, सीएसएस, JavaScript, और Google Chrome डेवलपर टूल की बुनियादी जानकारी

इस कोडलैब का पहला चरण आज़माने के लिए, अपने एआर डिवाइस पर इसे आज़माएं पर क्लिक करें. अगर आपको ऐसा पेज दिखता है जिस पर "आपके ब्राउज़र में एआर की सुविधाएं नहीं हैं" मैसेज दिखता है, तो पक्का करें कि आपके Android डिवाइस पर Google Play Services for AR इंस्टॉल हो.

2. डेवलपमेंट एनवायरमेंट सेट अप करना

कोड डाउनलोड करना

  1. अपने वर्कस्टेशन पर इस कोडलैब का पूरा कोड डाउनलोड करने के लिए, यहां दिए गए लिंक पर क्लिक करें:

  1. डाउनलोड की गई ज़िप फ़ाइल को अनपैक करें. इससे एक रूट फ़ोल्डर (ar-with-webxr-master) अनपैक होता है. इसमें इस कोडलैब के कई चरणों की डायरेक्ट्री होती हैं. साथ ही, इसमें वे सभी संसाधन होते हैं जिनकी आपको ज़रूरत है.

step-03 और step-04 फ़ोल्डर में, इस कोडलैब के तीसरे और चौथे चरण का आखिरी नतीजा मौजूद है. साथ ही, final का नतीजा भी मौजूद है. ये सिर्फ़ रेफ़रंस के लिए हैं.

आपका सारा कोडिंग का काम work डायरेक्ट्री में ही किया जा सकेगा.

वेब सर्वर इंस्टॉल करना

  1. आपके पास अपने वेब सर्वर का इस्तेमाल करने का विकल्प होता है. अगर आपने पहले से कोई वेब सर्वर सेट अप नहीं किया है, तो इस सेक्शन में Chrome के लिए वेब सर्वर सेट अप करने का तरीका बताया गया है.
    अगर आपने अब तक अपने वर्कस्टेशन पर वह ऐप्लिकेशन इंस्टॉल नहीं किया है, तो उसे Chrome Web Store से इंस्टॉल किया जा सकता है.

  1. Web Server for Chrome ऐप्लिकेशन इंस्टॉल करने के बाद, chrome://apps पर जाएं और Web Server आइकॉन पर क्लिक करें:

वेब सर्वर का आइकॉन

इसके बाद, आपको यह डायलॉग बॉक्स दिखेगा. इसकी मदद से, लोकल वेब सर्वर को कॉन्फ़िगर किया जा सकता है:

Chrome Web Server को कॉन्फ़िगर करना

  1. फ़ोल्डर चुनें पर क्लिक करें और ar-with-webxr-master फ़ोल्डर चुनें. इससे, वेब-सर्वर डायलॉग (वेब सर्वर यूआरएल सेक्शन में) में हाइलाइट किए गए यूआरएल के ज़रिए, अपने काम को दिखाया जा सकता है.
  2. विकल्प (रीस्टार्ट करना ज़रूरी है) में जाकर, index.html अपने-आप दिखाएं चेकबॉक्स को चुनें.
  3. वेब सर्वर को टॉगल करके बंद करें पर सेट करें. इसके बाद, इसे वापस चालू करें पर सेट करें.Chrome Web Server को रीस्टार्ट करें
  4. पुष्टि करें कि कम से कम एक वेब सर्वर यूआरएल दिखता हो: http://127.0.0.1:8887—यह डिफ़ॉल्ट लोकलहोस्ट यूआरएल है.

पोर्ट फ़ॉरवर्डिंग सेट अप करें

अपने एआर डिवाइस को इस तरह कॉन्फ़िगर करें कि जब आप उस पर localhost:8887 पर जाएं, तो वह आपके वर्कस्टेशन पर मौजूद उसी पोर्ट को ऐक्सेस करे.

  1. अपने डेवलपमेंट वर्कस्टेशन पर, chrome://inspect पर जाएं और पोर्ट फ़ॉरवर्डिंग... पर क्लिक करें: chrome://inspect
  2. पोर्ट 8887 को localhost:8887 पर फ़ॉरवर्ड करने के लिए, पोर्ट फ़ॉरवर्डिंग की सेटिंग डायलॉग का इस्तेमाल करें.
  3. पोर्ट फ़ॉरवर्डिंग चालू करें चेकबॉक्स को चुनें:

पोर्ट फ़ॉरवर्डिंग को कॉन्फ़िगर करें

अपने सेटअप की पुष्टि करें

अपने कनेक्शन की जांच करें:

  1. यूएसबी केबल की मदद से, अपने एआर डिवाइस को वर्कस्टेशन से कनेक्ट करें.
  2. Chrome में मौजूद अपने एआर डिवाइस पर, पता बार में http://localhost:8887 डालें. आपका एआर डिवाइस, इस अनुरोध को आपके डेवलपमेंट वर्कस्टेशन के वेब सर्वर पर फ़ॉरवर्ड करेगा. आपको फ़ाइलों की एक डायरेक्ट्री दिखेगी.
  3. अपने एआर डिवाइस पर, ब्राउज़र में step-03/index.html फ़ाइल लोड करने के लिए, step-03 पर क्लिक करें.

आपको एक ऐसा पेज दिखेगा जिसमें ऑगमेंटेड रिएलिटी (एआर) शुरू करें बटन होगा

हालांकि, अगर आपको यह ब्राउज़र इस्तेमाल नहीं किया जा सकता गड़बड़ी वाला पेज दिखता है, तो हो सकता है कि आपका डिवाइस इसके साथ काम न करे.

ARCore के साथ काम करता है

ARCore काम नहीं करता

अब आपके वेब सर्वर से कनेक्ट करने की सुविधा, आपके एआर डिवाइस पर काम करेगी.

  1. ऑगमेंटेड रिएलिटी (एआर) शुरू करें पर क्लिक करें. आपसे ARCore इंस्टॉल करने के लिए कहा जा सकता है.

ARCore इंस्टॉल करने का प्रॉम्प्ट

एआर ऐप्लिकेशन को पहली बार चलाने पर, आपको कैमरे का ऐक्सेस देने के लिए कहा जाएगा.

Chrome, कैमरे का ऐक्सेस मांग रहा है → अनुमतियों वाला डायलॉग बॉक्स

सब कुछ ठीक होने पर, आपको कैमरे की फ़ीड के ऊपर क्यूब का सीन दिखेगा. कैमरा जितना ज़्यादा डेटा प्रोसेस करेगा, सीन को समझने की क्षमता उतनी ही बेहतर होगी. इसलिए, कैमरा को घुमाने से सीन को समझने की क्षमता बेहतर हो सकती है.

3. WebXR कॉन्फ़िगर करना

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

एचटीएमएल पेज

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

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

आपकी work डायरेक्ट्री में पहले से मौजूद index.html फ़ाइल कुछ ऐसी दिखनी चाहिए. यह कोड, असल कॉन्टेंट का सबसेट है. इस कोड को अपनी फ़ाइल में कॉपी न करें!

<!-- Don't copy this code into your file! -->
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Building an augmented reality application with the WebXR Device API</title>
    <link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
    <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>

    <!-- three.js -->
    <script src="https://unpkg.com/three@0.123.0/build/three.js"></script>
    <script src="https://unpkg.com/three@0.123.0/examples/js/loaders/GLTFLoader.js"></script>

    <script src="../shared/utils.js"></script>
    <script src="app.js"></script>
  </head>
  <body>
  <!-- Information about AR removed for brevity. -->

  <!-- Starting an immersive WebXR session requires user interaction. Start the WebXR experience with a simple button. -->
  <a onclick="activateXR()" class="mdc-button mdc-button--raised mdc-button--accent">
    Start augmented reality
  </a>

</body>
</html>

कुंजी का JavaScript कोड खोलें

आपके ऐप्लिकेशन का शुरुआती पॉइंट app.js में है. इस फ़ाइल में, एआर का अनुभव सेट अप करने के लिए कुछ बॉयलरप्लेट दिए गए हैं.

आपकी वर्क डायरेक्ट्री में, ऐप्लिकेशन कोड (app.js) पहले से मौजूद है.

देखें कि WebXR और एआर के साथ कौनसे ब्राउज़र काम करते हैं

किसी उपयोगकर्ता के एआर का इस्तेमाल करने से पहले, यह देख लें कि navigator.xr और ज़रूरी XR सुविधाएं उपलब्ध हैं या नहीं. navigator.xr ऑब्जेक्ट, WebXR Device API के लिए एंट्री पॉइंट है. इसलिए, अगर डिवाइस इसके साथ काम करता है, तो यह मौजूद होना चाहिए. यह भी देखें कि "immersive-ar" सेशन मोड काम करता हो.

अगर सब कुछ ठीक है, तो Enter augmented reality बटन पर क्लिक करने से, XR सेशन बनाने की कोशिश की जाती है. ऐसा न होने पर, onNoXRDevice() को कॉल किया जाता है (shared/utils.js में). इससे एक मैसेज दिखता है, जिसमें एआर की सुविधा उपलब्ध न होने की जानकारी दी जाती है.

यह कोड पहले से ही app.js में मौजूद है. इसलिए, इसमें कोई बदलाव करने की ज़रूरत नहीं है.

(async function() {
  if (navigator.xr && await navigator.xr.isSessionSupported("immersive-ar")) {
    document.getElementById("enter-ar").addEventListener("click", activateXR)
  } else {
    onNoXRDevice();
  }
})();

XRSession का अनुरोध करना

ऑगमेंटेड रिएलिटी में जाएं पर क्लिक करने पर, कोड activateXR() को कॉल करता है. इससे एआर का अनुभव शुरू हो जाता है.

  1. app.js में activateXR() फ़ंक्शन ढूंढें. कुछ कोड छूट गया है:
activateXR = async () => {
  // Initialize a WebXR session using "immersive-ar".
  this.xrSession = /* TODO */;

  // Omitted for brevity
}

WebXR में एंट्रीपॉइंट XRSystem.requestSession() के ज़रिए होता है. immersive-ar मोड का इस्तेमाल करके, रेंडर किए गए कॉन्टेंट को असल दुनिया के माहौल में देखा जा सकता है.

  1. "immersive-ar" मोड का इस्तेमाल करके, this.xrSession को शुरू करें:
activateXR = async () => {
  // Initialize a WebXR session using "immersive-ar".
  this.xrSession = await navigator.xr.requestSession("immersive-ar");

  // ...
}

XRReferenceSpace को शुरू करना

XRReferenceSpace से, वर्चुअल दुनिया में मौजूद ऑब्जेक्ट के लिए इस्तेमाल किए गए कोऑर्डिनेट सिस्टम के बारे में पता चलता है. 'local' मोड, एआर के अनुभव के लिए सबसे सही है. इसमें रेफ़रंस स्पेस होता है, जिसका ओरिजन दर्शक के पास होता है और ट्रैकिंग स्थिर होती है.

नीचे दिए गए कोड का इस्तेमाल करके, onSessionStarted() में this.localReferenceSpace को शुरू करें:

this.localReferenceSpace = await this.xrSession.requestReferenceSpace("local");

ऐनिमेशन लूप तय करना

  1. XRSession के requestAnimationFrame का इस्तेमाल करके, रेंडरिंग लूप शुरू करें. यह window.requestAnimationFrame की तरह ही काम करता है.

हर फ़्रेम पर, टाइमस्टैंप और XRFrame के साथ onXRFrame को कॉल किया जाता है.

  1. onXRFrame को लागू करने की प्रोसेस पूरी करें. जब कोई फ़्रेम बनाया जाता है, तो यह कोड जोड़कर अगले अनुरोध को लाइन में लगाएं:
// Queue up the next draw request.
this.xrSession.requestAnimationFrame(this.onXRFrame);
  1. ग्राफ़िक्स एनवायरमेंट सेट अप करने के लिए कोड जोड़ें. onXRFrame में सबसे नीचे यह जोड़ें:
// Bind the graphics framebuffer to the baseLayer's framebuffer.
const framebuffer = this.xrSession.renderState.baseLayer.framebuffer;
this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, framebuffer);
this.renderer.setFramebuffer(framebuffer);
  1. दर्शक की पोज़िशन का पता लगाने के लिए, XRFrame.getViewerPose() का इस्तेमाल करें. इस XRViewerPose से, डिवाइस की पोज़िशन और ओरिएंटेशन के बारे में पता चलता है. इसमें XRView का एक ऐरे भी होता है. इससे यह पता चलता है कि सीन को किस व्यू पॉइंट से रेंडर किया जाना चाहिए, ताकि वह मौजूदा डिवाइस पर सही तरीके से दिखे. स्टीरियोस्कोपिक वीआर में दो व्यू होते हैं (हर आंख के लिए एक), जबकि एआर डिवाइसों में सिर्फ़ एक व्यू होता है.
    में मौजूद जानकारी का इस्तेमाल, वर्चुअल कैमरे के व्यू मैट्रिक्स और प्रोजेक्शन मैट्रिक्स को कॉन्फ़िगर करने के लिए किया जाता है.pose.views इससे यह तय होता है कि सीन को 3D में कैसे दिखाया जाएगा. कैमरे को कॉन्फ़िगर करने के बाद, सीन को रेंडर किया जा सकता है.
  2. onXRFrame में सबसे नीचे यह जोड़ें:
// Retrieve the pose of the device.
// XRFrame.getViewerPose can return null while the session attempts to establish tracking.
const pose = frame.getViewerPose(this.localReferenceSpace);
if (pose) {
  // In mobile AR, we only have one view.
  const view = pose.views[0];

  const viewport = this.xrSession.renderState.baseLayer.getViewport(view);
  this.renderer.setSize(viewport.width, viewport.height);

  // Use the view's transform matrix and projection matrix to configure the THREE.camera.
  this.camera.matrix.fromArray(view.transform.matrix);
  this.camera.projectionMatrix.fromArray(view.projectionMatrix);
  this.camera.updateMatrixWorld(true);

  // Render the scene with THREE.WebGLRenderer.
  this.renderer.render(this.scene, this.camera);
}

इसे आज़माएं

ऐप्लिकेशन चलाएँ. इसके बाद, डेवलपमेंट डिवाइस पर work/index.html पर जाएँ. आपको कैमरे का फ़ीड दिखेगा. इसमें क्यूब हवा में तैरते हुए दिखेंगे. डिवाइस को घुमाने पर, क्यूब का पर्सपेक्टिव बदल जाएगा. जितना ज़्यादा चला जाएगा, ट्रैकिंग उतनी ही बेहतर होगी. इसलिए, देखें कि आपके और आपके डिवाइस के लिए कौनसा तरीका सही है.

अगर आपको ऐप्लिकेशन चलाने में समस्याएं आ रही हैं, तो परिचय और डेवलपमेंट एनवायरमेंट सेट अप करना सेक्शन देखें.

4. टारगेटिंग रेटिकल जोड़ना

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

हिट टेस्ट के बारे में जानकारी

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

WebXR Device API से पता चलता है कि क्या यह रे, असल दुनिया के किसी ऑब्जेक्ट से टकराई है. यह जानकारी, एआर की बुनियादी सुविधाओं और दुनिया को समझने की क्षमता के आधार पर तय की जाती है.

हिट टेस्ट के बारे में ज़्यादा जानकारी

ज़्यादा सुविधाओं वाले XRSession का अनुरोध करना

हिट टेस्ट करने के लिए, XRSession का अनुरोध करते समय अतिरिक्त सुविधाओं की ज़रूरत होती है.

  1. app.js में, navigator.xr.requestSession ढूंढें.
  2. "hit-test" और "dom-overlay" सुविधाओं को requiredFeature के तौर पर इस तरह जोड़ें:
this.xrSession = await navigator.xr.requestSession("immersive-ar", {
  requiredFeatures: ["hit-test", "dom-overlay"]
});
  1. DOM ओवरले को कॉन्फ़िगर करें. document.body एलिमेंट को एआर कैमरे के व्यू पर इस तरह लेयर करें:
this.xrSession = await navigator.xr.requestSession("immersive-ar", {
  requiredFeatures: ["hit-test", "dom-overlay"],
  domOverlay: { root: document.body }
});

मोशन प्रॉम्प्ट जोड़ना

ARCore सबसे अच्छा तब काम करता है, जब उसे आस-पास के माहौल की पूरी जानकारी मिल जाती है. ऐसा एक प्रोसेस के ज़रिए किया जाता है. इसे एक साथ लोकलाइज़ेशन और मैपिंग (एसएलएएम) कहा जाता है. इसमें, विज़ुअल तौर पर अलग-अलग फ़ीचर पॉइंट का इस्तेमाल करके, जगह और आस-पास के माहौल की विशेषताओं में हुए बदलाव का हिसाब लगाया जाता है.

कैमरे की स्ट्रीम के ऊपर मोशन प्रॉम्प्ट दिखाने के लिए, पिछले चरण में इस्तेमाल किए गए "dom-overlay" का इस्तेमाल करें.

आईडी stabilization वाले index.html में <div> जोड़ें. यह <div> उपयोगकर्ताओं को स्टेबलाइज़ेशन की स्थिति दिखाने वाला ऐनिमेशन दिखाता है. साथ ही, उन्हें एसएलएएम प्रोसेस को बेहतर बनाने के लिए, अपने डिवाइस के साथ इधर-उधर घूमने के लिए कहता है. यह तब दिखता है, जब उपयोगकर्ता एआर मोड में होता है. जब रेटिकल को कोई सतह मिल जाती है, तब यह छिप जाता है. इसे <body> क्लास कंट्रोल करती हैं.

  <div id="stabilization"></div>

</body>
</html>

रेटिकल जोड़ना

डिवाइस के कैमरे का फ़ोकस जिस जगह पर है उसे दिखाने के लिए, रेटिकल का इस्तेमाल करें.

  1. app.js में, setupThreeJs() में मौजूद DemoUtils.createCubeScene() कॉल को खाली Three.Scene() से बदलें.
setupThreeJs() {
  // ...

  // this.scene = DemoUtils.createCubeScene();
  this.scene = DemoUtils.createLitScene();
}
  1. नए सीन में एक ऐसा ऑब्जेक्ट जोड़ें जो टकराव की जगह को दिखाता हो. दी गई Reticle क्लास, shared/utils.js में रेटिकल मॉडल लोड करने का काम करती है.
  2. setupThreeJs() में मौजूद सीन में Reticle जोड़ें:
setupThreeJs() {
  // ...

  // this.scene = DemoUtils.createCubeScene();
  this.scene = DemoUtils.createLitScene();
  this.reticle = new Reticle();
  this.scene.add(this.reticle);
}

हिट टेस्ट करने के लिए, एक नए XRReferenceSpace का इस्तेमाल किया जाता है. यह रेफ़रंस स्पेस, दर्शक के नज़रिए से एक नई कोऑर्डिनेट सिस्टम दिखाता है. इससे देखने की दिशा के साथ अलाइन की गई रे बनाई जा सकती है. इस कोऑर्डिनेट सिस्टम का इस्तेमाल XRSession.requestHitTestSource() में किया जाता है. इससे हिट टेस्ट का हिसाब लगाया जा सकता है.

  1. app.js में onSessionStarted() में यह जोड़ें:
async onSessionStarted() {
  // ...

  // Setup an XRReferenceSpace using the "local" coordinate system.
  this.localReferenceSpace = await this.xrSession.requestReferenceSpace("local");

  // Add these lines:
  // Create another XRReferenceSpace that has the viewer as the origin.
  this.viewerSpace = await this.xrSession.requestReferenceSpace("viewer");
  // Perform hit testing using the viewer as origin.
  this.hitTestSource = await this.xrSession.requestHitTestSource({ space: this.viewerSpace });

  // ...
}
  1. इस hitTestSource का इस्तेमाल करके, हर फ़्रेम पर हिट टेस्ट करें:
    • अगर हिट टेस्ट के लिए कोई नतीजा नहीं मिलता है, तो इसका मतलब है कि ARCore को एनवायरमेंट को समझने के लिए ज़रूरत के मुताबिक समय नहीं मिला है. इस मामले में, उपयोगकर्ता को स्टेबिलाइज़ेशन <div> का इस्तेमाल करके डिवाइस को हिलाने के लिए कहें.
    • अगर नतीजे दिखते हैं, तो रेटिकल को उस जगह पर ले जाएं.
  2. रेटिकल को घुमाने के लिए, onXRFrame में बदलाव करें:
onXRFrame = (time, frame) => {
  // ... some code omitted ...
  this.camera.updateMatrixWorld(true);

  // Add the following:
  const hitTestResults = frame.getHitTestResults(this.hitTestSource);

  if (!this.stabilized && hitTestResults.length > 0) {
    this.stabilized = true;
    document.body.classList.add("stabilized");
  }
  if (hitTestResults.length > 0) {
    const hitPose = hitTestResults[0].getPose(this.localReferenceSpace);

    // update the reticle position
    this.reticle.visible = true;
    this.reticle.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z)
    this.reticle.updateMatrixWorld(true);
  }
  // More code omitted.
}

स्क्रीन पर टैप करने पर होने वाली कार्रवाई जोड़ना

XRSession, उपयोगकर्ता के इंटरैक्शन के आधार पर इवेंट भेज सकता है. हालांकि, इसके लिए select इवेंट का इस्तेमाल किया जाता है, जो मुख्य कार्रवाई को दिखाता है. फ़ोन या टैबलेट पर WebXR में, मुख्य कार्रवाई स्क्रीन पर टैप करना होती है.

  1. onSessionStarted के सबसे नीचे select इवेंट लिसनर जोड़ें:
this.xrSession.addEventListener("select", this.onSelect);

इस उदाहरण में, स्क्रीन पर टैप करने से सूरजमुखी का फूल, रेटिकल पर रखा जाता है.

  1. App क्लास में onSelect को लागू करने के लिए, यह कोड लिखें:
onSelect = () => {
  if (window.sunflower) {
    const clone = window.sunflower.clone();
    clone.position.copy(this.reticle.position);
    this.scene.add(clone);
  }
}

ऐप्लिकेशन को टेस्ट करना

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

  1. ऐप्लिकेशन चलाने पर, आपको फ़्लोर की सतह पर एक रेटिकल दिखता है. अगर ऐसा नहीं होता है, तो अपने फ़ोन को धीरे-धीरे घुमाकर आस-पास के नज़ारे देखें.
  2. रेटिकल दिखने पर, उस पर टैप करें. इसके ऊपर एक सूरजमुखी का फूल रखा होना चाहिए. आपको थोड़ा इधर-उधर घूमना पड़ सकता है, ताकि एआर प्लैटफ़ॉर्म, असल दुनिया की सतहों का बेहतर तरीके से पता लगा सके. कम रोशनी और बिना सुविधाओं वाली सतहों की वजह से, सीन को समझने की क्वालिटी कम हो जाती है. साथ ही, कोई भी ऑब्जेक्ट न मिलने की संभावना बढ़ जाती है. अगर आपको कोई समस्या होती है, तो इस चरण का काम करने वाला उदाहरण देखने के लिए, step-04/app.js कोड देखें.

5. शैडो जोड़ना

किसी सीन को असली दिखाने के लिए, डिजिटल ऑब्जेक्ट पर सही लाइटिंग और शैडो जैसे एलिमेंट शामिल किए जाते हैं. इससे सीन असली लगता है और उसमें दिलचस्पी बढ़ती है.

लाइटिंग और शैडो को three.js मैनेज करता है. यह तय किया जा सकता है कि किन लाइटों से परछाईं बननी चाहिए, किन मटीरियल पर ये परछाईं दिखनी चाहिए और रेंडर होनी चाहिए, और किन मेश से परछाईं बन सकती हैं. इस ऐप्लिकेशन के सीन में एक लाइट है, जिससे परछाई बनती है. साथ ही, इसमें एक फ़्लैट सरफ़ेस है, जिस पर सिर्फ़ परछाई रेंडर की जाती है.

  1. three.js WebGLRenderer पर शैडो चालू करें. रेंडरर बनाने के बाद, उसके shadowMap पर ये वैल्यू सेट करें:
setupThreeJs() {
  ...
  this.renderer = new THREE.WebGLRenderer(...);
  ...
  this.renderer.shadowMap.enabled = true;
  this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
  ...
}

DemoUtils.createLitScene() में बनाए गए उदाहरण वाले सीन में, shadowMesh नाम का एक ऑब्जेक्ट शामिल है. यह एक सपाट, हॉरिज़ॉन्टल सतह है, जो सिर्फ़ परछाईं रेंडर करती है. इस सर्फ़ेस की शुरुआती Y पोज़िशन 10,000 यूनिट है. सूरजमुखी का फूल रखने के बाद, shadowMesh को असल दुनिया की सतह की ऊंचाई पर ले जाएं, ताकि फूल की परछाई असल दुनिया की ज़मीन पर दिखे.

  1. onSelect में, सीन में clone जोड़ने के बाद, शैडो प्लेन की जगह बदलने के लिए कोड जोड़ें:
onSelect = () => {
  if (window.sunflower) {
    const clone = window.sunflower.clone();
    clone.position.copy(this.reticle.position);
    this.scene.add(clone);

    const shadowMesh = this.scene.children.find(c => c.name === "shadowMesh");
    shadowMesh.position.y = clone.position.y;
  }
}

इसे आज़माएं

सूरजमुखी को रखते समय, आपको उसकी परछाई दिखनी चाहिए. अगर आपको कोई समस्या होती है, तो इस चरण का काम करने वाला उदाहरण देखने के लिए, final/app.js कोड देखें.

6. अन्य संसाधन

बधाई हो! आपने WebXR का इस्तेमाल करके, एआर पर इस कोडलैब को पूरा कर लिया है.

ज़्यादा जानें