वायर वाले एक्सआर के स्मार्ट ग्लास के लिए, वर्ल्ड ऐंकर वाले अनुभव बनाना

नमस्ते दोस्तों, Android डेवलपर समिट में Android XR ट्रैक के पहले सेशन में आपका स्वागत है.

- क्या बात है!

हमें यह देखकर बहुत खुशी हो रही है कि आप में से कई लोग Android XR के बारे में जानना चाहते हैं.

मेरा नाम यासमीन क्विंटाना एवजेन है. मेरे साथ पॉल हूवर और डेरेक ब्रिडी भी हैं. वे बातचीत के दौरान हमारे साथ शामिल होंगे.

इस सेशन में, Android XR के बारे में बताया जाएगा. साथ ही, यह भी बताया जाएगा कि Jetpack Compose Glimmer और ARCore for Jetpack XR की मदद से, रीयल-वर्ल्ड एक्सपीरियंस देने वाले ऐप्लिकेशन कैसे बनाए जा सकते हैं.

हालांकि, सबसे पहले Android XR के बारे में थोड़ी जानकारी लेते हैं.

Android XR एक नया प्लैटफ़ॉर्म है. यह उपयोगकर्ताओं को आपके ऐप्लिकेशन के साथ इंटरैक्ट करने का एक नया तरीका देता है. इससे वे स्क्रीन से आगे बढ़कर, अपने आस-पास के स्पेस में ऐप्लिकेशन का इस्तेमाल कर पाते हैं.

हमने इस प्लैटफ़ॉर्म को इस तरह डिज़ाइन किया है कि डिजिटल अनुभव को सीधे तौर पर असल दुनिया में लाया जा सके.

चाहे वह असल दुनिया में मौजूद चीज़ों को बेहतर बनाने वाले ओवरले हों या इमर्सिव एनवायरमेंट.

यह वही ओपन Android ईकोसिस्टम है जिसे हम सालों से मिलकर बना रहे हैं. अब यह कैनवस, कमरे जितना बड़ा और आपकी कल्पनाओं जितना विशाल हो गया है.

हम एक्सआर को डिवाइसों के एक स्पेक्ट्रम के तौर पर देखते हैं. इसमें इंटेलिजेंट आईवियर से लेकर इमर्सिव हेडसेट और वायर वाले एक्सआर के स्मार्ट ग्लास तक शामिल हैं. इंटेलिजेंट आईवियर, ऑडियो और डिसप्ले ग्लास पर हल्का और बेहतर अनुभव देते हैं. वहीं, इमर्सिव हेडसेट और वायर वाले एक्सआर के स्मार्ट ग्लास, फ़ोकस, प्रॉडक्टिविटी, और इमर्सिव एंटरटेनमेंट की सुविधाएं देते हैं.

Android XR की सुविधा वाला सबसे नया डिवाइस, XREAL AURA है. इसे आज से खरीदा जा सकता है.

यह डिवाइस हल्का और दमदार है. यह Android की तरह ही एक्सआर का अनुभव देता है.

इस प्लैटफ़ॉर्म के लिए हमारा मकसद यह है कि अगर आपने पहले से ही Android के लिए ऐप्लिकेशन बनाए हैं, तो आपके पास एक्सआर के लिए ऐप्लिकेशन बनाने की सुविधा भी हो.

हम चाहते हैं कि आप Android XR पर आसानी से ऐप्लिकेशन बना सकें. इसके लिए, हम आपको वही ऐप्लिकेशन मॉडल, लाइब्रेरी, और टूल उपलब्ध कराते हैं जिनका इस्तेमाल आप पहले से कर रहे हैं.

Android के साथ काम करने वाला आपका मौजूदा 2D ऐप्लिकेशन, Android XR हेडसेट और वायर वाले XR ग्लास पर काम करेगा. इसके लिए, आपको ऐप्लिकेशन में कुछ बदलाव करने होंगे या हो सकता है कि कोई बदलाव न करना पड़े.

एक्सआर प्लैटफ़ॉर्म पर शानदार अनुभव देने के लिए, हम खास तौर पर इस प्लैटफ़ॉर्म के लिए बनाई गई लाइब्रेरी का सेट उपलब्ध कराते हैं.

अगर आप ऐसे डेवलपर हैं जो पहले से ही अन्य इमर्सिव प्लैटफ़ॉर्म पर ऐप्लिकेशन बनाते हैं, तो OpenXR और हमारे 3D इंजन की मदद से ऐप्लिकेशन बनाए जा सकते हैं. जैसे, Unity, Godot, और Unreal.

चलिए, Android लाइब्रेरी की मदद से ऐप्लिकेशन बनाने के बारे में बात करते हैं.

हम Jetpack XR SDK उपलब्ध कराते हैं. यह Kotlin लाइब्रेरी का एक सेट है. इसकी मदद से, अपने ऐप्लिकेशन को एक्सआर पर उपलब्ध कराया जा सकता है, ताकि उपयोगकर्ताओं को इमर्सिव और ऑगमेंटेड अनुभव मिल सके.

आइए, हमारी इमर्सिव लाइब्रेरी पर एक नज़र डालते हैं.

इस साल, हमारी Jetpack XR लाइब्रेरी का बीटा और स्टेबल वर्शन लॉन्च किया गया है. इससे आपको इमर्सिव एक्सआर अनुभव बनाने में मदद मिलेगी.

परसेप्शन लेयर, Jetpack XR के लिए ARCore है.

यह लाइब्रेरी, असल दुनिया के बारे में जानकारी देती है. जैसे, टेबल जैसी सपाट सतहें कहां हैं और उपयोगकर्ताओं के हाथ किस पोज़िशन में हैं.

यह 3D स्पेस में पॉइंट ट्रैक कर सकता है. साथ ही, सही अनुमतियां मिलने पर ऐप्लिकेशन को यह जानकारी दे सकता है.

इसके बाद, Jetpack XR SceneCore आता है. यह आपके स्पेशल कॉन्टेंट को दिखाने के लिए, सीन ग्राफ़ उपलब्ध कराता है.

यह लाइब्रेरी, 3D स्पेस में इकाइयों को दिखा सकती है. साथ ही, सीन ग्राफ़ को सटीक तरीके से प्लेस करने के लिए, स्पेशल बिहेवियर उपलब्ध कराती है.

साथ ही, Jetpack Compose for XR, नए सबस्पेस कंपोज़ेबल उपलब्ध कराता है. इन्हें खास तौर पर 3D के लिए बनाया गया है.

जो Android डेवलपर पहले से ही कंपोज़ लेआउट के बारे में जानते हैं, जैसे कि पंक्तियों और कॉलम के साथ लेआउट बनाना, उन्हें स्पेशल यूआई लेआउट बनाना आसान लगेगा.

स्पेशल रो बनाकर, कई स्पेशल पैनल को एक साथ लेआउट किया जा सकता है. इसके लिए, आपको उनकी पोज़िशन या साइज़ का हिसाब मैन्युअल तरीके से लगाने की ज़रूरत नहीं है.

स्पेशल पैनल या ऑर्बिटर जैसे सबस्पेस कंपोज़ेबल का इस्तेमाल करके, 2D कॉम्पोनेंट को इस नए 3D स्पेस में आसानी से जोड़ा जा सकता है.

ज़ाहिर है, सबस्पेस कंपोज़ेबल सिर्फ़ 2D कॉन्टेंट दिखाने के लिए नहीं हैं.

Compose for XR, स्पेशल एक्सटर्नल सरफ़ेस और स्पेशल glTF मॉडल की मदद से, स्पेशल वीडियो और 3D मॉडल के साथ काम करता है.

अब बात करते हैं ऑगमेंटेड ऐप्लिकेशन की.

Jetpack Projected लाइब्रेरी की मदद से, अपने मौजूदा मोबाइल ऐप्लिकेशन को बेहतर बनाया जा सकता है. इससे, स्मार्ट आईवियर हार्डवेयर का इस्तेमाल किया जा सकता है. जैसे, सेंसर और डिसप्ले.

आखिर में, Jetpack Compose Glimmer, एक यूज़र इंटरफ़ेस (यूआई) टूलकिट है. इसका इस्तेमाल करके, स्मार्ट ग्लास के लिए ऑप्टिमाइज़ किए गए Android XR अनुभव बनाए जा सकते हैं.

Jetpack Compose Glimmer में, एक्सआर अनुभव बनाने के लिए स्टाइल और इस्तेमाल के लिए तैयार कॉम्पोनेंट शामिल हैं.

हमने पिछले साल Glimmer लॉन्च किया था. इसके बाद से, हम इसकी क्षमताओं को लगातार बढ़ा रहे हैं. इसमें एजेंटिक स्किल भी शामिल है. इसकी मदद से, Glimmer का इस्तेमाल करके डिसप्ले ग्लास के लिए ऐप्लिकेशन बनाए जा सकते हैं.

android skills add display-glasses-with-jetpack-compose-glimmer

लॉन्च के बाद से, हम आपके सुझावों पर लगातार गौर करते आए हैं.

हमें पता चला है कि आपको Jetpack Compose Glimmer का इस्तेमाल, स्मार्ट आईवियर के अलावा अन्य डिवाइसों पर भी करना है.

हमें यह बताते हुए खुशी हो रही है कि हमने Glimmer के साथ, स्पेस में ऐंकर किए गए आपके अनुभवों को बेहतर बनाने के लिए बदलाव किए हैं. इनके बारे में हम इस बातचीत में आगे बात करेंगे.

Glimmer को ऑप्टिमाइज़ करने के लिए, हमने एक नया प्लैटफ़ॉर्म बनाया. इससे Glimmer को एक्सआर के अलग-अलग फ़ॉर्म फ़ैक्टर पर दिखाया जा सकता है. जैसे, डिसप्ले से लेकर वायर वाले एक्सआर स्मार्ट ग्लास तक.

इस नए प्लैटफ़ॉर्म के जुड़ने से, आपको अपने यूज़र इंटरफ़ेस (यूआई) को पसंद के मुताबिक बनाने के लिए ज़्यादा विकल्प मिलते हैं.

साथ ही, आपके ऐप्लिकेशन के ब्रैंड को अलग पहचान देने के लिए, हमने Glimmer कॉम्पोनेंट में पसंद के मुताबिक रंग जोड़ने की सुविधा जोड़ी है.

अपने एक्सआर ऐप्लिकेशन में अपने ब्रैंड की स्टाइल दिखाने के लिए, इनका इस्तेमाल करें.

हमारी Jetpack Compose Glimmer लाइब्रेरी में हेल्पर फ़ंक्शन उपलब्ध हैं. ये फ़ंक्शन, आपके टारगेट किए गए रंगों और ब्रैंड के रंगों को ऐसे रंगों में बदलते हैं जो स्मार्ट ग्लास पर सही से दिखें.

इससे यह पक्का किया जाता है कि ऑप्टिकल सी-थ्रू डिसप्ले पर विज़िबिलिटी को ऑप्टिमाइज़ किया जा सके.

चलिए, देखते हैं कि यह कैसे काम करता है.

हम इस चश्मे वाले ऐप्लिकेशन के लिए, फ़ोकस किए गए बटन का रंग बदलना चाहते हैं. इसके लिए, मैं अपने पसंदीदा रंगों में से एक रंग चुनूंगा.

val brandColor = Color(0xFFFFAABB)
val focusedColor = ButtonDefaults.focusedColor(brandColor)

Column(…) {
   LeadingImageCard(
       focusable = false,
       …
   ) {
       …
   }
   ButtonGroup(...) {
       Button(
           onClick = {},
           leadingIcon = { … },
           focusedColor = focusedColor,
       ) { Text("Add to cart") }

       /* Rest of the buttons */
   }
}

ध्यान दें कि जब कोड में रंग जोड़ा जाता है, तो Glimmer हेल्पर फ़ंक्शन उसे चश्मे के लिए सुरक्षित रंग में बदल देते हैं, ताकि वह साफ़ तौर पर दिखे.

यह सब हमारी Jetpack Compose Glimmer लाइब्रेरी में मौजूद है. इससे यह पक्का होता है कि आपके बनाए गए विजेट, अलग-अलग प्लैटफ़ॉर्म पर शानदार दिखें.

Android Studio में, एम्युलेटर का इस्तेमाल करके यह देखा जा सकता है कि आपके स्मार्ट ग्लास का यूज़र इंटरफ़ेस (यूआई) अलग-अलग बैकग्राउंड में कैसा दिखेगा. जैसे, हल्की रोशनी, गहरे रंग या ज़्यादा हलचल वाली जगहों पर.

ये अपडेट तो बस शुरुआत हैं.

ठीक है, नहीं.

मेरी टीम ने मुझे बताया कि इस पर आपको हंसी नहीं आएगी, लेकिन फिर भी मैंने इसे शामिल किया.

अब मैं पॉल को बुलाना चाहूंगा, ताकि वे आपको Jetpack Compose Glimmer के बारे में ज़्यादा जानकारी दे सकें.

टेस्टिंग, ठीक है!

मुझे 'आगे बढ़ें' बटन पर क्लिक करना होगा.

ठीक है, धन्यवाद यास्मीन.

ठीक है।

यास्मीन ने बताया कि Jetpack Compose Glimmer, डिसप्ले ग्लास के लिए ऐप्लिकेशन बनाने के लिए बुनियादी बिल्डिंग ब्लॉक उपलब्ध कराता है.

हमारे कॉम्पोनेंट, ऑप्टिकल सी-थ्रू डिसप्ले के लिए बनाए गए सबसे सही तरीकों को इंटिग्रेट करते हैं. हमने उन्हें सीधे आपके लिए एपीआई में बनाया है. इससे आप सभी डेवलपर को सुंदर और काम के ऑप्टिकल सी-थ्रू अनुभव बनाने में मदद मिलती है.

इस तरह के ऑप्टिकल सी-थ्रू डिवाइसों के लिए ऐप्लिकेशन डिज़ाइन और डेवलप करते समय, आपको कुछ बातों का ध्यान रखना होगा.

पहली बात, यह एक पारदर्शी डिसप्ले है. इसका मतलब है कि इसमें ब्लैक कलर नहीं है.

जब दुनिया दिखती है, तो काला रंग पारदर्शी होता है.

इसलिए, अपने यूज़र इंटरफ़ेस (यूआई), टेक्स्ट, और कॉन्टेंट के कंट्रास्ट को बनाए रखने के लिए, गहरे रंग वाले बैकग्राउंड पर भरोसा नहीं किया जा सकता.

भले ही, काला रंग नहीं दिखता, लेकिन इसका इस्तेमाल करके अन्य डिजिटल कॉन्टेंट को छिपाया जा सकता है.

Glimmer यूज़र इंटरफ़ेस (यूआई) फ़्रेमवर्क में, हमारे पास एक डेप्थ एपीआई है. इसकी मदद से, यूज़र इंटरफ़ेस (यूआई) एलिमेंट को एक-दूसरे से आसानी से अलग किया जा सकता है. साथ ही, हैरारकी का अंदाज़ा लगाया जा सकता है.

यहां देखा जा सकता है कि इस स्टैक में मौजूद कार्ड की डेप्थ, उन्हें एक-दूसरे से अलग रखने में कैसे मदद करती है.

हमारे विज़न साइंटिस्ट ने टेक्स्ट और आइकॉन के लिए, टारगेट कंट्रास्ट रेशियो तय किए हैं. ये रेशियो, ज़्यादातर लाइटिंग कंडीशन में दिखते हैं.

जैसा कि यास्मीन ने दिखाया, हम इसे बना सकते हैं या हमने इसे फ़्रेमवर्क में बनाया है, ताकि जब आप सरफ़ेस के रंगों को पसंद के मुताबिक बनाएं, तो आपको भरोसा हो कि आपका इंटरफ़ेस आपके उपयोगकर्ताओं के लिए पढ़ने लायक होगा.

हमने इन और अन्य सबसे सही तरीकों को अपनी कॉम्पोनेंट लाइब्रेरी में शामिल किया है. इस लाइब्रेरी को लगातार बेहतर बनाया जा रहा है.

हमने हाल ही में कई नए कॉम्पोनेंट लॉन्च किए हैं.

हमारे नए एडिशन में से एक, पेजर कॉम्पोनेंट है. इसमें शानदार मोशन ट्रांज़िशन और जेस्चर पहले से मौजूद हैं.

val pagerState =
  rememberGlimmerPagerState(pageCount = { 10 })

GlimmerHorizontalPager(pagerState) { page ->
   /* Card Content */
}

अगर आपको Compose के हॉरिज़ॉन्टल पेजर के बारे में पता है, तो आपको यह कॉम्पोनेंट भी जाना-पहचाना लगेगा.

हमने कार्ड के चार नए वैरिएंट भी लॉन्च किए हैं. इन्हें पेजर, स्टैक, और अन्य Glimmer यूज़र इंटरफ़ेस (यूआई) के साथ आसानी से इंटिग्रेट करने के लिए डिज़ाइन किया गया है.

लीडिंग इमेज कार्ड और ट्रेलिंग इमेज कार्ड में, टेक्स्ट और इमेज एक-दूसरे के बगल में दिखते हैं.

इसलिए, जब आपके पास टेक्स्ट और विज़ुअल जानकारी बराबर मात्रा में हो, तो कार्ड के इन वैरिएंट का इस्तेमाल करें.

हमने इमेज कार्ड को उसके वैरिएंट में अलग कर दिया है.

इसका इस्तेमाल तब करना सबसे सही रहता है, जब आपके पास कोई बड़ी इमेज हो और उसमें टेक्स्ट या कैप्शन की सिर्फ़ एक लाइन हो. जैसे, यह वीडियो पिकर.

ऐक्शन कार्ड वैरिएंट, कार्ड में एक बटन एंबेड करता है.

इसका इस्तेमाल तब करें, जब आपको उपयोगकर्ताओं को यह बताना हो कि कार्ड चालू करने पर क्या होगा. जैसे, इस डेस्टिनेशन पिकर में.

बटन ग्रुप की मदद से, कम जगह में कई बटन जोड़े जा सकते हैं.

ButtonGroup {
   Button(onClick = {}) { Text("Button 1") }
   Button(onClick = {}) { Text("Button 2") }
   Button(onClick = {}) { Text("Button 3") }
   Button(onClick = {}) { Text("Button 4") }
   Button(onClick = {}) { Text("Button 5") }
}

सिर्फ़ इस आसान कोड की मदद से, आपको ये खूबसूरत ट्रांज़िशन, स्क्रोल करने के तरीके, और किनारों को छिपाने वाले स्क्रिम मिलते हैं. ये सिर्फ़ ज़रूरत पड़ने पर दिखते हैं. साथ ही, इनपुट अपने-आप स्मार्ट ग्लास से कंट्रोल पर रूट हो जाता है.

बटन ग्रुप में, हमारे नए आइकॉन बटन और टॉगल बटन भी शामिल हो सकते हैं.

var buttonChecked by remember { mutableStateOf(false) }

ToggleButton(
  checked = buttonChecked,
  leadingIcon = { Icon(FavoriteIcon) },
  onCheckedChange = { buttonChecked = it }
) {
  Text(if (buttonChecked) "On" else "Off")
}

इस मीडिया कंट्रोल को बनाने के लिए, यहां हमारे सभी तरह के बटन देखे जा सकते हैं.

अब अलग-अलग बैकग्राउंड पर अपने यूज़र इंटरफ़ेस (यूआई) को टेस्ट करना आसान हो गया है.

स्मार्ट ग्लास के एम्युलेटर में, 360º फ़ोटो डाली जा सकती हैं और उन्हें पैन किया जा सकता है. इससे, अलग-अलग बैकग्राउंड, ज़्यादा एलिमेंट वाले बैकग्राउंड, और हल्के या गहरे रंग वाले बैकग्राउंड पर इसे टेस्ट किया जा सकता है.

बटन ग्रुप, इस तरह के ज़्यादा जानकारी वाले व्यू में इस्तेमाल करने के लिए बेहतरीन होते हैं. इससे काम की कार्रवाइयां दिखाई जा सकती हैं.

टैप करने पर, शेयर किए गए एलिमेंट के ट्रांज़िशन का इस्तेमाल करके, ज़्यादा जानकारी वाले व्यूअर स्टेटस पर जाया जा सकता है. इसके बाद, सिस्टम के बैक जेस्चर का इस्तेमाल करके, पिछले व्यू पर वापस जाया जा सकता है.

बहुत बढ़िया.

इसके अलावा, हमने वॉइस इनपुट इंडिकेटर और सूचना वाले डायलॉग जोड़े हैं.

इसलिए, हां, बहुत सारी नई चीज़ें हैं.

अब जब हमने कुछ नई चीज़ें देख ली हैं, तो चलिए कुछ बनाते हैं.

स्मार्ट आईवियर बनाने के लिए Glimmer का इस्तेमाल करने के अलावा, वायर वाले एक्सआर स्मार्ट ग्लास के लिए अनुभव तैयार करने के लिए भी Glimmer का इस्तेमाल किया जा सकता है.

हम चाहते हैं कि आप ऐसे अनुभव बनाएं जो आपके आस-पास की दुनिया को बेहतर बनाएं. इसकी शुरुआत, असल दुनिया में जगह के हिसाब से ऐंकर बनाने से करें.

मान लें कि आप किसी नए शहर में हैं. हो सकता है कि आप किसी डेवलपर कॉन्फ़्रेंस के लिए यात्रा कर रहे हों और आपको अपने आस-पास खाने की कोई जगह ढूंढनी हो.

अपने पसंदीदा नेविगेशन ऐप्लिकेशन से, आस-पास के रेस्टोरेंट और उनकी रेटिंग ढूंढने के लिए कहा जा सकता है.

जानकारी को सीधे तौर पर जगह की जानकारी के ऊपर दिखाया जा सकता है. इससे कॉन्टेक्स्ट, इंटेलिजेंस, और गाइडेंस मिलता है.

यहां आपको हमारा नया Glimmer कॉम्पोनेंट दिखेगा, जिसे आइकॉन मार्कर कहा जाता है.

इसकी मदद से, असल दुनिया के मुख्य एलिमेंट को हाइलाइट किया जा सकता है. साथ ही, उन्हें Glimmer के अन्य कॉम्पोनेंट के साथ जोड़ा जा सकता है, जैसे कि यह कार्ड.

इस उदाहरण में, Google Maps, Places, और Geospatial API का इस्तेमाल करके, लोकप्रिय जगहों के बारे में जानकारी दी गई है.

डेरेक, चलो इन्हें बताते हैं कि इसे कैसे सेट अप करना है.

चलिए, ऐसा करते हैं.

ठीक है।

ठीक है।

जैसा कि पॉल ने पहले बताया था, चलिए अब शुरू करते हैं.

इसलिए, हम developer.android.com/xr पर मौजूद डेवलपर दस्तावेज़ का इस्तेमाल करेंगे. साथ ही, Jetpack Compose Glimmer कॉम्पोनेंट लाइब्रेरी पर नज़र डालेंगे.

इससे आपको Glimmer पर उपलब्ध सभी कॉम्पोनेंट की विज़ुअल खास जानकारी मिलेगी.

चलिए, यूज़र इंटरफ़ेस के इस हिस्से से शुरुआत करते हैं, जिसे पॉल ने पहले दिखाया था.

इसलिए, हम Glimmer यूज़र इंटरफ़ेस (यूआई) का इस्तेमाल करके, स्पेस इंडिकेटर और जानकारी वाला बॉक्स बनाएंगे.

चलिए, सबसे पहले उन कॉम्पोनेंट की पहचान करते हैं जिनका इस्तेमाल किया जाएगा.

बाईं ओर, आपको एक आइकॉन मार्कर दिखेगा. दाईं ओर, हम एक कार्ड का इस्तेमाल करेंगे, जिसमें जगह के बारे में जानकारी होगी.

इसलिए, अगर आप Android Studio पर जाते हैं, तो आपको इस पैनल की झलक दिखेगी. ठीक वैसे ही जैसे आपको किसी अन्य Compose कॉम्पोनेंट की झलक दिखती है. साथ ही, आपको अपने बदलाव रीयल टाइम में दिखेंगे.

जैसा कि पहले बताया गया है, यूज़र इंटरफ़ेस (यूआई) की झलक को अलग-अलग तरह के बैकग्राउंड में देखा जा सकता है. साथ ही, यह पक्का किया जा सकता है कि आपके यूज़र इंटरफ़ेस (यूआई) का कंट्रास्ट, गहरे और हल्के रंग वाले बैकग्राउंड जैसी कई स्थितियों में सही हो.

कैनवस सेट होने के बाद, हम एक लाइन बनाएंगे. इसमें कुछ स्पेस के साथ एक आइकॉन मार्कर और सैंपल टेक्स्ट वाला कार्ड डालेंगे.

बस, इतना ही.

अगर आपको 2D झलक पसंद आती है, तो हम असल दुनिया में किसी चीज़ को मार्क करना शुरू कर सकते हैं. इसके लिए, हम यूज़र इंटरफ़ेस (यूआई) को स्पेशलाइज़ करेंगे.

इसका मतलब है कि हम इसे 2D के बजाय 3D में दिखाएंगे.

इसलिए, स्पेशल यूज़र इंटरफ़ेस (यूआई) सब स्पेस में मौजूद होते हैं. ये उपयोगकर्ता के सामने मौजूद 3D स्पेस होते हैं.

Subspace {
  SpatialPanel {
    VideoPlayer()
  }
}

डिफ़ॉल्ट रूप से, सबस्पेस अपने कॉन्टेंट को उपयोगकर्ता से सही दूरी पर दिखाता है.

इसलिए, Geospatial API का इस्तेमाल करने का तरीका बताने से पहले, आइए आस-पास कोई ऑब्जेक्ट रखते हैं.

मैंने पहले जिस सबस्पेस कंपोज़ेबल के बारे में बताया था उसमें एक वैकल्पिक पैरामीटर होता है. इसकी मदद से, फ़ॉलो टारगेट तय किया जा सकता है.

val state by
  qrCode.state.collectAsState()
Subspace(FollowTarget.anchor(anchor)) {
  SpatialPanel {
    Row {
      IndicatorDot()
      Spacer()
      QrCodeCard(state)
    }
  }
}

इसलिए, असल दुनिया में किसी चीज़ को अटैच करने के लिए, सबसे पहले आपको Jetpack XR के लिए ARCore से मिला ऐंकर बनाना होगा.

इस उदाहरण में, मैं क्यूआर कोड पहचानने की सुविधा का इस्तेमाल कर रहा हूं.

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

ठीक है।

इसलिए, मैंने आपको दिखाया कि डिजिटल कॉन्टेंट को आस-पास की असल दुनिया में कैसे रखा जाता है.

आइए, पॉल का उदाहरण फिर से देखते हैं.

मैं नीदरलैंड्स से हूं.

मुझे माउंटेन व्यू के बारे में ज़्यादा जानकारी नहीं है.

इसलिए, इस इवेंट के बाद, मुझे एक ऐसा ऐप्लिकेशन बनाने में आपकी मदद करनी है जिससे आपको कॉफ़ी पीने के लिए कुछ मज़ेदार जगहें ढूंढने में मदद मिलेगी.

आइए, देखते हैं कि हम Geospatial API की मदद से, उपयोगकर्ताओं को रेस्टोरेंट ढूंढने में कैसे मदद कर सकते हैं. यह एपीआई, अब Jetpack XR के लिए ARCore में मौजूद है.

इसलिए, Geospatial API अब Android XR पर भी उपलब्ध है. इसे शुरुआत में स्मार्टफ़ोन के लिए लॉन्च किया गया था.

यह Google Street View के डेटा का इस्तेमाल करता है और इसे जीपीएस मेज़रमेंट के साथ जोड़ता है, ताकि डिवाइस को उन जगहों पर पोज़िशन किया जा सके जहां यह सुविधा काम करती है.

इसलिए, स्मार्ट चश्मे पर Geospatial API का इस्तेमाल करके, उपयोगकर्ता की जगह की जानकारी और दिशा का सटीक पता लगाया जा सकता है. साथ ही, इससे रास्ते के दिशा-निर्देशों को सटीक तरीके से इस्तेमाल किया जा सकता है.

तार से कनेक्ट होने वाले एक्सआर स्मार्ट ग्लास जैसे इमर्सिव डिवाइसों पर, Geospatial API की मदद से ऐसे अनुभव बनाए जा सकते हैं जो असल दुनिया में सटीक जगह पर दिखें.

उदाहरण के लिए, इमारतों पर स्पेशल कॉन्टेंट को ऐंकर किया जा सकता है या शहर के खास टूर बनाए जा सकते हैं.

इसलिए, इन तीन चरणों को अपनाकर Geospatial API का इस्तेमाल शुरू करें.

पहला तरीका यह है कि Google Cloud Platform प्रोजेक्ट बनाएं और अपने ऐप्लिकेशन में पुष्टि करने की सुविधा कॉन्फ़िगर करें.

इसके बाद, जब आपके ऐप्लिकेशन में Geospatial API को कॉन्फ़िगर और चालू कर दिया जाएगा, तब आपको उपयोगकर्ता से उसकी जगह की सटीक जानकारी पाने की अनुमति मांगनी होगी.

इसके बाद, Geospatial API का इस्तेमाल करने के लिए सेशन को कॉन्फ़िगर करें. अब आपका काम पूरा हो गया है.

इसलिए, आपको Geospatial API के बारे में हमारे डेवलपर के दस्तावेज़ में पूरी जानकारी मिलेगी. इसके लिए, Android XR डेवलपर के लिए बनाए गए हमारे नए पेज पर जाएं.

इसलिए, उपयोगकर्ता की जगह की जानकारी का इस्तेमाल करके, Google Maps Platform के Places API से उपयोगकर्ता के आस-पास मौजूद कुछ अच्छे कैफ़े ढूंढने के लिए कहें.

सबसे पहले, यह जानना ज़रूरी है कि उपयोगकर्ता कहां है?

हम Geospatial API से, उपयोगकर्ता की जगह की जानकारी के बारे में लगातार अपडेट पाने के लिए कहेंगे.

produceState<AppStatus>(Initializing) {
  val geospatial = Geospatial.getInstance(session)

  val wait = geospatial.state.onEach {
     value = WaitingForGeospatial(it.geospatialTrackingState)
  }.first {
     it.geospatialTrackingState == Geospatial.GeospatialTrackingState.RUNNING
  }

  val accuracyWait = geospatial.state.onEach {
     value = WaitingForGeospatialAccuracy(it)
  }.first { it.horizontalAccuracy < horizontalAccuracyRequirement }

  value = WaitingForPlacesResults
  val result = client.findNearby(context, accWait.geospatialPose)
  value = Done(result)

}

इसलिए, हम एक्सआर सेशन के ज़रिए जियोस्पेशल ऑब्जेक्ट को ऐक्सेस करेंगे.

इसके बाद, हम Geospatial के चालू होने और काम करने का इंतज़ार करेंगे. इस दौरान, यह ज़रूरी सेंसर को शुरू करता है और Cloud API से कनेक्ट करता है.

इसके बाद, हम सटीक जानकारी मिलने का इंतज़ार करेंगे.

इसलिए, जीपीएस मेज़रमेंट मिलने पर या विज़ुअल पोज़िशनिंग सिस्टम को उपयोगकर्ता की जगह की जानकारी से मैच होने वाले नतीजे मिलने पर, सटीक जानकारी के लेवल बेहतर हो सकते हैं.

ज़्यादा सटीक होने का इंतज़ार करना ज़रूरी है. इससे यह पक्का किया जा सकता है कि जगह की जानकारी के हिसाब से मिलने वाले अनुभव सही जगह पर आधारित हों और नतीजे उपयोगकर्ता के आस-पास के इलाके से हों.

इसके बाद, हम Geospatial API से मिली जगह की जानकारी का इस्तेमाल करके, Places API की मदद से खोज करने के लिए तैयार हैं.

val bounds = CircularBounds.newInstance(
  LatLng(pose.latitude, pose.longitude),
  100.0, // radius, in meters
)
val placeFields = listOf(
  Place.Field.ID, Place.Field.DISPLAY_NAME,
  Place.Field.RATING, Place.Field.LOCATION,
)
return placesClient.searchNearby(
  SearchNearbyRequest.builder(bounds, placeFields)
    .setIncludedTypes(listOf(PlaceTypes.CAFE))
    .setMaxResultCount(10)
    .build()
).await()

इसलिए, हम Places API के साथ SearchNearbyRequest का इस्तेमाल करेंगे, ताकि उपयोगकर्ता की जगह की जानकारी के आस-पास की जगहों के बारे में क्वेरी की जा सके. यह जानकारी हमें पहले मिली थी. साथ ही, हमें 100 मीटर के दायरे में नतीजे मिलेंगे.

हमें जगह का आईडी, उसका डिसप्ले नेम, उसकी रेटिंग, और उसकी जगह की जानकारी मिलेगी.

इसके बाद, हम तय किए गए पैरामीटर के साथ खोज करेंगे. इसमें जगह के टाइप का फ़िल्टर भी शामिल होगा.

डेटा के बारे में इतना ही. चलिए, यूज़र इंटरफ़ेस पर वापस चलते हैं.

इसलिए, हमें यह पता लगाना होगा कि पहले से मौजूद मार्कर और जानकारी वाले बॉक्स को कैसे रखा जाए. इसके लिए, हम जियोस्पेशल ऐंकर का इस्तेमाल करेंगे.

कोड पर वापस आते हैं. हम अपने XR सेशन का इस्तेमाल करके, Geospatial API को ऐक्सेस करेंगे. इसके बाद, हम खोज के नतीजों से मिले अक्षांश और देशांतर का इस्तेमाल करके, जियोस्पेशल ऐंकर बनाएंगे.

val anchorResult by produceState<AnchorResult?>(null) {
 val geospatial = Geospatial.getInstance(session)
 value = geospatial.createAnchorOnSurface(
   place.location.latitude, place.location.longitude,
   surface = GeospatialSurface.TERRAIN,
   altitudeAboveSurface = 3.0,
   eastUpSouthQuaternion = Quaternion()
 )
}

इस उदाहरण में, हमने उन निर्देशांकों पर मौजूद इलाके से तीन मीटर ऊपर की ऊंचाई तय की है. हालांकि, इसे उन छतों से भी अटैच किया जा सकता है जो इस सुविधा के साथ काम करती हैं. इसका मतलब है कि ऊंचाई की वैल्यू, उस जगह पर मौजूद इमारत की छत के हिसाब से तय की जाएगी.

इसलिए, ऐंकर को घुमाने के लिए क्वाटर्नियन का भी इस्तेमाल किया जा सकता है. इससे ऐंकर के रोटेशन की वैल्यू तय होती है.

हालांकि, हम इस उदाहरण में डिफ़ॉल्ट वैल्यू का इस्तेमाल करेंगे. ऐसा इसलिए, क्योंकि हम यूज़र इंटरफ़ेस (यूआई) को उपयोगकर्ता की तरफ़ घुमाएंगे.

इसके बाद, हम पहले से मौजूद ग्लिमर यूज़र इंटरफ़ेस (यूआई) को इस ऐंकर से अटैच करेंगे. इससे आपको स्पेसियल ऐंकरिंग की सुविधा का इस्तेमाल करने के लिए ज़रूरी कॉम्पोनेंट मिलेंगे.

when (anchorResult) {
 is AnchorCreateSuccess ->
   Subspace(FollowTarget.anchor(anchorResult.anchor)) {
     SpatialPanel(SubspaceModifier.rotateToLookAtUser()) {
       PlaceIndicator(place)
     }
   }

 else ->
   Log.e("Demo", "Failed to create anchor $anchorResult")
}

इसलिए, हमारा मानना है कि Geospatial API, रास्ता खोजने के बेहतरीन अनुभव दे सकता है. साथ ही, Glimmer की मदद से डिज़ाइन करने पर, उपयोगकर्ताओं को एक नज़र में जानकारी देने वाले अनुभव मिल सकते हैं. ये अनुभव खास तौर पर, सी-थ्रू डिसप्ले के लिए बनाए गए हैं.

Geospatial API के बारे में ज़्यादा जानने के लिए, हाल ही में अपडेट की गई developer.android.com/xr साइट पर जाएं.

अब मैं यास्मीन को आगे की जानकारी देने के लिए आमंत्रित करता हूं.

इस सेशन में, हमने Android XR की कुछ सुविधाओं के बारे में जाना: Jetpack XR के लिए ARCore और Jetpack Compose Glimmer.

हम यह देखने के लिए उत्साहित हैं कि Android XR, वायर वाले एक्सआर स्मार्ट ग्लास में कौनसी नई सुविधाएं लेकर आएगा.

डेवलपर पहले से ही Android XR के लिए ऐप्लिकेशन बना रहे हैं. हमें उम्मीद है कि Google Play Store पर आपका क्रिएटिव काम देखने को मिलेगा.

शुरू करने के लिए, कृपया डेवलपर का दस्तावेज़ देखें. साथ ही, एक्सआर से जुड़े हमारे एक्सपेरिमेंट से प्रेरणा लें और कोडलैब की मदद से इस प्लैटफ़ॉर्म का इस्तेमाल शुरू करें.

हमने आप सभी के लिए, एक्सआर से जुड़े कई शानदार सेशन, डेमो, और वर्कशॉप प्लान की हैं.

इसलिए, कृपया हमारे साथ जुड़ें और इमर्सिव और ऑगमेंटेड एक्सपीरियंस के लिए, Android XR पर ऐप्लिकेशन बनाने के बारे में जानें.

Android XR टीम की ओर से, यहां आने के लिए आप सभी का बहुत-बहुत धन्यवाद. हमें उम्मीद है कि आपको Android डेवलपर समिट में बाकी का समय बिताने में मज़ा आएगा.

इसलिए, आपका धन्यवाद.