VR और AR (WebXR)

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

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

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

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

जब आप iOS पर AR मोड में प्रवेश करते हैं, तो Needle आपके सीन को स्वचालित रूप से एक USDZ फ़ाइल में बदल देगा, जिसे बाद में Apple के QuickLook का उपयोग करके AR में प्रदर्शित किया जाता है। ऑब्जेक्ट, मटेरियल, ऑडियो, एनीमेशन और Everywhere Actions संरक्षित रहेंगे। :::

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

हेडसेट डिवाइस	ब्राउज़र	नोट्स
Apple Vision Pro	✔️ Safari	हैंड ट्रैकिंग, ट्रांजिएंट पॉइंटर के लिए समर्थन
Meta Quest 3	✔️ Meta Browser	हैंड ट्रैकिंग, sessiongranted1, पासथ्रू, डेप्थ सेंसिंग, मेश ट्रैकिंग के लिए समर्थन
Meta Quest 3S	✔️ Meta Browser	हैंड ट्रैकिंग, sessiongranted1, पासथ्रू, डेप्थ सेंसिंग, मेश ट्रैकिंग के लिए समर्थन
Meta Quest 2	✔️ Meta Browser	हैंड ट्रैकिंग, sessiongranted1, पासथ्रू (ब्लैक एंड व्हाइट) के लिए समर्थन
Meta Quest 1	✔️ Meta Browser	हैंड ट्रैकिंग, sessiongranted1 के लिए समर्थन
Meta Quest Pro	✔️ Meta Browser	हैंड ट्रैकिंग, sessiongranted1, पासथ्रू के लिए समर्थन
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	हैंड ट्रैकिंग, AR और VR के लिए समर्थन (VR मोड में, बैकग्राउंड भी रेंडर किया जाता है)

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

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

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

VR, AR और QuickLook उदाहरण

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

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

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

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

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

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

मल्टीप्लेयर

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

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

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

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

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

विशेष AR कंपोनेंट

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

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

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

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

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

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

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

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

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

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

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

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

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

अवतार

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

iOS पर ऑगमेंटेड रियलिटी और WebXR

iOS डिवाइस पर ऑगमेंटेड रियलिटी अनुभव कुछ हद तक सीमित हैं, क्योंकि Apple वर्तमान में iOS डिवाइस पर WebXR का समर्थन नहीं कर रहा है।

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

:::tip QuickLook में सीमित कस्टम कोड सपोर्ट Apple ने QuickLook में किस प्रकार की सामग्री का उपयोग किया जा सकता है, इस पर कड़ी सीमाएँ लागू की हैं। इस प्रकार, कस्टम स्क्रिप्ट कंपोनेंट स्वचालित रूप से iOS पर AR में उपयोग के लिए कनवर्ट नहीं किए जा सकते हैं। आप हमारे Everywhere Actions API का उपयोग करके कुछ प्रकार के कस्टम कोड के लिए समर्थन जोड़ सकते हैं। :::

संगीत वाद्ययंत्र – WebXR और QuickLook समर्थन

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

Everywhere Actions और iOS AR के लिए अन्य विकल्प

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

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

Encryption in Space इस दृष्टिकोण का उपयोग करता है। खिलाड़ी अपनी स्क्रीन पर सीन में सहयोगात्मक रूप से टेक्स्ट रख सकते हैं और फिर iOS पर AR में परिणाम देख सकते हैं। Android पर, वे सीधे WebXR में भी इंटरैक्ट कर सकते हैं। — #madewithneedle बाय Katja Rempel 💚

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

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

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

     • FireDragonGameStudio द्वारा प्रायोगिक AR.js इंटीग्रेशन

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

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

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

Needle Engine एंड्रॉइड पर WebXR इमेज ट्रैकिंग (लाइव डेमो) और iOS पर QuickLook इमेज ट्रैकिंग का समर्थन करता है।

आप WebXR इमेज ट्रैकिंग पेज पर अतिरिक्त दस्तावेज़ीकरण पा सकते हैं।

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

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

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

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

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

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

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

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

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

संदर्भ

WebXR डिवाइस API Caniuse: WebXR Apple's initial USD behavior

---

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