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

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

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

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

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

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

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

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

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

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

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

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

मल्टीप्लेयर

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

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

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

कैसल बिल्डर क्रॉस-प्लेटफ़ॉर्म मल्टीप्लेयर सैंडबॉक्स अनुभव के लिए उपरोक्त सभी का उपयोग करता है। — #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" तत्व के अंदर एक कंटेनर बनाना चाहिए।

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

संदर्भ

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

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