VR & AR (WebXR)

समर्थित डिवाइस

नीडल इंजन संपूर्ण WebXR स्पेसिफिकेशन का समर्थन करता है, जिसमें AR और VR शामिल हैं। WebXR एक आधिकारिक वेब स्टैंडर्ड है जो वेब पर इमर्सिव अनुभव लाता है, वेब के सभी लाभों के साथ: कोई इंस्टॉलेशन नहीं, कोई ऐप स्टोर नहीं, किसी एसडीके की आवश्यकता नहीं।

ब्राउज़र वाले सभी डिवाइस नीडल से बने ऐप चला सकते हैं। यदि ब्राउज़र WebXR का समर्थन करता है, तो आपके ऐप हमारे अंतर्निहित कंपोनेंट का उपयोग करके, XR में भी स्वचालित रूप से काम करेंगे। इसमें डेस्कटॉप ब्राउज़र, मोबाइल ब्राउज़र, AR/VR हेडसेट पर कई ब्राउज़र शामिल हैं, लेकिन लुकिंग ग्लास डिस्प्ले, स्मार्ट ग्लास और अन्य उभरती हुई तकनीकें भी शामिल हैं।

:::tip USDZ/क्विक लुक के माध्यम से ऐप-मुक्त आईओएस एआर सपोर्ट हालांकि आईओएस डिवाइस में अभी तक आधिकारिक WebXR सपोर्ट नहीं है, नीडल एवरीवेयर एक्शन का उपयोग करके आईओएस पर एआर अनुभव बनाने का समर्थन करता है। अधिक जानकारी के लिए आईओएस सेक्शन देखें। आप समृद्ध, इंटरैक्टिव अनुभव बना सकते हैं जो आईओएस डिवाइस पर एआर में निर्बाध रूप से काम करते हैं, भले ही ऐप्पल ने प्रतिबंध लगा रखे हों।

जब आप आईओएस पर एआर मोड में प्रवेश करते हैं, तो नीडल आपके सीन को स्वचालित रूप से एक USDZ फ़ाइल में बदल देगा, जिसे बाद में ऐप्पल के क्विक लुक का उपयोग करके एआर में प्रदर्शित किया जाता है। ऑब्जेक्ट, मटेरियल, ऑडियो, एनीमेशन और एवरीवेयर एक्शन संरक्षित रहेंगे। :::

निम्न तालिका नीडल इंजन के साथ काम करने के लिए हमारे द्वारा सत्यापित किए गए कुछ डिवाइसों को सूचीबद्ध करती है। जब कोई नया डिवाइस आता है जो WebXR का समर्थन करता है, तो वह आपके ऐप के साथ तुरंत काम करेगा। यह ब्राउज़र को प्लेटफ़ॉर्म के रूप में बनाने का एक बड़ा फायदा है – अनुकूलता डिवाइस या एसडीके के विशिष्ट सेट तक सीमित नहीं है।

हेडसेट डिवाइस	ब्राउज़र	नोट्स
Apple Vision Pro	✔️ Safari	हैंड ट्रैकिंग, ट्रांजिएंट पॉइंटर के लिए समर्थन
Meta Quest 3	✔️ Meta Browser	हैंड ट्रैकिंग, सेशनग्रांटेड1, पासथ्रू, डेप्थ सेंसिंग, मेश ट्रैकिंग के लिए समर्थन
Meta Quest 3S	✔️ Meta Browser	हैंड ट्रैकिंग, सेशनग्रांटेड1, पासथ्रू, डेप्थ सेंसिंग, मेश ट्रैकिंग के लिए समर्थन
Meta Quest 2	✔️ Meta Browser	हैंड ट्रैकिंग, सेशनग्रांटेड1, पासथ्रू (ब्लैक एंड व्हाइट) के लिए समर्थन
Meta Quest 1	✔️ Meta Browser	हैंड ट्रैकिंग, सेशनग्रांटेड1 के लिए समर्थन
Meta Quest Pro	✔️ Meta Browser	हैंड ट्रैकिंग, सेशनग्रांटेड1, पासथ्रू के लिए समर्थन
Pico Neo 4	✔️ Pico Browser	पासथ्रू, हैंड ट्रैकिंग2
Pico Neo 3	✔️ Pico Browser	कोई हैंड ट्रैकिंग नहीं, इन्वर्टेड कंट्रोलर थंबस्टिक
Oculus Rift 1/2	✔️ Chrome
Valve Index	✔️ Chrome
HTC Vive	✔️ Chrome
Hololens 2	✔️ Edge	हैंड ट्रैकिंग, एआर और वीआर के लिए समर्थन (वीआर मोड में, बैकग्राउंड भी रेंडर किया जाता है)

मोबाइल डिवाइस	ब्राउज़र	नोट्स
Android 10+	✔️ Chrome
Android 10+	✔️ Firefox
iOS 15+	(✔️)3 Safari (✔️)3 Chrome	कोई पूर्ण कोड सपोर्ट नहीं, लेकिन नीडल एवरीवेयर एक्शन डायनामिक, इंटरैक्टिव USDZ फ़ाइलें बनाने के लिए समर्थित हैं।
iOS 15+	✔️ WebXR Viewer	ब्राउज़र अब थोड़ा पुराना है
Hololens 2	✔️ Edge
Hololens 1	❌	कोई WebXR सपोर्ट नहीं
Magic Leap 2	✔️
Magic Leap 1	✔️	अप्रचलित डिवाइस

अन्य डिवाइस	ब्राउज़र	नोट्स
Looking Glass Holographic Display	✔️ Chrome	लुकिंग ग्लास ब्रिज और कुछ कस्टम कोड की आवश्यकता है, हमारा सैंपल देखें
Logitech MX Ink	✔️ Meta Browser	आधिकारिक तौर पर समर्थित, दस्तावेज़ देखें

¹: एक ब्राउज़र फ़्लैग सक्षम करने की आवश्यकता है: chrome://flags/#webxr-navigation-permission²: डेवलपर सेटिंग में एक टॉगल सक्षम करने की आवश्यकता है³: एवरीवेयर एक्शन या अन्य तरीकों का उपयोग करता है

वीआर, एआर और क्विक लुक उदाहरण

कई इंटरैक्टिव उदाहरणों को अभी आज़माने के लिए हमारे नीडल इंजन सैंपल पर जाएँ। या, नीचे दिए गए क्यूआर कोड (फोन के लिए) या ओपन ऑन क्वेस्ट (मेटा क्वेस्ट हेडसेट के लिए) बटन पर क्लिक करके इसे अपने डिवाइस पर लाइव आज़माएँ।

किसी सीन में वीआर और एआर क्षमताएं जोड़ना

नीडल इंजन में एआर, वीआर और नेटवर्किंग क्षमताएं मॉड्यूलर होने के लिए डिज़ाइन की गई हैं। आप उनमें से किसी का भी समर्थन न करने का विकल्प चुन सकते हैं, या केवल विशिष्ट सुविधाएँ जोड़ सकते हैं।

बुनियादी क्षमताएँ

1. एआर और वीआर सक्षम करें एक WebXR कंपोनेंट जोड़ें।वैकल्पिक: आप अवतार प्रीफ़ैब का संदर्भ देकर एक कस्टम अवतार सेट कर सकते हैं। डिफ़ॉल्ट रूप से, एक बुनियादी DefaultAvatar असाइन किया जाता है।

2. टेलीपोर्टेशन सक्षम करें ऑब्जेक्ट पदानुक्रम में एक TeleportTarget कंपोनेंट जोड़ें जिन पर टेलीपोर्ट किया जा सकता है। विशिष्ट ऑब्जेक्ट को बाहर करने के लिए, उनकी लेयर को IgnoreRaycasting पर सेट करें।

मल्टीप्लेयर

1. नेटवर्किंग सक्षम करें एक SyncedRoom कंपोनेंट जोड़ें।

2. डेस्कटॉप व्यूअर सिंक सक्षम करें एक SyncedCamera कंपोनेंट जोड़ें।

3. वॉयस चैट सक्षम करें एक VoIP कंपोनेंट जोड़ें।

:::tip सीन संरचना ये कंपोनेंट आपकी पदानुक्रम के अंदर कहीं भी हो सकते हैं। वे सभी एक ही GameObject पर भी हो सकते हैं, जो एक सामान्य पैटर्न है। :::

कैसल बिल्डर क्रॉस-प्लेटफ़ॉर्म मल्टीप्लेयर सैंडबॉक्स अनुभव के लिए उपरोक्त सभी का उपयोग करता है। — #madebyneedle 💚

विशेष एआर कंपोनेंट

1. एआर सेशन रूट और स्केल परिभाषित करें अपनी रूट ऑब्जेक्ट में एक WebARSessionRoot कंपोनेंट जोड़ें। एआर अनुभवों के लिए, अक्सर आप सीन को वास्तविक दुनिया में फ़िट करने के लिए स्केल करना चाहते हैं।

2. उपयोगकर्ता स्केल को परिभाषित करें ताकि एआर में प्रवेश करते समय उपयोगकर्ता को सीन के संबंध में सिकोड़ें (< 1) या बड़ा (> 1) करें।

एक्सआर के लिए ऑब्जेक्ट डिस्प्ले को नियंत्रित करना

1. परिभाषित करें कि कोई ऑब्जेक्ट ब्राउज़र, एआर, वीआर, फर्स्ट पर्सन, थर्ड पर्सन में दिखाई दे रहा है या नहीं आप जिस ऑब्जेक्ट को नियंत्रित करना चाहते हैं, उसमें एक XR Flag कंपोनेंट जोड़ें।

2. आवश्यकतानुसार ड्रॉपडाउन पर विकल्प बदलें। सामान्य उपयोग के मामले हैं

   • एआर में प्रवेश करते समय फर्श छिपाना

   • फर्स्ट या थर्ड पर्सन व्यू में अवतार के हिस्से छिपाना। उदाहरण के लिए, फर्स्ट-पर्सन व्यू में किसी व्यक्ति को अपना सिर मॉडल नहीं दिखना चाहिए।

वीआर दुनिया के बीच यात्रा करना

नीडल इंजन sessiongranted स्थिति का समर्थन करता है। यह उपयोगकर्ताओं को एक इमर्सिव सेशन छोड़े बिना WebXR एप्लिकेशन के बीच निर्बाध रूप से यात्रा करने की अनुमति देता है – वे वीआर या एआर में बने रहते हैं।

वर्तमान में, यह केवल ओकुलस क्वेस्ट 1, 2 और 3 पर ओकुलस ब्राउज़र में समर्थित है। अन्य प्लेटफ़ॉर्म पर, उपयोगकर्ताओं को उनके वर्तमान इमर्सिव सेशन से बाहर निकाल दिया जाएगा और नए पेज पर फिर से वीआर में प्रवेश करना होगा। एक ब्राउज़र फ़्लैग सक्षम करने की आवश्यकता है: chrome://flags/#webxr-navigation-permission

• लिंक खोलने के लिए ऑब्जेक्ट पर क्लिक करेंOpenURL कंपोनेंट जोड़ें जो कनेक्टेड दुनिया बनाना बहुत आसान बनाता है।

स्क्रिप्टिंग

एक्सआर के लिए स्क्रिप्टिंग के बारे में अधिक जानकारी स्क्रिप्टिंग एक्सआर दस्तावेज़ीकरण में पढ़ें

अवतार

हालांकि हम वर्तमान में बाहरी अवतार सिस्टम के लिए आउट-ऑफ-द-बॉक्स इंटीग्रेशन प्रदान नहीं करते हैं, आप एप्लिकेशन-विशिष्ट अवतार या कस्टम सिस्टम बना सकते हैं।

• एक कस्टम अवतार बनाएँ

  • अवतार रूट के रूप में एक खाली GameObject बनाएँ

  • Head नामक एक ऑब्जेक्ट जोड़ें और एक XRFlag जोड़ें जिसे थर्ड पर्सन पर सेट किया गया है

  • HandLeft और HandRight नामक ऑब्जेक्ट जोड़ें

  • इन ऑब्जेक्ट के नीचे अपने ग्राफिक्स जोड़ें।

प्रायोगिक अवतार कंपोनेंट

अधिक अभिव्यंजक अवतार बनाने के लिए कई प्रायोगिक कंपोनेंट हैं। इस बिंदु पर हम उन्हें डुप्लिकेट करके अपने स्वयं के वैरिएंट बनाने की सलाह देते हैं, क्योंकि उन्हें बाद में बदला या हटाया जा सकता है।

बेसिक गर्दन मॉडल और अंग बाधाओं के साथ अवतार रिग उदाहरण

• रैंडम प्लेयर रंग अवतार अनुकूलन के उदाहरण के रूप में, आप अपने रेंडरर्स में एक PlayerColor कंपोनेंट जोड़ सकते हैं। यह रैंडमाइज्ड रंग खिलाड़ियों के बीच सिंक्रनाइज्ड होता है।

• आँखों का घूमनाAvatarEyeLook_Rotation GameObjects (आँखों) को अन्य अवतारों और एक रैंडम लक्ष्य का अनुसरण करने के लिए घुमाता है। यह कंपोनेंट खिलाड़ियों के बीच सिंक्रनाइज्ड होता है।

• आँखें झपकनाAvatarBlink_Simple यादृच्छिक रूप से GameObjects (आँखों) को हर कुछ सेकंड में छिपाता है, जो पलक झपकने का अनुकरण करता है।

उदाहरण अवतार प्रीफ़ैब पदानुक्रम

• ऑफ़सेट बाधाOffsetConstraint अवतार स्पेस में किसी ऑब्जेक्ट को दूसरे के संबंध में स्थानांतरित करने की अनुमति देता है। यह, उदाहरण के लिए, बॉडी को हेड का अनुसरण करने की अनुमति देता है, लेकिन रोटेशन को समतल रखता है। यह सरल गर्दन मॉडल बनाने की भी अनुमति देता है।

• अंग बाधाBasicIKConstraint एक बहुत ही न्यूनतम बाधा है जो दो ट्रांसफॉर्म और एक संकेत लेती है। यह सरल बांह या पैर की चेन बनाने के लिए उपयोगी है। चूंकि रोटेशन वर्तमान में ठीक से लागू नहीं है, इसलिए हाथों और पैरों को "सही दिखने" के लिए घूर्णी रूप से सममित होने की आवश्यकता हो सकती है। इसे किसी कारण से "बेसिक" कहा जाता है!

एआर में HTML सामग्री ओवरले

यदि आप अलग-अलग html सामग्री प्रदर्शित करना चाहते हैं, भले ही क्लाइंट एक नियमित ब्राउज़र का उपयोग कर रहा हो या एआर या वीआर का उपयोग कर रहा हो, तो आप बस html क्लास का एक सेट उपयोग कर सकते हैं। यह HTML तत्व क्लास के माध्यम से नियंत्रित होता है। उदाहरण के लिए, डेस्कटॉप और एआर पर सामग्री दिखाई देने के लिए <needle-engine> टैग के अंदर एक <div class="desktop ar"> ... </div> जोड़ें:

<needle-engine>
    <div class="desktop ar" style="pointer-events:none;">
        <div class="positioning-container">
          <p>एआर और डेस्कटॉप के लिए आपकी सामग्री यहाँ आती है</p>
          <p class="only-in-ar">यह केवल एआर में दिखाई देगा</p>
        <div>
    </div>
</needle-engine>

सामग्री ओवरले वैकल्पिक dom-overlay सुविधा का उपयोग करके लागू किए जाते हैं जो आमतौर पर स्क्रीन-आधारित एआर डिवाइस (फोन, टैबलेट) पर समर्थित होता है।

एआर में रहते हुए विशिष्ट सामग्री दिखाने/छिपाने के लिए .ar-session-active क्लास का उपयोग करें। :xr-overlay छद्म वर्ग का इस बिंदु पर उपयोग नहीं किया जाना चाहिए क्योंकि इसका उपयोग मोज़िला के WebXR व्यूअर को तोड़ता है।

.only-in-ar {
  display: none;
}

.ar-session-active .only-in-ar {
  display:initial;
}

यह ध्यान देने योग्य है कि ओवरले तत्व एक्सआर में रहते हुए हमेशा फुलस्क्रीन प्रदर्शित होगा, लागू की गई स्टाइलिंग से स्वतंत्र। यदि आप आइटमों को अलग तरह से संरेखित करना चाहते हैं, तो आपको class="ar" तत्व के अंदर एक कंटेनर बनाना चाहिए।

आईओएस पर ऑगमेंटेड रियलिटी और वेबएक्सआर

आईओएस डिवाइस पर ऑगमेंटेड रियलिटी अनुभव कुछ हद तक सीमित हैं, क्योंकि ऐप्पल वर्तमान में आईओएस डिवाइस पर वेबएक्सआर का समर्थन नहीं कर रहा है।

नीडल इंजन के एवरीवेयर एक्शन उस अंतर को भरने के लिए डिज़ाइन किए गए हैं, जो विशिष्ट कंपोनेंट से बने सीन के लिए आईओएस डिवाइस में स्वचालित इंटरैक्टिव क्षमताएं लाते हैं। वे कार्यक्षमता के एक उपसमुच्चय का समर्थन करते हैं जो वेबएक्सआर में उपलब्ध है, उदाहरण के लिए स्थानिक ऑडियो, इमेज ट्रैकिंग, एनीमेशन, और बहुत कुछ। अधिक जानकारी के लिए दस्तावेज़ देखें।

:::tip क्विक लुक में सीमित कस्टम कोड सपोर्ट ऐप्पल ने क्विक लुक में किस प्रकार की सामग्री का उपयोग किया जा सकता है, इस पर कड़ी सीमाएँ लागू की हैं। इस प्रकार, कस्टम स्क्रिप्ट कंपोनेंट स्वचालित रूप से आईओएस पर एआर में उपयोग के लिए कनवर्ट नहीं किए जा सकते हैं। आप हमारे एवरीवेयर एक्शन एपीआई का उपयोग करके कुछ प्रकार के कस्टम कोड के लिए समर्थन जोड़ सकते हैं। :::

संगीत वाद्ययंत्र – वेबएक्सआर और क्विक लुक समर्थन

यहाँ एक संगीत वाद्ययंत्र का एक उदाहरण दिया गया है जो एवरीवेयर एक्शन का उपयोग करता है और इस प्रकार ब्राउज़र और आईओएस डिवाइस पर एआर में काम करता है। यह स्थानिक ऑडियो, एनीमेशन और टैप इंटरैक्शन का उपयोग करता है।

एवरीवेयर एक्शन और आईओएस एआर के लिए अन्य विकल्प

आईओएस उपयोगकर्ताओं को और भी अधिक सक्षम इंटरैक्टिव एआर अनुभवों के लिए निर्देशित करने के अन्य विकल्प भी हैं:

1. सामग्री को तत्काल USDZ फ़ाइलों के रूप में निर्यात करना। इन फ़ाइलों को आईओएस डिवाइस पर एआर में प्रदर्शित किया जा सकता है। एवरीवेयर एक्शन वाले सीन से निर्यात किए जाने पर इंटरैक्टिविटी समान होती है, जो उत्पाद कॉन्फ़िगररेटर, कथात्मक अनुभव और इसी तरह के लिए पर्याप्त से अधिक है। इसका एक उदाहरण कैसल बिल्डर है जहां रचनाओं (लाइव सेशन नहीं) को एआर में देखा जा सकता है।

एन्क्रिप्शन इन स्पेस इस दृष्टिकोण का उपयोग करता है। खिलाड़ी अपनी स्क्रीन पर सीन में सहयोगात्मक रूप से टेक्स्ट रख सकते हैं और फिर आईओएस पर एआर में परिणाम देख सकते हैं। एंड्रॉइड पर, वे सीधे वेबएक्सआर में भी इंटरैक्ट कर सकते हैं। — #madewithneedle बाय काट्या रेम्पेल 💚

1. आईओएस पर वेबएक्सआर-संगत ब्राउज़र की ओर उपयोगकर्ताओं को निर्देशित करना। आपके लक्ष्य दर्शकों के आधार पर, आप आईओएस पर उपयोगकर्ताओं को एआर का अनुभव करने के लिए, उदाहरण के लिए मोज़िला के WebXR व्यूअर की ओर निर्देशित कर सकते हैं।

2. आईओएस डिवाइस पर कैमरा एक्सेस और कस्टम एल्गोरिदम का उपयोग करना। कैमरा इमेज एक्सेस का अनुरोध किया जा सकता है और डिवाइस पोज निर्धारित करने के लिए कस्टम एल्गोरिदम चलाए जा सकते हैं। जबकि हम वर्तमान में इसके लिए अंतर्निहित कंपोनेंट प्रदान नहीं करते हैं, यहाँ लाइब्रेरी और फ्रेमवर्क के कुछ संदर्भ दिए गए हैं जिन्हें हम भविष्य में आज़माना चाहते हैं:

   • AR.js (ओपन सोर्स)

     • फायरड्रैगनगेमस्टूडियो द्वारा प्रायोगिक AR.js इंटीग्रेशन

   • Mind AR (ओपन सोर्स)

   • 8th Wall (व्यावसायिक)

इमेज ट्रैकिंग

नीडल इंजन एंड्रॉइड पर WebXR इमेज ट्रैकिंग (लाइव डेमो) और आईओएस पर क्विक लुक इमेज ट्रैकिंग का समर्थन करता है।

आप एवरीवेयर एक्शन सेक्शन में अतिरिक्त दस्तावेज़ीकरण पा सकते हैं।

:::warning WebXR इमेज ट्रैकिंग अभी भी "ड्राफ्ट" चरण में है और आमतौर पर उपलब्ध नहीं है अब तक, ब्राउज़र विक्रेता WebXR के लिए अंतिम इमेज ट्रैकिंग एपीआई पर सहमत नहीं हो पाए हैं। जब तक स्पेसिफिकेशन "ड्राफ्ट" चरण में है (मार्कर ट्रैकिंग एक्सप्लेनर), आपको और आपके ऐप के उपयोगकर्ताओं को एंड्रॉइड डिवाइस पर WebXR ImageTracking सक्षम करने के लिए इन चरणों का पालन करना होगा:

1. अपने एंड्रॉइड क्रोम ब्राउज़र पर chrome://flags पर जाएँ

2. WebXR Incubations विकल्प खोजें और सक्षम करें :::

उस स्पेसिफिकेशन के बिना, अभी भी कैमरा इमेज एक्सेस का अनुरोध किया जा सकता है और डिवाइस पोज निर्धारित करने के लिए कस्टम एल्गोरिदम चलाए जा सकते हैं। नुकसान यह है कि उपयोगकर्ताओं को कैमरा एक्सेस जैसी अतिरिक्त अनुमतियाँ स्वीकार करनी होंगी, और ट्रैकिंग डिवाइस की मूल क्षमताओं जितनी सटीक नहीं होगी।

यहां कैमरा एक्सेस और स्थानीय कंप्यूटर विजन एल्गोरिदम के आधार पर इमेज ट्रैकिंग जोड़ने के लिए कुछ लाइब्रेरी दी गई हैं:

• फायरड्रैगनगेमस्टूडियो द्वारा नीडल इंजन के साथ प्रायोगिक AR.js इंटीग्रेशन

• AR.js (ओपन सोर्स)

• Mind AR (ओपन सोर्स)

संदर्भ

WebXR डिवाइस एपीआईकैन्यूस: WebXRऐप्पल के प्रारंभिक USD व्यवहार

---

पेज का अनुवाद AI द्वारा स्वचालित रूप से किया गया है