ARCore'da Streetscape Geometry ve Rooftop Anchors API'lerini kullanmaya başlama

1. Başlamadan önce

ARCore, akıllı telefonlarda artırılmış gerçeklik (AR) deneyimleri oluşturmak için Google'ın kullandığı çerçevedir. Geospatial Streetscape Geometry ve Rooftop Anchor API'leri, AR deneyimlerinizin kullanıcılarınızın etrafındaki binaları anlamasına yardımcı olur.

Bu codelab'de, bölgenizdeki sokak görünümü geometrisini görselleştiren ve kenarlarını süslemenize olanak tanıyan bir AR uygulaması oluşturacaksınız. Ardından, çevrenizdeki çatıların tepesine dekorasyon eklemek için çatı ankrajlarını kullanırsınız.

Codelab uygulamasının tam demosu

Ön koşullar

Neler öğreneceksiniz?

  • ARCore Geospatial API'lerini kullanabilen bir Google Cloud projesi oluşturma
  • Geospatial API'den sokak görünümü geometrisi elde etme
  • Sokak görünümü geometrisinden elde edilen binaları ve arazileri görselleştirme
  • Elde edilen poligonlarda temel hesaplamalar yapma
  • Geometri üzerinde isabet testi gerçekleştirme
  • İçerikleri binaların tepesine eklemek için çatı ankrajlarını kullanma

İhtiyacınız olanlar

2. Ortamınızı ayarlama

Geospatial API'leri Kotlin ve Android Studio ile kullanmak için Google Cloud projeniz ve başlangıç projemiz olmalıdır.

Google Cloud projesi oluşturun

ARCore Geospatial API, Google Street View'in kapsadığı alanlarda Google'ın Görsel Konumlandırma Sistemi'nden (VPS) konum bilgisi sağlamak için Google Cloud'a bağlanır.

Bu sunucuyu projenizde kullanmak için aşağıdaki adımları uygulayın:

  1. Google Cloud'da bir proje oluşturun.Google Cloud projesi oluşturma
  2. Proje adı alanına uygun bir ad girin (ör. ARCore Geospatial API project) ve herhangi bir konum seçin.
  3. Oluştur'u tıklayın.
  4. Proje seçici sayfasındaki Google Cloud Console'da Proje Oluştur'u tıklayın.
  5. Bu proje için ARCore API'yi görüntülemek üzere aşağıdaki bağlantıyı tıklayın ve Etkinleştir'i tıklayın:
  6. Projeniz için bir API anahtarı oluşturun:
    1. API'ler ve hizmetler bölümünde Kimlik bilgileri'ni seçin.
    2. Kimlik bilgileri oluştur'u tıklayın ve API anahtarı'nı seçin.
    3. Anahtarı not edin. Bu anahtara daha sonra ihtiyacınız olacaktır.

API anahtarı yetkilendirmesiyle bir Google Cloud projesi oluşturdunuz ve örnek projede Geospatial API'yi kullanmaya hazırsınız.

Android Studio'yu kurma

Geospatial API'yi kullanmaya başlamak için Geospatial API ile entegre bir ARCore projesinin temel özelliklerini içeren bir başlangıç projesi sağladık.

Android Studio'yu kurmak için aşağıdaki adımları uygulayın:

  1. Android Studio'yu açın ve aşağıdakilerden birini yapın:
    • Zaten açık bir projeniz varsa Dosya > Yeni > Sürüm kontrolünden proje'yi tıklayın.
    • Welcome to Android Studio (Android Studio'ya Hoş Geldiniz) penceresini görürseniz Get from VCS'yi (VCS'den Al) tıklayın. VCS konumundan alma
  2. Git'i seçin ve projeyi içe aktarmak için https://github.com/google-ar/codelab-streetscape-geometry-rooftop-anchors.git girin.

API anahtarını Android Studio projesine entegre etme

Google Cloud'daki API anahtarını projenizle ilişkilendirmek için aşağıdaki adımları uygulayın:

  1. Android Studio'da app > src'yi tıklayın ve AndroidManifest.xml'ı çift tıklayın.
  2. Aşağıdaki meta-data girişlerini bulun:
    <meta-data
        android:name="com.google.android.ar.API_KEY"
        android:value="API_KEY" />
    
  3. API_KEY yer tutucusunu Google Cloud projenizde oluşturduğunuz API anahtarıyla değiştirin. com.google.android.ar.API_KEY içinde depolanan değer, bu uygulamayı Geospatial API'yi kullanmak için yetkilendirir.

Projenizi doğrulama

  • Projenizi doğrulamak için uygulamanızı geliştirme cihazınızda çalıştırın. Ekranın üst kısmında kamera görünümü ve coğrafi uzamsal hata ayıklama bilgilerini görmeniz gerekir. Ayrıca işlevselliği olmayan düğmeler ve kontroller de görürsünüz. Bu işlevselliği, bu codelab boyunca projenize programlarsınız.

Uygulamada coğrafi bilgiler gösterilir.

3. Sokak görünümü geometrisi verilerini görselleştirme

Geospatial API'nin cihazınızda çalıştığını onayladıktan sonra Geospatial API'den sokak görünümü geometrisi alırsınız.

Sokak görünümü geometrisini etkinleştirme

  1. StreetscapeGeometryActivity.kt dosyasında aşağıdaki satırı bulun:
    // TODO: Enable Streetscape Geometry.
    
  2. Bu satırdan sonra streetscape-geometry modunu etkinleştirin:
    streetscapeGeometryMode = Config.StreetscapeGeometryMode.ENABLED
    
    Geospatial API ve streetscape-geometry modu etkinleştirildiğinde uygulamanız, kullanıcı etrafındaki streetscape-geometry bilgilerini alabilir.

Sokak görünümü geometrisi elde etme

  1. StreetscapeGeometryActivity.kt dosyasında aşağıdaki satırı bulun:
    // TODO: Obtain Streetscape Geometry.
    
  2. Bu satırdan sonra, tüm Trackable nesnelerini alıp StreetscapeGeometry ile filtreleyerek sokak görünümü geometrisini elde edin:
    val streetscapeGeometry = session.getAllTrackables(StreetscapeGeometry::class.java)
    
    Bu geometrileri, örnek projede sağlanan basit bir görselleştirmede kullanırsınız. Bu görselleştirme, her bina veya arazi poligonunu farklı bir renkte gösterir.
  3. Bir sonraki satıra aşağıdaki kodu ekleyin:
    streetscapeGeometryRenderer.render(render, streetscapeGeometry)
    
  4. Uygulamanızı çalıştırın ve bölgenizdeki bir binayı ziyaret edin.
  5. Coğrafi uzamsal yerelleştirme tamamlandıktan sonra Ayarlar simgesi Ayarlar'a dokunun ve sokak görünümü geometrisi görselleştirmesini etkinleştirin.
  6. Bir binaya AR'de bakın. Her segmentlenmiş binanın kendi rengi vardır ve en ortadaki geometrinin Quality ve Type Enum'ları gösterilir.

Uygulamada Streetscape geometrisi gösterilir.

4. Sokak görünümü geometrisi verileriyle isabet testi gerçekleştirme

Artık sokak görünümü geometrisini görebildiğiniz için binayı dekore etmek için isabet testi kullanabilirsiniz. İsabet testi, sanal geometri ile ışın arasındaki kesişimi bulur. Kullanıcının dokunduğu geometriyi bulmak için isabet testi kullanırsınız.

Vuruş testi yapma

Bu bölümde, kullanıcı binanın geometrisine dokunduğunda binanın cephesine yıldız yerleştirirsiniz. Bunu, kullanıcının bakış açısıyla dünyada bir isabet testi yaparak ve çıkışta karşılaştığı AR nesnelerini kaydederek yaparsınız. Ardından, kullanıcının bir bina poligonuna dokunup dokunmadığını kontrol etmek için bu bilgileri kullanırsınız.

  1. StreetscapeCodelabRenderer.kt dosyasında aşağıdaki satırı bulun:
    // TODO: determine the Streetscape Geometry at the center of the viewport
    
  2. Bu satırdan sonra aşağıdaki kodu ekleyin:
    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
    
    Bu kod, bina olan bir sokak görünümü geometrisi bulmak için merkez koordinatlarını kullanır. Bu sonucu süsleme eklemek için kullanırsınız.

Dokunulduğunda yıldız süslemesi ekleme

  1. StreetscapeCodelabRenderer.kt dosyasında aşağıdaki satırı bulun:
    // TODO: Create an anchor for a star, and add it to the starAnchors object.
    
  2. Bu satırdan sonra aşağıdaki kodu ekleyin:
    val transformedPose = ObjectPlacementHelper.createStarPose(hit.hitPose)
    val anchor = hit.trackable.createAnchor(transformedPose)
    starAnchors.add(anchor)
    
    ObjectPlacementHelper sınıfı, isabet pozuna bakarak yıldızınızı yerleştirmek için uygun bir konum belirler. starAnchors nesnesi, artırılmış gerçeklik görünümünde yıldızları oluşturmak için kullanılır.

Dene

  1. Uygulamanızı çalıştırın ve bölgenizdeki bir binayı ziyaret edin.
  2. Coğrafi uzamsal yerelleştirme tamamlandıktan sonra kameranızı binaya doğrultup ekrana dokunun. Ekranın ortasındaki binada bir yıldız görünür.

Yıldızlar uygulamaya yerleştirilir

5. Çatı bağlantı noktası verilerini kullanma

Son olarak, binanın tepesine dekorasyon eklemek için çatı ankrajlarını kullanırsınız. Çatı sabitleyicileri, enlem ve boylam bilgisiyle binaların tepesine AR sabitleyicileri eklemenize yardımcı olur. Bu tutturucuları, kullanıcının etrafındaki binalara balon eklemek için kullanırsınız.

Balon moduna davranış ekleme

Projenin iki öğe yerleştirme modu vardır: daha önce kullandığınız ayçiçeği modu ve balon modu.

Balon modu için davranışı programlamak üzere aşağıdaki adımları uygulayın:

  1. StreetscapeCodelabRenderer.kt dosyasında aşağıdaki satırı bulun:
    // TODO: Create an anchor for a balloon and add it to the balloonAnchors object.
    
  2. Balonunuz için harika bir nokta oluşturmak üzere hit pozunu kullanın:
    val transformedPose = ObjectPlacementHelper.createBalloonPose(frame.camera.pose, hit.hitPose)
    
  3. transformedPose değişkenini coğrafi uzamsal duruşa dönüştürün:
    val earth = session?.earth ?: return
    val geospatialPose = earth.getGeospatialPose(transformedPose)
    
  4. Dönüştürülmüş enlem ve boylam ile çatı ankrajı oluşturun:
    earth.resolveAnchorOnRooftopAsync(
      geospatialPose.latitude, geospatialPose.longitude,
      0.0,
      transformedPose.qx(), transformedPose.qy(), transformedPose.qz(), transformedPose.qw()
    ) { anchor, state ->
      if (!state.isError) {
        balloonAnchors.add(anchor)
      }
    }
    

Deneyin

  1. Uygulamanızı çalıştırın ve bölgenizdeki bir binayı ziyaret edin.
  2. Coğrafi uzamsal yerelleştirme tamamlandıktan sonra balon moduna geçin ve bir binaya dokunun. Binanın üzerinde bir balon görünür.

Çatılara balon yerleştirme

6. Sonuç

Tebrikler! Bölgenizdeki sokak görünümü geometrisini görselleştiren ve kenarlarını yıldızlarla süslemenize olanak tanıyan bir AR uygulaması geliştirdiniz. Ayrıca, çevrenizdeki çatıların tepesine balon eklemek için çatı ankrajları da kullandınız.

Codelab uygulamasının tam demosu

Daha fazla bilgi