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

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

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

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

¹: एक ब्राउज़र फ़्लैग सक्षम करने की आवश्यकता है: 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 कंपोनेंट जोड़ें।

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 में उपलब्ध है, उदाहरण के लिए स्थानिक ऑडियो, इमेज ट्रैकिंग, एनीमेशन, और बहुत कुछ। अधिक जानकारी के लिए दस्तावेज़ देखें।

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

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

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

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

3. सामग्री को तत्काल 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 इमेज ट्रैकिंग पेज पर अतिरिक्त दस्तावेज़ीकरण पा सकते हैं।

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

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

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

संदर्भ

WebXR डिवाइस APICaniuse: WebXRApple's initial USD behavior

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