इस पेज का अनुवाद Cloud Translation API से किया गया है.

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

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

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

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

एआर क्या है?

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

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

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

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

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

आप इन चीज़ों के बारे में जानेंगे

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

यह कोडलैब, AR API पर फ़ोकस करता है. ऐसे कॉन्सेप्ट और कोड ब्लॉक छिपा दिए जाते हैं जो काम के नहीं होते. साथ ही, उन्हें आपको उनसे जुड़े रिपॉज़िटरी कोड में उपलब्ध कराया जाता है.

आपको इनकी ज़रूरत होगी

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

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

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

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

अपने वर्कस्टेशन पर मौजूद इस कोडलैब के लिए सभी कोड डाउनलोड करने के लिए, नीचे दिए गए लिंक पर क्लिक करें:

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

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

आप कोडिंग से जुड़े अपने सभी काम work डायरेक्ट्री में करते हैं.

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

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

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

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

Chrome वेब सर्वर कॉन्फ़िगर करें

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

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

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

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

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

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

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

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

आपको ऐसा पेज दिखेगा जिसमें ऑगमेंटेड रिएलिटी (एआर) शुरू करें बटन हो	हालांकि, अगर आपको इस ब्राउज़र के साथ काम न करने वाला गड़बड़ी वाला पेज दिखता है, तो हो सकता है कि आपका डिवाइस Android TV के साथ काम न करता हो.

आपके वेब सर्वर का कनेक्शन अब आपके एआर डिवाइस के साथ काम करने लगेगा.

ऑगमेंटेड रिएलिटी (एआर) की सुविधा शुरू करें पर क्लिक करें. आपसे 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" सेशन मोड काम करता है या नहीं.

अगर सब ठीक है, तो ऑगमेंटेड रिएलिटी (एआर) डालें बटन पर क्लिक करने से, 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() को कॉल करता है. इससे एआर का अनुभव शुरू हो जाएगा.

app.js में activateXR() फ़ंक्शन ढूंढें. कुछ कोड छोड़ दिए गए हैं:

activateXR = async () => {
  // Initialize a WebXR session using "immersive-ar".
  this.xrSession = /* TODO */;

  // Omitted for brevity
}

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

"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");

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

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

XRSession की requestAnimationFrame की मदद से, नेटिव XR डिवाइस की रीफ़्रेश दर को हुक किया जा सकता है. मानक वेब पेज रेंडर लूप 60 FPS के लिए बनाए जाते हैं, जबकि बाहरी वीआर डिसप्ले 120 FPS पर रेंडर हो सकते हैं. नॉन-एक्सक्लूज़िव एआर सेशन अब भी सिर्फ़ 60 FPS पर चल सकते हैं. हालांकि, डिवाइस के पोज़ और व्यू की जानकारी को सिर्फ़ किसी सेशन के requestAnimationFrame में ऐक्सेस किया जा सकता है.

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

onXRFrame को लागू करने की प्रोसेस पूरी करें. जब कोई फ़्रेम बनाया गया हो, तो इसे जोड़कर अगले अनुरोध को सूची में जोड़ें:

// Queue up the next draw request.
this.xrSession.requestAnimationFrame(this.onXRFrame);

ग्राफ़िक एनवायरमेंट को सेट अप करने के लिए कोड जोड़ें. 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);

दर्शकों का पोज़ तय करने के लिए, XRFrame.getViewerPose() का इस्तेमाल करें. इस XRViewerPose से, स्पेस में डिवाइस की पोज़िशन और स्क्रीन की दिशा के बारे में पता चलता है. इसमें XRView का कलेक्शन भी होता है. इससे यह पता चलता है कि किसी सीन को किस व्यूपॉइंट से रेंडर किया जाना चाहिए, ताकि वह मौजूदा डिवाइस पर ठीक से दिखे. स्टीरियोस्कोपिक वीआर में दो व्यू होते हैं (हर आँख के लिए एक), जबकि एआर (ऑगमेंटेड रिएलिटी) डिवाइसों में सिर्फ़ एक व्यू होता है.
pose.views में मौजूद जानकारी का इस्तेमाल, आम तौर पर वर्चुअल कैमरे के व्यू मैट्रिक्स और प्रोजेक्शन मैट्रिक्स को कॉन्फ़िगर करने के लिए किया जाता है. इससे 3D में सीन को दिखाने के तरीके पर असर पड़ता है. कैमरा कॉन्फ़िगर किए जाने पर, सीन रेंडर किया जा सकता है.
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 का अनुरोध करते समय अतिरिक्त सुविधाओं की ज़रूरत होती है.

app.js में, navigator.xr.requestSession का पता लगाएं.
"hit-test" और "dom-overlay" सुविधाओं को requiredFeature के तौर पर इस तरह जोड़ें:

this.xrSession = await navigator.xr.requestSession("immersive-ar", {
  requiredFeatures: ["hit-test", "dom-overlay"]
});

डीओएम ओवरले कॉन्फ़िगर करें. एआर कैमरा व्यू के ऊपर, 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>

रेटिकल जोड़ें

डिवाइस का व्यू जिस जगह की तरफ़ इशारा कर रहा है उसे दिखाने के लिए रेटिकल का इस्तेमाल करें.

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

setupThreeJs() {
  // ...

  // this.scene = DemoUtils.createCubeScene();
  this.scene = DemoUtils.createLitScene();
}

नए सीन में, टक्कर लगने वाले पॉइंट को दिखाने वाले ऑब्जेक्ट का इस्तेमाल करें. दिया गया Reticle क्लास हैंडल, shared/utils.js में रेटिकल मॉडल को लोड करता है.
Reticle को setupThreeJs() में सीन में जोड़ें:

setupThreeJs() {
  // ...

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

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

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 });

  // ...
}

इस hitTestSource का इस्तेमाल करके, हर फ़्रेम के लिए हिट टेस्ट करें:
- अगर हिट टेस्ट का कोई नतीजा नहीं मिलता, तो इसका मतलब है कि ARCore को आस-पास के माहौल को समझने के लिए ज़रूरी समय नहीं मिला है. ऐसे में, उपयोगकर्ता से <div> स्टेबलाइज़ेशन का इस्तेमाल करके डिवाइस की जगह बदलने का अनुरोध करें.
- अगर नतीजे मिलते हैं, तो रेटिकल को उस जगह पर ले जाएं.
रेटिकल को एक से दूसरी जगह ले जाने के लिए, 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 में, मुख्य कार्रवाई स्क्रीन टैप करना होती है.

onSessionStarted के नीचे select इवेंट लिसनर जोड़ें:

this.xrSession.addEventListener("select", this.onSelect);

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

App क्लास में onSelect के लिए लागू करने की प्रक्रिया बनाएं:

onSelect = () => {
  if (window.sunflower) {
    const clone = window.sunflower.clone();
    clone.position.copy(this.reticle.position);
    this.scene.add(clone);
  }
}

ऐप्लिकेशन का परीक्षण करें

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

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

5. गहरे हिस्सों को हल्का करना

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

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

three.js WebGLRenderer पर शैडो चालू करें. रेंडरर बनाने के बाद, उसके shadowMap पर ये वैल्यू सेट करें:

setupThreeJs() {
  ...
  this.renderer = new THREE.WebGLRenderer(...);
  ...
  this.renderer.shadowMap.enabled = true;
  this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
  ...
}

इस उदाहरण में, गहरे हिस्सों को हल्का करने के लिए हार्डकोड की गई रोशनी की जगह का इस्तेमाल किया गया है. आने वाले समय में, WebXR के लिए एआर (ऑगमेंटेड रिएलिटी) की सुविधाओं में, रोशनी का अनुमान लगाने और अन्य वैल्यू शामिल हो सकती हैं. जैसे, 3D मॉडल की शैडो भी असल दुनिया के साथ सिंक हो जाए. ज़्यादा जानकारी के लिए, सुविधा: WebXR एआर (ऑगमेंटेड रिएलिटी) लाइटिंग एस्टीमेशन लेख पढ़ें.

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

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 का इस्तेमाल करके, एआर (ऑगमेंटेड रिएलिटी) पर यह कोडलैब (कोड बनाना सीखना) खत्म कर दिया है.

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

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

एआर क्या है?

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

आप इन चीज़ों के बारे में जानेंगे

आपको इनकी ज़रूरत होगी

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

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

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

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

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

3. WebXR को कॉन्फ़िगर करें

एचटीएमएल पेज

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

WebXR और एआर (ऑगमेंटेड रिएलिटी) की सुविधा उपलब्ध है

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

XRReferenceSpace शुरू करना

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

इसका परीक्षण करें

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

हिट टेस्ट को समझना

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

कोई मोशन प्रॉम्प्ट जोड़ें

रेटिकल जोड़ें

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

ऐप्लिकेशन का परीक्षण करें

5. गहरे हिस्सों को हल्का करना

इसका परीक्षण करें

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

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

`XRSession` का अनुरोध करें

`XRReferenceSpace` शुरू करना

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