VR & AR (WebXR)
Last updated
Last updated
नीडल इंजन का पूरी तरह से समर्थन करता है, जिसमें 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
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
नीडल इंजन में एआर, वीआर और नेटवर्किंग क्षमताएं मॉड्यूलर होने के लिए डिज़ाइन की गई हैं। आप उनमें से किसी का भी समर्थन न करने का विकल्प चुन सकते हैं, या केवल विशिष्ट सुविधाएँ जोड़ सकते हैं।
टेलीपोर्टेशन सक्षम करें
ऑब्जेक्ट पदानुक्रम में एक TeleportTarget कंपोनेंट जोड़ें जिन पर टेलीपोर्ट किया जा सकता है।
विशिष्ट ऑब्जेक्ट को बाहर करने के लिए, उनकी लेयर को IgnoreRaycasting पर सेट करें।
नेटवर्किंग सक्षम करें
एक SyncedRoom कंपोनेंट जोड़ें।
डेस्कटॉप व्यूअर सिंक सक्षम करें
एक SyncedCamera कंपोनेंट जोड़ें।
वॉयस चैट सक्षम करें
एक VoIP कंपोनेंट जोड़ें।
:::tip सीन संरचना ये कंपोनेंट आपकी पदानुक्रम के अंदर कहीं भी हो सकते हैं। वे सभी एक ही GameObject पर भी हो सकते हैं, जो एक सामान्य पैटर्न है। :::
एआर सेशन रूट और स्केल परिभाषित करें
अपनी रूट ऑब्जेक्ट में एक WebARSessionRoot कंपोनेंट जोड़ें। एआर अनुभवों के लिए, अक्सर आप सीन को वास्तविक दुनिया में फ़िट करने के लिए स्केल करना चाहते हैं।
उपयोगकर्ता स्केल को परिभाषित करें ताकि एआर में प्रवेश करते समय उपयोगकर्ता को सीन के संबंध में सिकोड़ें (< 1) या बड़ा (> 1) करें।
परिभाषित करें कि कोई ऑब्जेक्ट ब्राउज़र, एआर, वीआर, फर्स्ट पर्सन, थर्ड पर्सन में दिखाई दे रहा है या नहीं
आप जिस ऑब्जेक्ट को नियंत्रित करना चाहते हैं, उसमें एक XR Flag कंपोनेंट जोड़ें।
आवश्यकतानुसार ड्रॉपडाउन पर विकल्प बदलें। सामान्य उपयोग के मामले हैं
एआर में प्रवेश करते समय फर्श छिपाना
फर्स्ट या थर्ड पर्सन व्यू में अवतार के हिस्से छिपाना। उदाहरण के लिए, फर्स्ट-पर्सन व्यू में किसी व्यक्ति को अपना सिर मॉडल नहीं दिखना चाहिए।
वर्तमान में, यह केवल ओकुलस क्वेस्ट 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 तत्व क्लास के माध्यम से नियंत्रित होता है। उदाहरण के लिए, डेस्कटॉप और एआर पर सामग्री दिखाई देने के लिए <needle-engine> टैग के अंदर एक <div class="desktop ar"> ... </div> जोड़ें:
सामग्री ओवरले वैकल्पिक dom-overlay सुविधा का उपयोग करके लागू किए जाते हैं जो आमतौर पर स्क्रीन-आधारित एआर डिवाइस (फोन, टैबलेट) पर समर्थित होता है।
आईओएस डिवाइस पर ऑगमेंटेड रियलिटी अनुभव कुछ हद तक सीमित हैं, क्योंकि ऐप्पल वर्तमान में आईओएस डिवाइस पर वेबएक्सआर का समर्थन नहीं कर रहा है।
:::tip क्विक लुक में सीमित कस्टम कोड सपोर्ट ऐप्पल ने क्विक लुक में किस प्रकार की सामग्री का उपयोग किया जा सकता है, इस पर कड़ी सीमाएँ लागू की हैं। इस प्रकार, कस्टम स्क्रिप्ट कंपोनेंट स्वचालित रूप से आईओएस पर एआर में उपयोग के लिए कनवर्ट नहीं किए जा सकते हैं। आप हमारे एवरीवेयर एक्शन एपीआई का उपयोग करके कुछ प्रकार के कस्टम कोड के लिए समर्थन जोड़ सकते हैं। :::
यहाँ एक संगीत वाद्ययंत्र का एक उदाहरण दिया गया है जो एवरीवेयर एक्शन का उपयोग करता है और इस प्रकार ब्राउज़र और आईओएस डिवाइस पर एआर में काम करता है। यह स्थानिक ऑडियो, एनीमेशन और टैप इंटरैक्शन का उपयोग करता है।
आईओएस उपयोगकर्ताओं को और भी अधिक सक्षम इंटरैक्टिव एआर अनुभवों के लिए निर्देशित करने के अन्य विकल्प भी हैं:
आईओएस डिवाइस पर कैमरा एक्सेस और कस्टम एल्गोरिदम का उपयोग करना। कैमरा इमेज एक्सेस का अनुरोध किया जा सकता है और डिवाइस पोज निर्धारित करने के लिए कस्टम एल्गोरिदम चलाए जा सकते हैं। जबकि हम वर्तमान में इसके लिए अंतर्निहित कंपोनेंट प्रदान नहीं करते हैं, यहाँ लाइब्रेरी और फ्रेमवर्क के कुछ संदर्भ दिए गए हैं जिन्हें हम भविष्य में आज़माना चाहते हैं:
अपने एंड्रॉइड क्रोम ब्राउज़र पर chrome://flags पर जाएँ
WebXR Incubations विकल्प खोजें और सक्षम करें
:::
उस स्पेसिफिकेशन के बिना, अभी भी कैमरा इमेज एक्सेस का अनुरोध किया जा सकता है और डिवाइस पोज निर्धारित करने के लिए कस्टम एल्गोरिदम चलाए जा सकते हैं। नुकसान यह है कि उपयोगकर्ताओं को कैमरा एक्सेस जैसी अतिरिक्त अनुमतियाँ स्वीकार करनी होंगी, और ट्रैकिंग डिवाइस की मूल क्षमताओं जितनी सटीक नहीं होगी।
यहां कैमरा एक्सेस और स्थानीय कंप्यूटर विजन एल्गोरिदम के आधार पर इमेज ट्रैकिंग जोड़ने के लिए कुछ लाइब्रेरी दी गई हैं:
पेज का अनुवाद AI द्वारा स्वचालित रूप से किया गया है
कोई पूर्ण कोड सपोर्ट नहीं, लेकिन नीडल डायनामिक, इंटरैक्टिव USDZ फ़ाइलें बनाने के लिए समर्थित हैं।
लुकिंग ग्लास ब्रिज और कुछ कस्टम कोड की आवश्यकता है,
आधिकारिक तौर पर समर्थित,
1: एक ब्राउज़र फ़्लैग सक्षम करने की आवश्यकता है: chrome://flags/#webxr-navigation-permission2: डेवलपर सेटिंग में एक टॉगल सक्षम करने की आवश्यकता है3: या का उपयोग करता है
कई इंटरैक्टिव उदाहरणों को अभी आज़माने के लिए हमारे पर जाएँ। या, नीचे दिए गए क्यूआर कोड (फोन के लिए) या ओपन ऑन क्वेस्ट (मेटा क्वेस्ट हेडसेट के लिए) बटन पर क्लिक करके इसे अपने डिवाइस पर लाइव आज़माएँ।
एआर और वीआर सक्षम करें
एक WebXR कंपोनेंट जोड़ें।वैकल्पिक: आप का संदर्भ देकर एक कस्टम अवतार सेट कर सकते हैं।
डिफ़ॉल्ट रूप से, एक बुनियादी DefaultAvatar असाइन किया जाता है।
क्रॉस-प्लेटफ़ॉर्म मल्टीप्लेयर सैंडबॉक्स अनुभव के लिए उपरोक्त सभी का उपयोग करता है। — #madebyneedle 💚
नीडल इंजन स्थिति का समर्थन करता है। यह उपयोगकर्ताओं को एक इमर्सिव सेशन छोड़े बिना WebXR एप्लिकेशन के बीच निर्बाध रूप से यात्रा करने की अनुमति देता है – वे वीआर या एआर में बने रहते हैं।
एक्सआर के लिए स्क्रिप्टिंग के बारे में अधिक जानकारी में पढ़ें
बेसिक गर्दन मॉडल और अंग बाधाओं के साथ अवतार रिग उदाहरण
उदाहरण अवतार प्रीफ़ैब पदानुक्रम
एआर में रहते हुए विशिष्ट सामग्री दिखाने/छिपाने के लिए .ar-session-active क्लास का उपयोग करें। का इस बिंदु पर उपयोग नहीं किया जाना चाहिए क्योंकि इसका उपयोग मोज़िला के WebXR व्यूअर को तोड़ता है।
यह ध्यान देने योग्य है कि ओवरले तत्व , लागू की गई स्टाइलिंग से स्वतंत्र। यदि आप आइटमों को अलग तरह से संरेखित करना चाहते हैं, तो आपको class="ar" तत्व के अंदर एक कंटेनर बनाना चाहिए।
नीडल इंजन के उस अंतर को भरने के लिए डिज़ाइन किए गए हैं, जो विशिष्ट कंपोनेंट से बने सीन के लिए आईओएस डिवाइस में स्वचालित इंटरैक्टिव क्षमताएं लाते हैं। वे कार्यक्षमता के एक उपसमुच्चय का समर्थन करते हैं जो वेबएक्सआर में उपलब्ध है, उदाहरण के लिए स्थानिक ऑडियो, इमेज ट्रैकिंग, एनीमेशन, और बहुत कुछ। अधिक जानकारी के लिए देखें।
सामग्री को तत्काल USDZ फ़ाइलों के रूप में निर्यात करना। इन फ़ाइलों को आईओएस डिवाइस पर एआर में प्रदर्शित किया जा सकता है। एवरीवेयर एक्शन वाले सीन से निर्यात किए जाने पर इंटरैक्टिविटी समान होती है, जो उत्पाद कॉन्फ़िगररेटर, कथात्मक अनुभव और इसी तरह के लिए पर्याप्त से अधिक है। इसका एक उदाहरण है जहां रचनाओं (लाइव सेशन नहीं) को एआर में देखा जा सकता है।
इस दृष्टिकोण का उपयोग करता है। खिलाड़ी अपनी स्क्रीन पर सीन में सहयोगात्मक रूप से टेक्स्ट रख सकते हैं और फिर आईओएस पर एआर में परिणाम देख सकते हैं। एंड्रॉइड पर, वे सीधे वेबएक्सआर में भी इंटरैक्ट कर सकते हैं। — #madewithneedle बाय काट्या रेम्पेल 💚
आईओएस पर वेबएक्सआर-संगत ब्राउज़र की ओर उपयोगकर्ताओं को निर्देशित करना। आपके लक्ष्य दर्शकों के आधार पर, आप आईओएस पर उपयोगकर्ताओं को एआर का अनुभव करने के लिए, उदाहरण के लिए मोज़िला के की ओर निर्देशित कर सकते हैं।
(ओपन सोर्स)
फायरड्रैगनगेमस्टूडियो द्वारा
(ओपन सोर्स)
(व्यावसायिक)
नीडल इंजन एंड्रॉइड पर WebXR इमेज ट्रैकिंग () और आईओएस पर क्विक लुक इमेज ट्रैकिंग का समर्थन करता है।
आप सेक्शन में अतिरिक्त दस्तावेज़ीकरण पा सकते हैं।
:::warning WebXR इमेज ट्रैकिंग अभी भी "ड्राफ्ट" चरण में है और आमतौर पर उपलब्ध नहीं है अब तक, ब्राउज़र विक्रेता WebXR के लिए अंतिम इमेज ट्रैकिंग एपीआई पर सहमत नहीं हो पाए हैं। जब तक स्पेसिफिकेशन "ड्राफ्ट" चरण में है (), आपको और आपके ऐप के उपयोगकर्ताओं को एंड्रॉइड डिवाइस पर WebXR ImageTracking सक्षम करने के लिए इन चरणों का पालन करना होगा:
फायरड्रैगनगेमस्टूडियो द्वारा
(ओपन सोर्स)
(ओपन सोर्स)
