XR की मदद से, अपने Android ऐप्लिकेशन को 3D में दिखाना

​​

आपका 2D मोबाइल या बड़ी स्क्रीन वाला Android ऐप्लिकेशन, Android XR में डिफ़ॉल्ट रूप से काम करता है. साथ ही, इसे 3D स्पेस में 2D पैनल के तौर पर दिखाया जाता है. अपने मौजूदा 2D Android ऐप्लिकेशन को बेहतर बनाने के लिए, इमर्सिव XR सुविधाएं जोड़ी जा सकती हैं. इससे, ऐप्लिकेशन को फ़्लैट स्क्रीन से डाइनैमिक 3D एनवायरमेंट में ट्रांसफ़ॉर्म किया जा सकता है.

अपने Android ऐप्लिकेशन को XR में पेश करते समय, इन अहम सिद्धांतों का ध्यान रखें.

• स्पेशलिटी वाली सुविधाएं: Android XR, आपके ऐप्लिकेशन के लिए कई तरह की स्पेशलिटी वाली सुविधाएं उपलब्ध कराता है. हालांकि, आपको हर सुविधा को लागू करने की ज़रूरत नहीं है. रणनीति के हिसाब से उन विज़ुअल को लागू करें जो आपके ऐप्लिकेशन की विज़ुअल क्रम, लेआउट, और उपयोगकर्ता अनुभव को बेहतर बनाते हैं. दर्शकों को बेहतर अनुभव देने के लिए, कस्टम एनवायरमेंट और एक से ज़्यादा पैनल शामिल करें. जगह की जानकारी देने वाले एलिमेंट को सबसे सही तरीके से इंटिग्रेट करने के लिए, स्पेशल यूज़र इंटरफ़ेस (यूआई) डिज़ाइन से जुड़े दिशा-निर्देश देखें.
• अडैप्टिव यूज़र इंटरफ़ेस (यूआई): XR की मदद से, बड़े यूज़र इंटरफ़ेस (यूआई) को डिज़ाइन किया जा सकता है. यह यूआई, अनलिमिटेड कैनवस और आसानी से साइज़ में बदली जा सकने वाली विंडो के हिसाब से अपने-आप अडजस्ट हो जाता है. इस बड़े प्लैटफ़ॉर्म के लिए, अपने ऐप्लिकेशन के लेआउट को ऑप्टिमाइज़ करने के लिए, बड़ी स्क्रीन के डिज़ाइन से जुड़े दिशा-निर्देशों का इस्तेमाल करना सबसे ज़रूरी है. भले ही, फ़िलहाल आपका ऐप्लिकेशन सिर्फ़ मोबाइल पर उपलब्ध हो, फिर भी उपयोगकर्ता अनुभव को बेहतर बनाने के लिए, दिलचस्प वातावरण का इस्तेमाल किया जा सकता है. हालांकि, बड़ी स्क्रीन के लिए ऑप्टिमाइज़ किया गया यूज़र इंटरफ़ेस (यूआई), Android XR के लिए अपने ऐप्लिकेशन को ऑप्टिमाइज़ करने का सबसे अच्छा तरीका है.
• यूज़र इंटरफ़ेस (यूआई) फ़्रेमवर्क: हमारा सुझाव है कि आप XR के लिए, Jetpack Compose का इस्तेमाल करके अपना यूआई बनाएं. अगर आपका ऐप्लिकेशन फ़िलहाल व्यू पर निर्भर है, तो एक्सआर में व्यू के साथ काम करना लेख पढ़ें. इससे, व्यू के साथ काम करते समय Compose के इंटरऑपरेबिलिटी का फ़ायदा पाने के बारे में ज़्यादा जानकारी मिलेगी. इसके अलावा, सीधे तौर पर Jetpack SceneCore लाइब्रेरी के साथ काम करने का आकलन भी किया जा सकता है.
• Play Store पर पब्लिश करना: यह पक्का करने के लिए कि XR की सुविधाओं से बेहतर बनाया गया आपका ऐप्लिकेशन, Play Store पर खोजा जा सके:
  • ऐसी सभी ज़रूरी शर्तों को हटाकर, अपने ऐप्लिकेशन को बेहतर बनाएं.
  • पक्का करें कि आपने Google Play Console में, अपने ऐप्लिकेशन को XR पब्लिशिंग की सुविधा से ऑप्ट-आउट न किया हो. इससे, आपके ऐप्लिकेशन को Play Store के खोज नतीजों में शामिल किया जा सकेगा.

<uses-sdk tools:overrideLibrary="androidx.xr.scenecore, androidx.xr.compose"/>

2D यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट को 3D में बदलने के बारे में सलाह

इन सुझावों का पालन करने से, आपके ऐप्लिकेशन को XR के लिए ऑप्टिमाइज़ किया जा सकता है.

• बड़ी स्क्रीन के साथ काम करने की सुविधा को प्राथमिकता दें: पक्का करें कि आपके ऐप्लिकेशन का यूज़र इंटरफ़ेस (यूआई), बड़ी स्क्रीन के डिज़ाइन के सिद्धांतों के मुताबिक हो. इससे, बड़े XR एनवायरमेंट में टेक्स्ट और कॉन्टेंट को आसानी से पढ़ा जा सकेगा.
• स्पेशलिटी वाली सुविधाओं का सही तरीके से इस्तेमाल करना: अपने ऐप्लिकेशन के उपयोगकर्ता सफ़र के उन अहम पलों की पहचान करें जहां स्पेस की जानकारी देने वाली सुविधाओं को शामिल करने से, अनुभव बेहतर होगा. साथ ही, प्लैटफ़ॉर्म की खास सुविधाओं का फ़ायदा भी लिया जा सकेगा.
• स्पेशल पैनल को उपयोगकर्ता के हिसाब से रखें: स्पेस पैनल के साथ अपना लेआउट डिज़ाइन करते समय, उन्हें उपयोगकर्ता से सही दूरी पर रखें, ताकि उन्हें न तो बहुत ज़्यादा जानकारी दिखे और न ही पैनल बहुत पास दिखें.
• स्पेशल लेआउट के लिए, अडैप्टिव यूज़र इंटरफ़ेस (यूआई) का इस्तेमाल करना: अपने लेआउट को कई स्पेस पैनल में बांटने के लिए, अडैप्टिव यूज़र इंटरफ़ेस (यूआई) के कॉन्सेप्ट का इस्तेमाल करें. इससे, जानकारी को बेहतर तरीके से दिखाया जा सकता है.
• हमेशा दिखने वाले एलिमेंट और पैटर्न के लिए ऑर्बिटर का इस्तेमाल करना: ऑर्बिटर का इस्तेमाल, नेविगेशन और कंट्रोल जैसे हमेशा दिखने वाले और संदर्भ के हिसाब से बने यूज़र एक्सपीरियंस (यूएक्स) एलिमेंट के लिए करें. साफ़ तौर पर जानकारी देने और ग़ैर-ज़रूरी चीज़ों से बचने के लिए, ऑर्बिटर का इस्तेमाल कम करें.
• एलिवेशन का सही तरीके से इस्तेमाल करना: एलिवेशन को ऐसे कॉम्पोनेंट पर लागू करें जो कुछ समय के लिए दिखते हैं और कॉन्टेंट के साथ स्क्रोल नहीं करते. बड़े हिस्सों को ऊंचा करने से बचें, ताकि देखने में परेशानी न हो और विज़ुअल के लेआउट में संतुलन बना रहे.
• Material Design का इस्तेमाल करके बनाना: अगर आपने ऐप्लिकेशन को, Material Design के कॉम्पोनेंट और अडैप्टिव लेआउट के नए अल्फा वर्शन का इस्तेमाल करके बनाया है, तो अपने ऐप्लिकेशन में एक्सआर से जुड़े बदलावों के लिए ऑप्ट-इन करने के लिए, "EnableXrComponentOverrides" रैपर जोड़ा जा सकता है. ज़्यादा जानने के लिए, एक्सआर के लिए Material Design दस्तावेज़ पढ़ें.

XR के लिए Jetpack Compose में नए कॉम्पोनेंट जोड़े गए हैं. ये कॉम्पोनेंट, एक्सआर के बेहतर अनुभव को मैनेज करते हैं, ताकि आपको खुद ऐसा करने की ज़रूरत न पड़े. उदाहरण के लिए, 2D वर्शन की जगह SpatialPopup और SpatialDialog का इस्तेमाल किया जा सकता है. जब स्पेसिएल यूज़र इंटरफ़ेस (यूआई) उपलब्ध नहीं होता, तो ये कॉम्पोनेंट सामान्य 2D यूज़र इंटरफ़ेस (यूआई) के तौर पर दिखते हैं. साथ ही, जब वे उपलब्ध होते हैं, तो आपके ऐप्लिकेशन का स्पेसिएल यूज़र इंटरफ़ेस (यूआई) दिखाते हैं. इनका इस्तेमाल करना उतना ही आसान है जितना कि उससे जुड़े 2D यूज़र इंटरफ़ेस (यूआई) एलिमेंट को बदलने के लिए एक लाइन में बदलाव करना.

डायलॉग को SpatialDialog में बदलना

// Previous approach
Dialog(
   onDismissRequest = onDismissRequest
) {
   MyDialogContent()
}

// New XR differentiated approach
SpatialDialog(
   onDismissRequest = onDismissRequest
) {
   MyDialogContent()
}

पॉप-अप को SpatialPopup में बदलना

// Previous approach
Popup(onDismissRequest = onDismissRequest) {
   MyPopupContent()
}

// New XR differentiated approach
SpatialPopup(onDismissRequest = onDismissRequest) {
   MyPopupContent()
}

2D यूज़र इंटरफ़ेस (यूआई) एलिमेंट को बेहतर बनाना

अगर आपको यूज़र इंटरफ़ेस (यूआई) को बेहतर बनाने के लिए ज़्यादा कंट्रोल चाहिए, तो हम SpatialElevation का सुझाव देते हैं. इसकी मदद से, अपने ऐप्लिकेशन में किसी भी कॉम्पोज़ेबल को ज़ेड-ऐक्सिस पर, स्पेस पैनल के ऊपर ले जाया जा सकता है. ज़ेड-ऐक्सिस को SpatialElevationLevel की मदद से सेट किया जाता है. इससे उपयोगकर्ता का ध्यान खींचने, बेहतर हैरारकी बनाने, और टेक्स्ट को पढ़ने में आसानी होती है. इसका उदाहरण यहां दिया गया है.

//  Elevate an otherwise 2D Composable (signified here by ComposableThatShouldElevateInXr).
SpatialElevation(spatialElevationLevel = SpatialElevationLevel.Level4) {
   ComposableThatShouldElevateInXr()
}

कोड के बारे में अहम जानकारी

• बड़े एरिया और प्लेन को स्पेसलाइज़ या ऊंचा न करें. जैसे, सबसे नीचे और साइड में मौजूद शीट.
• कॉन्टेंट के साथ स्क्रोल किए जा सकने वाले यूज़र इंटरफ़ेस (यूआई) एलिमेंट को हाइलाइट न करें.

2D कॉम्पोनेंट को ऑर्बिटर में माइग्रेट करना

ऑर्बिटर, फ़्लोटिंग एलिमेंट होते हैं. इनमें स्पेस पैनल में मौजूद कॉन्टेंट के कंट्रोल होते हैं. इनकी मदद से, कॉन्टेंट के लिए ज़्यादा जगह मिलती है. साथ ही, मुख्य कॉन्टेंट में रुकावट डाले बिना, उपयोगकर्ताओं को सुविधाओं का तुरंत ऐक्सेस मिलता है.

नेविगेशन रेल, जिसे स्पेसलाइज़ नहीं किया गया है

स्पेसिएलाइज़्ड (एक्सआर के हिसाब से बनाई गई) नेविगेशन रेल

नीचे दिए गए उदाहरण में, 2D यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट को ऑर्बिटर में माइग्रेट करने का तरीका बताया गया है.

// Previous approach
NavigationRail()

// New XR differentiated approach
Orbiter(
    position = OrbiterEdge.Start,
    offset = dimensionResource(R.dimen.start_orbiter_padding),
    alignment = Alignment.Start
) {
    NavigationRail()
}

ऑर्बिटर के बारे में खास जानकारी

• ऑर्बिटर ऐसे कॉम्पोनेंट होते हैं जिन्हें मौजूदा यूज़र इंटरफ़ेस (यूआई) एलिमेंट को स्पेस पैनल से जोड़ने के लिए डिज़ाइन किया गया है
• Android XR ऐप्लिकेशन के डिज़ाइन से जुड़े दिशा-निर्देश देखें. इससे यह पता चलेगा कि ऑर्बिटर के लिए किन एलिमेंट को माइग्रेट करना है और किन पैटर्न से बचना है.
• हमारा सुझाव है कि आप नेविगेशन के कुछ कॉम्पोनेंट ही इस्तेमाल करें. जैसे, नेविगेशन रेल, सबसे ऊपर मौजूद ऐप्लिकेशन बार या सबसे नीचे मौजूद ऐप्लिकेशन बार.
• स्पेसिएल यूज़र इंटरफ़ेस चालू न होने पर, ऑर्बिटर नहीं दिखते. उदाहरण के लिए, ये आइटम होम स्पेस में या फ़ोन, टैबलेट, और फ़ोल्ड किए जा सकने वाले डिवाइसों पर नहीं दिखेंगे.

2D कॉम्पोनेंट को स्पेस पैनल पर माइग्रेट करना

स्पेस पैनल, Android XR ऐप्लिकेशन के यूज़र इंटरफ़ेस (यूआई) को बनाने के लिए बुनियादी ब्लॉक होते हैं.

पैनल, यूज़र इंटरफ़ेस (यूआई) एलिमेंट, इंटरैक्टिव कॉम्पोनेंट, और immersive कॉन्टेंट के लिए कंटेनर के तौर पर काम करते हैं. डिज़ाइन करते समय, उपयोगकर्ता कंट्रोल के लिए ऑर्बिटर जैसे कॉम्पोनेंट जोड़े जा सकते हैं. साथ ही, खास इंटरैक्शन पर ध्यान खींचने के लिए, यूज़र इंटरफ़ेस (यूआई) एलिमेंट को स्पेस में ऊंचा किया जा सकता है.

कोड के बारे में अहम जानकारी

• Android XR ऐप्लिकेशन के डिज़ाइन से जुड़े दिशा-निर्देश देखें. इससे यह पता चलेगा कि किन एलिमेंट को पैनल में माइग्रेट करना है और किन पैटर्न से बचना है.
• स्पेस पैनल प्लेसमेंट के लिए सबसे सही तरीके अपनाएं:
  • पैनल, उपयोगकर्ता की आंखों से 1.5 मीटर की दूरी पर, बीच में दिखने चाहिए.
  • कॉन्टेंट, उपयोगकर्ता के फ़ील्ड ऑफ़ व्यू के बीच में 41° पर दिखना चाहिए.
• जब उपयोगकर्ता किसी दूसरे पेज पर जाता है, तब भी पैनल अपनी जगह पर बने रहते हैं. ऐंकर करने की सुविधा सिर्फ़ पासथ्रू के लिए उपलब्ध है.
• पैनल के लिए, सिस्टम के सुझाए गए 32 डीपी वाले राउंड किए गए कोनों का इस्तेमाल करें.
• टच टारगेट का साइज़ 56 dp होना चाहिए. यह 48 dp से कम नहीं होना चाहिए.
• आसानी से पढ़ने के लिए, कंट्रास्ट रेशियो बनाए रखें. खास तौर पर, अगर पारदर्शी बैकग्राउंड का इस्तेमाल किया जा रहा है.
• Android डिज़ाइन के कलर के सिद्धांतों का पालन करें. साथ ही, अपने ऐप्लिकेशन के लिए गहरे और हल्के रंग वाली थीम लागू करने के लिए, Material Design के कलर सिस्टम का इस्तेमाल करें.
• मौजूदा यूज़र इंटरफ़ेस (यूआई) एलिमेंट के साथ स्पेस पैनल एपीआई का इस्तेमाल करें.

2D यूज़र इंटरफ़ेस (यूआई) को एक स्पेस पैनल में माइग्रेट करना

डिफ़ॉल्ट रूप से, आपका ऐप्लिकेशन Home Space में एक पैनल के साथ दिखता है. होम स्पेस और फ़ुल स्पेस के बीच ट्रांज़िशन करने का तरीका जानें. उस कॉन्टेंट को फ़ुल स्क्रीन पर देखने के लिए, SpatialPanel का इस्तेमाल करें.

यहां एक उदाहरण दिया गया है.

if (LocalSpatialCapabilities.current.isSpatialUiEnabled) {    
    Subspace {
        SpatialPanel(
            SubspaceModifier
                .resizable(true)
                .movable(true)
         ) {
            AppContent(appContainer, widthSizeClass)
        }
    }
} else {
    AppContent(appContainer, widthSizeClass)
}

अपने 2D यूज़र इंटरफ़ेस (यूआई) को एक से ज़्यादा स्पेस पैनल में माइग्रेट करना

अपने ऐप्लिकेशन के यूज़र इंटरफ़ेस (यूआई) के लिए, एक स्पेस पैनल का इस्तेमाल किया जा सकता है. इसके अलावा, अपने 2D यूआई को कई स्पेस पैनल में माइग्रेट भी किया जा सकता है. अगर आपको अपने ऐप्लिकेशन के यूज़र इंटरफ़ेस (यूआई) के लिए एक से ज़्यादा पैनल इस्तेमाल करने हैं, तो पैनल को अपनी पसंद के मुताबिक रखा और घुमाया जा सकता है. यह ठीक वैसा ही है जैसे 2D में अपने यूआई को व्यवस्थित करना. आपको सबसे पहले यह तय करना होगा कि आपको क्या करना है. इसके बाद, पैनल को पोज़िशन करने और घुमाने के लिए, स्पेसियल यूज़र इंटरफ़ेस लेआउट एपीआई (SpatialBox, SpatialRow, SpatialColumn, SpatialLayoutSpacer, SpatialAlignment) और सबस्पेस मॉडिफ़ायर का इस्तेमाल किया जा सकता है. कई पैनल लागू करते समय, आपको कुछ मुख्य पैटर्न से बचना होगा.

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

स्पेसलाइज़ नहीं किया गया कॉन्टेंट

ऑर्बिटर में स्पेसिएलाइज़्ड (एक्सआर के हिसाब से बनाए गए) मीडिया कंट्रोल और कॉन्टेंट को कई स्पेस पैनल में बांटा गया है

SpatialRow(curveRadius = 825.dp) {
    SpatialPanel(
        SubspaceModifier
            .width(384.dp)
            .height(592.dp)
    ) {
        StartSupportingPanelContent()
    }
    SpatialPanel(
        SubspaceModifier
            .height(824.dp)
            .width(1400.dp)
    ) {
        App()
    }
    SpatialPanel(
        SubspaceModifier
            .width(288.dp)
            .height(480.dp)
    ) {
        EndSupportingPanelContent()
    }
}

स्पेस ऑडियो की सुविधाएं देखना

किसी खास यूज़र इंटरफ़ेस (यूआई) एलिमेंट को दिखाने का फ़ैसला लेते समय, किसी खास एक्सआर डिवाइस या मोड के लिए जांच करने से बचें. अगर डिवाइस की क्षमताओं के बजाय, डिवाइसों या मोड की जांच की जाती है, तो किसी डिवाइस की क्षमताओं में समय के साथ होने वाले बदलावों की वजह से समस्याएं आ सकती हैं. इसके बजाय, LocalSpatialCapabilities.current.isSpatialUiEnabled का इस्तेमाल करके, सीधे तौर पर स्पेसिएलाइज़ेशन की ज़रूरी सुविधाओं की जांच करें. इसका उदाहरण यहां दिया गया है. इस तरीके से यह पक्का किया जाता है कि आपका ऐप्लिकेशन, नए डिवाइसों के आने या सुविधाओं में बदलाव होने पर, हर बार अपडेट किए बिना ही, एक्सआर अनुभवों की एक विस्तृत रेंज के हिसाब से सही तरीके से काम करे.

if (LocalSpatialCapabilities.current.isSpatialUiEnabled) {
    SupportingInfoPanel()
} else {
    ButtonToPresentInfoModal()
}

//Similar check for audio
val spatialAudioEnabled = LocalSpatialCapabilities.current.isSpatialAudioEnabled

उपयोगकर्ता के आस-पास के माहौल को बदलने के लिए, एनवायरमेंट का इस्तेमाल करना

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

3D मॉडल जोड़ना

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

SceneViewer की मदद से 3D मॉडल जोड़ना

अगर आपको अपने उपयोगकर्ताओं को 3D मॉडल दिखाने हैं, तो इस समस्या को हल करने के कई तरीके हैं. अगर आपके पास अपने सर्वर पर इस्तेमाल के लिए तैयार glTF है, तो सबसे आसान तरीका SceneViewer XR का इस्तेमाल करना है. ऐसा करने के लिए, साफ़ तौर पर बताने वाला इंटेंट बनाएं. इससे डिवाइस पर SceneViewer XR ऐप्लिकेशन लॉन्च हो जाएगा. इससे उपयोगकर्ता, ऑब्जेक्ट को देख सकता है और उसे अपने आस-पास के इलाके में, अपनी मर्ज़ी के मुताबिक घुमाकर उसका साइज़ बदल सकता है.

इकाइयों के वॉल्यूम की मदद से, सीधे तौर पर 3D मॉडल जोड़ना

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