با Streetscape Geometry و Rooftop Anchors API در ARCore شروع کنید

1. قبل از شروع

ARCore چارچوب گوگل برای ایجاد تجربیات واقعیت افزوده (AR) در گوشی های هوشمند است. Geospatial Streetscape Geometry و API های لنگر پشت بام به تجربیات AR شما کمک می کند تا ساختمان های اطراف کاربرانتان را درک کند.

در این کد لبه، شما یک برنامه واقعیت افزوده می‌سازید که هندسه منظره خیابان را در منطقه شما تجسم می‌کند و به شما امکان می‌دهد کناره‌های آن را تزئین کنید. سپس از لنگرهای پشت بام برای افزودن دکوراسیون به بالای پشت بام های اطراف خود استفاده می کنید.

نسخه ی نمایشی کامل برنامه Codelab

پیش نیازها

چیزی که یاد خواهید گرفت

  • نحوه راه اندازی یک پروژه Google Cloud که می تواند از ARCore Geospatial API استفاده کند.
  • نحوه بدست آوردن هندسه نمای خیابان از Geospatial API.
  • نحوه تجسم ساختمان ها و زمین های به دست آمده از هندسه منظره خیابان.
  • نحوه انجام محاسبات پایه بر روی چند ضلعی های به دست آمده.
  • نحوه انجام تست ضربه بر روی هندسه.
  • چگونه از لنگرهای پشت بام برای چسباندن محتوا به بالای ساختمان ها استفاده کنیم.

آنچه شما نیاز دارید

2. محیط خود را تنظیم کنید

برای استفاده از Geospatial API با Kotlin و Android Studio، به یک پروژه Google Cloud و پروژه شروع ما نیاز دارید.

یک پروژه Google Cloud راه اندازی کنید

ARCore Geospatial API به Google Cloud متصل می شود تا اطلاعات محلی سازی را از سیستم موقعیت یابی بصری (VPS) Google در مناطق تحت پوشش نمای خیابان Google ارائه دهد.

برای استفاده از این سرور در پروژه خود، مراحل زیر را دنبال کنید:

  1. یک پروژه در Google Cloud ایجاد کنید. یک پروژه Google Cloud ایجاد کنید
  2. در قسمت نام پروژه ، یک نام مناسب مانند ARCore Geospatial API project وارد کنید و هر مکانی را انتخاب کنید.
  3. روی ایجاد کلیک کنید.
  4. در کنسول Google Cloud در صفحه انتخابگر پروژه، روی ایجاد پروژه کلیک کنید.
  5. برای مشاهده ARCore API برای این پروژه روی لینک زیر کلیک کنید و روی Enable کلیک کنید:
  6. یک کلید API برای پروژه خود ایجاد کنید:
    1. در بخش APIs & services ، اعتبارنامه ها را انتخاب کنید.
    2. روی Create credentials کلیک کنید و کلید API را انتخاب کنید.
    3. به کلید توجه کنید زیرا بعداً به آن نیاز دارید.

شما یک پروژه Google Cloud با مجوز کلید API ایجاد کردید و آماده استفاده از Geospatial API در پروژه نمونه هستید.

Android Studio را راه اندازی کنید

برای شروع با Geospatial API، ما یک پروژه آغازین ارائه کردیم که شامل اصول اولیه یک پروژه ARCore یکپارچه با Geospatial API است.

برای راه اندازی اندروید استودیو مراحل زیر را دنبال کنید:

  1. Android Studio را باز کنید و یکی از موارد زیر را انجام دهید:
    • اگر قبلاً پروژه ای باز دارید، روی File > New > Project from version control کلیک کنید.
    • اگر پنجره خوش آمدید به Android Studio را مشاهده کردید، روی دریافت از VCS کلیک کنید. از محل VCS دریافت کنید
  2. Git را انتخاب کنید و https://github.com/google-ar/codelab-streetscape-geometry-rooftop-anchors.git را وارد کنید تا پروژه وارد شود.

کلید API را با پروژه Android Studio یکپارچه کنید

برای مرتبط کردن کلید API از 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 را با کلید API که در پروژه 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 فعال هستند، برنامه شما می‌تواند اطلاعات مربوط به هندسه نمای خیابان را در اطراف کاربر دریافت کند.

هندسه منظره خیابان را بدست آورید

  1. در فایل StreetscapeGeometryActivity.kt خط زیر را پیدا کنید: 
    // TODO: Obtain Streetscape Geometry.
  2. بعد از این خط، هندسه Streetscape را با گرفتن تمام اشیاء Trackable و فیلتر کردن توسط StreetscapeGeometry بدست آورید:
    val streetscapeGeometry = session.getAllTrackables(StreetscapeGeometry::class.java)
    شما از این هندسه ها در تجسم ساده ای که در پروژه نمونه ارائه شده است استفاده می کنید. این تجسم هر چند ضلعی ساختمان یا زمین را به رنگی متفاوت نشان می دهد.
  3. در خط بعدی کد زیر را اضافه کنید: 
    streetscapeGeometryRenderer.render(render, streetscapeGeometry)
  4. برنامه خود را اجرا کنید و از ساختمانی در منطقه خود بازدید کنید.
  5. پس از تکمیل محلی سازی Geospatial، روی ضربه بزنید نماد تنظیمات تنظیمات و فعال کردن تجسم هندسه خیابان.
  6. به یک ساختمان در AR نگاه کنید. هر ساختمان بخش‌بندی شده رنگ خاص خود را دارد و شماره‌های Quality و Type هندسه مرکزی نمایش داده می‌شوند.

هندسه Streetscape در برنامه نمایش داده می شود

4. یک تست آماری با داده‌های هندسه نمای خیابان انجام دهید

اکنون که می توانید هندسه منظره خیابان را ببینید، می توانید از تست ضربه برای تزئین ساختمان استفاده کنید. تست ضربه تقاطع بین هندسه مجازی و پرتو را پیدا می کند. برای یافتن هندسه ای که کاربر روی آن ضربه می زند، از تست ضربه استفاده می کنید.

تست ضربه را انجام دهید

در این قسمت زمانی که کاربر بر روی هندسه آن ضربه می زند ستاره ای را در نمای ساختمان قرار می دهید. شما این کار را با یک تست ضربه از دیدگاه کاربر در جهان انجام می دهید و ثبت می کنید که در هنگام خروج با کدام اشیاء AR مواجه می شود. سپس از این اطلاعات برای بررسی اینکه آیا کاربر از چند ضلعی ساختمان ضربه زده است یا خیر استفاده می کنید.

  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 برای نمایش ستاره ها در نمای AR استفاده می شود.

آن را امتحان کنید

  1. برنامه خود را اجرا کنید و از ساختمانی در منطقه خود بازدید کنید.
  2. پس از تکمیل مکان یابی مکانی، دوربین خود را به سمت ساختمان گرفته و روی صفحه ضربه بزنید. شما می بینید که یک ستاره روی ساختمان در مرکز صفحه ظاهر می شود.

ستاره ها در برنامه قرار می گیرند

5. از داده های پشت بام لنگر استفاده کنید

در نهایت، از لنگرهای پشت بام برای افزودن تزئینات به بالای ساختمان استفاده می کنید. لنگرهای پشت بام به شما کمک می کنند لنگرهای AR را به بالای ساختمان ها با طول و عرض جغرافیایی بچسبانید. شما از این لنگرها برای اتصال بالن به ساختمان های اطراف کاربر استفاده می کنید.

رفتارها را به حالت بالون اضافه کنید

این پروژه دارای دو حالت قرار دادن دارایی است: حالت آفتابگردان که قبلاً استفاده کرده اید و حالت بالون.

برای برنامه ریزی رفتار برای حالت بالون، این مراحل را دنبال کنید:

  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. نتیجه گیری

تبریک می گویم! شما یک برنامه واقعیت افزوده ساخته اید که هندسه منظره خیابان را در منطقه شما تجسم می کند و به شما امکان می دهد کناره های آن را با ستاره تزئین کنید. شما همچنین از لنگرهای پشت بام برای اضافه کردن یک بالون به بالای پشت بام های اطراف خود استفاده کردید.

نسخه ی نمایشی کامل برنامه Codelab

بیشتر بدانید