ARCore में Streetscape Geometry और Rooftop anchors API का इस्तेमाल शुरू करना

1. शुरू करने से पहले

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

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

कोडलैब ऐप्लिकेशन का पूरा डेमो

ज़रूरी शर्तें

  • AR के बारे में बुनियादी जानकारी
  • ARCore Geospatial API के बारे में बुनियादी जानकारी

आपको क्या सीखने को मिलेगा

  • ARCore Geospatial API का इस्तेमाल करने वाले Google Cloud प्रोजेक्ट को सेट अप करने का तरीका.
  • Geospatial API से स्ट्रीटस्केप ज्यामिति पाने का तरीका.
  • स्ट्रीटस्केप ज्यामिति से मिली इमारतों और इलाकों को विज़ुअलाइज़ करने का तरीका.
  • मिले हुए पॉलीगॉन पर बुनियादी कैलकुलेशन कैसे करें.
  • ज्यामिति पर हिट-टेस्ट कैसे किया जाता है.
  • बिल्डिंग की छत पर कॉन्टेंट जोड़ने के लिए, रूफ़टॉप ऐंकर का इस्तेमाल कैसे करें.

आपको किन चीज़ों की ज़रूरत होगी

2. अपना एनवायरमेंट सेट अप करने का तरीका

Kotlin और Android Studio के साथ Geospatial API का इस्तेमाल करने के लिए, आपके पास Google Cloud प्रोजेक्ट और हमारा स्टार्टर प्रोजेक्ट होना चाहिए.

Google Cloud प्रोजेक्ट सेट अप करना

ARCore Geospatial API, Google Cloud से कनेक्ट होता है. इससे, Google Street View की सुविधा वाले इलाकों में, Google के विज़ुअल पोज़िशनिंग सिस्टम (वीपीए) से स्थानीय जानकारी मिलती है.

अपने प्रोजेक्ट में इस सर्वर का इस्तेमाल करने के लिए, यह तरीका अपनाएं:

  1. Google Cloud में कोई प्रोजेक्ट बनाएं.Google Cloud प्रोजेक्ट बनाना
  2. प्रोजेक्ट का नाम फ़ील्ड में, कोई नाम डालें. जैसे, ARCore Geospatial API project. इसके बाद, कोई भी जगह चुनें.
  3. बनाएं पर क्लिक करें.
  4. प्रोजेक्ट चुनने वाले पेज पर, Google Cloud Console में जाकर, प्रोजेक्ट बनाएं पर क्लिक करें.
  5. इस प्रोजेक्ट के लिए ARCore API देखने के लिए, इस लिंक पर क्लिक करें. इसके बाद, चालू करें पर क्लिक करें:
  6. अपने प्रोजेक्ट के लिए एपीआई पासकोड बनाएं:
    1. एपीआई और सेवाएं में जाकर, क्रेडेंशियल को चुनें.
    2. क्रेडेंशियल बनाएं पर क्लिक करें और एपीआई पासकोड चुनें.
    3. कुंजी को नोट कर लें, क्योंकि आपको इसकी ज़रूरत बाद में पड़ेगी.

आपने एपीआई-कुंजी की पुष्टि करने की सुविधा के साथ एक Google Cloud प्रोजेक्ट बनाया है. अब आप सैंपल प्रोजेक्ट में Geospatial API का इस्तेमाल करने के लिए तैयार हैं.

Android Studio सेट अप करना

Geospatial API का इस्तेमाल शुरू करने के लिए, हमने एक स्टार्टर प्रोजेक्ट उपलब्ध कराया है. इसमें Geospatial API के साथ इंटिग्रेट किए गए ARCore प्रोजेक्ट की बुनियादी बातें शामिल हैं.

Android Studio सेट अप करने के लिए, यह तरीका अपनाएं:

  1. Android Studio खोलें और इनमें से कोई एक काम करें:
    • अगर आपने पहले से ही कोई प्रोजेक्ट खोला हुआ है, तो फ़ाइल > नया > वर्शन कंट्रोल से प्रोजेक्ट पर क्लिक करें.
    • अगर आपको Android Studio में आपका स्वागत है विंडो दिखती है, तो वीसीएस से पाएं पर क्लिक करें. वीसीएस की जगह की जानकारी से पाना
  2. प्रोजेक्ट इंपोर्ट करने के लिए, Git को चुनें और https://github.com/google-ar/codelab-streetscape-geometry-rooftop-anchors.git डालें.

एपीआई पासकोड को Android Studio प्रोजेक्ट के साथ इंटिग्रेट करना

Google Cloud से मिले एपीआई पासकोड को अपने प्रोजेक्ट से जोड़ने के लिए, यह तरीका अपनाएं:

  1. Android Studio में, app > src पर क्लिक करें. इसके बाद, AndroidManifest.xml पर दो बार क्लिक करें.
  2. नीचे दी गई meta-data एंट्री ढूंढें:
    <meta-data
    android:name="com.google.android.ar.API_KEY"
    android:value="API_KEY" />
  3. API_KEY प्लेसहोल्डर को Google Cloud प्रोजेक्ट में बनाए गए एपीआई पासकोड से बदलें. com.google.android.ar.API_KEY में सेव की गई वैल्यू, इस ऐप्लिकेशन को Geospatial API इस्तेमाल करने की अनुमति देती है.

अपने प्रोजेक्ट की पुष्टि करना

  • अपने प्रोजेक्ट की पुष्टि करने के लिए, अपने डेवलपमेंट डिवाइस पर ऐप्लिकेशन चलाएँ. आपको स्क्रीन के सबसे ऊपर, कैमरे का व्यू और जियोस्पेशल डीबग की जानकारी दिखेगी. आपको ऐसे बटन और कंट्रोल भी दिखेंगे जो काम नहीं करते. इस कोडलैब के दौरान, आपको अपने प्रोजेक्ट में उन बटन और कंट्रोल को प्रोग्राम करना होगा.

ऐप्लिकेशन में जियोस्पेशल जानकारी दिखती है

3. स्ट्रीटस्केप-ज्यामिति डेटा को विज़ुअलाइज़ करना

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

स्ट्रीटस्केप की ज्यामिति की सुविधा चालू करना

  1. StreetscapeGeometryActivity.kt फ़ाइल में, यह लाइन ढूंढें:
    // TODO: Enable Streetscape Geometry.
  2. इस लाइन के बाद, streetscape-geometry मोड चालू करें:
    streetscapeGeometryMode = Config.StreetscapeGeometryMode.ENABLED
    Geospatial API और streetscape-geometry मोड चालू होने पर, आपका ऐप्लिकेशन उपयोगकर्ता के आस-पास की streetscape-geometry की जानकारी पा सकता है.

स्ट्रीटस्केप की ज्यामिति पाना

  1. StreetscapeGeometryActivity.kt फ़ाइल में, यह लाइन ढूंढें:
    // TODO: Obtain Streetscape Geometry.
  2. इस लाइन के बाद, सभी Trackable ऑब्जेक्ट पाकर और StreetscapeGeometry के हिसाब से फ़िल्टर करके, स्ट्रीटस्केप की ज्यामिति पाएं:
    val streetscapeGeometry = session.getAllTrackables(StreetscapeGeometry::class.java)
    इन ज्यामितियों का इस्तेमाल, सैंपल प्रोजेक्ट में दिए गए सामान्य विज़ुअलाइज़ेशन में किया जाता है. इस विज़ुअलाइज़ेशन में, हर इमारत या इलाके के पॉलीगॉन को अलग-अलग रंग में दिखाया गया है.
  3. अगली लाइन में, यह कोड जोड़ें:
    streetscapeGeometryRenderer.render(render, streetscapeGeometry)
  4. ऐप्लिकेशन चलाएं और अपने इलाके में किसी इमारत पर जाएं.
  5. जियोस्पेशल लोकलाइज़ेशन पूरा होने के बाद, सेटिंग का आइकॉन सेटिंग पर टैप करें. इसके बाद, स्ट्रीटस्केप-ज्यामिति विज़ुअलाइज़ेशन चालू करें.
  6. किसी इमारत को एआर में देखें. सेगमेंट किए गए हर बिल्डिंग का अपना रंग होता है. साथ ही, सबसे बीच वाली ज्यामिति के Quality और Type एनम दिखाए जाते हैं.

ऐप्लिकेशन में स्ट्रीटस्केप ज्यामिति दिखती है

4. स्ट्रीटस्केप-ज्यामिति डेटा की मदद से हिट-टेस्ट करना

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

हिट-टेस्ट करना

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

  1. StreetscapeCodelabRenderer.kt फ़ाइल में, यह लाइन ढूंढें:
    // TODO: determine the Streetscape Geometry at the center of the viewport
  2. इस लाइन के बाद, यह कोड जोड़ें:
    val centerHits = frame.hitTest(centerCoords[0], centerCoords[1])
val hit = centerHits.firstOrNull {
  val trackable = it.trackable
  trackable is StreetscapeGeometry && trackable.type == StreetscapeGeometry.Type.BUILDING
} ?: return
    यह कोड, सेंटर के निर्देशांकों का इस्तेमाल करके, सड़क के नज़ारे की ऐसी ज्यामिति ढूंढता है जो एक इमारत है. इस नतीजे का इस्तेमाल, सजावट जोड़ने के लिए किया जाता है.

टैप करने पर स्टार वाली सजावट जोड़ना

  1. StreetscapeCodelabRenderer.kt फ़ाइल में, यह लाइन ढूंढें:
    // TODO: Create an anchor for a star, and add it to the starAnchors object.
  2. इस लाइन के बाद, यह कोड जोड़ें:
    val transformedPose = ObjectPlacementHelper.createStarPose(hit.hitPose)
val anchor = hit.trackable.createAnchor(transformedPose)
starAnchors.add(anchor)
    ObjectPlacementHelper क्लास, हिट पोज़ को देखकर यह तय करती है कि स्टार को कहां रखना है. starAnchors ऑब्जेक्ट का इस्तेमाल, एआर व्यू में स्टार रेंडर करने के लिए किया जाता है.

इसे आज़माएं

  1. ऐप्लिकेशन चलाएं और अपने इलाके में किसी इमारत पर जाएं.
  2. जियोस्पेशल लोकलाइज़ेशन की प्रोसेस पूरी होने के बाद, कैमरे को बिल्डिंग पर पॉइंट करें और स्क्रीन पर टैप करें. आपको स्क्रीन के बीच में मौजूद बिल्डिंग पर एक स्टार दिखेगा.

ऐप्लिकेशन में स्टार प्लेस किए गए हैं

5. छत पर लगे ऐंकर के डेटा का इस्तेमाल करना

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

बैलून मोड में व्यवहार जोड़ना

प्रोजेक्ट में ऐसेट प्लेसमेंट के दो मोड हैं: सनफ़्लावर मोड, जिसका इस्तेमाल आपने पहले ही कर लिया है और दूसरा है बलून मोड.

बैलून मोड के लिए प्रोग्रामिंग करने के लिए, यह तरीका अपनाएं:

  1. StreetscapeCodelabRenderer.kt फ़ाइल में, यह लाइन ढूंढें:
    // TODO: Create an anchor for a balloon and add it to the balloonAnchors object.
  2. गुब्बारे को अच्छी तरह से चिपकाने के लिए, हिट पोज़ का इस्तेमाल करें:
    val transformedPose = ObjectPlacementHelper.createBalloonPose(frame.camera.pose, hit.hitPose)
  3. transformedPose वैरिएबल को जियोस्पेशल पोज़ में बदलें:
    val earth = session?.earth ?: return
val geospatialPose = earth.getGeospatialPose(transformedPose)
  4. बदले गए अक्षांश और देशांतर की मदद से, छत पर ऐंकर बनाएं:
    earth.resolveAnchorOnRooftopAsync(
  geospatialPose.latitude, geospatialPose.longitude,
  0.0,
  transformedPose.qx(), transformedPose.qy(), transformedPose.qz(), transformedPose.qw()
) { anchor, state ->
  if (!state.isError) {
    balloonAnchors.add(anchor)
  }
}

इसे आज़माएं

  1. ऐप्लिकेशन चलाएं और अपने इलाके में किसी इमारत पर जाएं.
  2. जियोस्पेशल लोकलाइज़ेशन पूरा होने के बाद, बलून मोड पर जाएं और किसी इमारत पर टैप करें. आपको इमारत के ऊपर एक गुब्बारा दिखता है.

छतों पर गुब्बारे लगाएं

6. नतीजा

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

कोडलैब ऐप्लिकेशन का पूरा डेमो

ज़्यादा जानें