สร้างแอป Augmented Reality (AR) โดยใช้ ARCore Geospatial API ใหม่

1. ภาพรวม

ARCore เป็นเฟรมเวิร์กของ Google สำหรับการสร้างประสบการณ์ Augmented Reality บนสมาร์ทโฟน ARCore Geospatial API ใหม่จะช่วยเพิ่มมุมมองใหม่ให้กับ Augmented Reality ซึ่งจะช่วยให้คุณวางจุดอ้างอิง Augmented Reality ที่เจาะจงสถานที่ไว้รอบๆ จุดสังเกตในโลกแห่งความเป็นจริงได้

สิ่งที่คุณจะสร้าง

ใน Codelab นี้ คุณจะได้เริ่มต้นใช้งาน ARCore Geospatial API คุณจะค้นพบว่า Geospatial API มีข้อมูลใดบ้างสำหรับประสบการณ์การใช้งาน AR โดยรวม และดูว่าข้อมูลนี้สามารถขับเคลื่อนประสบการณ์การค้นหาเส้นทาง AR ง่ายๆ ได้อย่างไร

สิ่งที่คุณจะได้เรียนรู้

  • วิธีตั้งค่าโครงการ ARCore ที่ใช้ Geospatial API
  • วิธีการขอข้อมูลทางภูมิศาสตร์จาก Geospatial API และแสดงโดยใช้ Google Maps
  • วิธีวาง Anchor ที่ติดกับตำแหน่งจริง

สิ่งที่ต้องมี

2. ตั้งค่าสภาพแวดล้อมในการพัฒนาซอฟต์แวร์

ตั้งค่า Android Studio

ในการเริ่มต้นใช้งาน Geospatial API เราได้จัดเตรียมโครงการเริ่มต้นที่ประกอบด้วยพื้นฐานของโครงการ ARCore ที่ผสานรวมกับ Google Maps SDK ซึ่งจะช่วยให้คุณเริ่มต้นอย่างรวดเร็วด้วย Geospatial API

  1. เริ่ม Android Studio และนำเข้าโปรเจ็กต์จาก VCS
    • หากโปรเจ็กต์เปิดอยู่ ให้ใช้ไฟล์ > ใหม่ > โปรเจ็กต์จากการควบคุมเวอร์ชัน...
    • หากคุณเห็นหน้าต่างยินดีต้อนรับสู่ Android Studio ให้ใช้ตัวเลือกรับจาก VCS รับจากตำแหน่ง VCS
  2. เลือก Git และใช้ URL https://github.com/google-ar/codelab-geospatial.git เพื่อนำเข้าโปรเจ็กต์

ตั้งค่าโปรเจ็กต์ Google Cloud

Geospatial API ใช้ภาพ StreetView ร่วมกับข้อมูลเครื่องวัดค่าความเข้มข้นของสนามแม่เหล็กและเซ็นเซอร์กล้องของอุปกรณ์เพื่อปรับปรุงค่าการวางแนว หากต้องการใช้บริการนี้ คุณต้องตั้งค่าโปรเจ็กต์ Google Cloud

  1. สร้างโปรเจ็กต์ในคอนโซล Google Cloud ด้วยคำสั่ง
  2. เปิดใช้ API ที่จำเป็น:
    • ในแถบด้านข้าง ให้เลือก API และ บริการ ตามด้วยคลัง
    • ค้นหา ARCore API
    • คลิกเปิดใช้
    • กลับไปที่ไลบรารี
    • ค้นหา Maps SDK สำหรับ Android
    • คลิกเปิดใช้
  3. สร้างข้อมูลเข้าสู่ระบบคีย์ API:
    • ในส่วน API และ บริการ ให้เลือกข้อมูลเข้าสู่ระบบ
    • ในแถบด้านบน ให้คลิกสร้างข้อมูลเข้าสู่ระบบ แล้วเลือกคีย์ API
    • จดบันทึกคีย์ที่สร้างขึ้นตามที่คุณต้องการสำหรับขั้นตอนถัดไป กลับไปที่หน้าข้อมูลเข้าสู่ระบบหากต้องการดึงข้อมูล

ด้วยขั้นตอนเหล่านี้ คุณได้สร้างโปรเจ็กต์ Google Cloud ที่มีการให้สิทธิ์คีย์ API และพร้อมที่จะใช้ Geospatial API แล้ว

ผสานรวมคีย์ API กับโปรเจ็กต์ Android Studio

หากต้องการเชื่อมโยงคีย์ API จาก Google Cloud กับโปรเจ็กต์ ให้เปิดโปรเจ็กต์ที่สร้างใน Android Studio แล้วแก้ไขคีย์ API โดยทำดังนี้

  1. เปิด แอป > src > AndroidManifest.xml
  2. ค้นหารายการ meta-data ต่อไปนี้:
    <meta-data
    android:name="com.google.android.ar.API_KEY"
    android:value="PLACEHOLDER_API_KEY" />

<meta-data
    android:name="com.google.android.geo.API_KEY"
    android:value="PLACEHOLDER_API_KEY" />
  3. แทนที่ PLACEHOLDER_API_KEY ด้วยคีย์ API ที่สร้างในโปรเจ็กต์ Google Cloud

ค่าที่จัดเก็บไว้ใน com.google.android.ar.API_KEY จะอนุญาตให้แอปนี้ใช้ Geospatial API และค่าที่จัดเก็บไว้ใน com.google.android.geo.API_KEY จะให้สิทธิ์แอปนี้ใช้ Google Maps SDK

ยืนยันโปรเจ็กต์

ตรวจสอบว่าโปรเจ็กต์ทั้งหมดพร้อมใช้งาน เรียกใช้แอปใน Android Studio คุณควรจะเห็นมุมมองกล้องพร้อมกับแผนที่ที่ใช้งานได้ที่ด้านล่างของหน้าจอ

โปรเจ็กต์ต้นแบบ

3. กำหนดตำแหน่งของผู้ใช้

ในขั้นตอนนี้ คุณจะต้องเพิ่มโค้ดลงในโปรเจ็กต์ตัวอย่างเพื่อเริ่มต้นใช้งาน Geospatial API

กำหนดค่าเซสชัน ARCore เพื่อใช้ Geospatial API

หากต้องการรับข้อมูลภูมิสารสนเทศ คุณต้องเปิดใช้ Geospatial API เปลี่ยน GeospatialMode ในการกำหนดค่าเซสชันเป็น ENABLED โดยแก้ไขฟังก์ชัน configureSession ใน HelloGeoActivity.kt ดังนี้

fun configureSession(session: Session) {
  session.configure(
    session.config.apply {
      // Enable Geospatial Mode.
      geospatialMode = Config.GeospatialMode.ENABLED
    }
  )
}

ขณะที่โหมดภูมิสารสนเทศคือ ENABLED แอปพลิเคชันสามารถรับข้อมูลภูมิสารสนเทศได้

ขอข้อมูลจาก Geospatial API

ใน HelloGeoRenderer.kt ให้หาบรรทัดต่อไปนี้

// TODO: Obtain Geospatial information and display it on the map.

ตรวจสอบว่าออบเจ็กต์ Earth อยู่ที่ด้านล่าง ซึ่งตรงกับวันที่ trackingState TrackingState.ENABLED

val earth = session.earth
if (earth?.trackingState == TrackingState.TRACKING) {
  // TODO: the Earth object may be used here.
}

ขอข้อมูลภูมิสารสนเทศจาก ARCore ใต้ TODO เพิ่มบรรทัดนี้:

val cameraGeospatialPose = earth.cameraGeospatialPose

ซึ่งจะให้ GeospatialPose ที่มีข้อมูลต่อไปนี้

  • ตำแหน่ง แสดงเป็นละติจูดและลองจิจูด และยังมีค่าประมาณของความแม่นยำของตำแหน่งด้วย
  • ระดับความสูง และค่าประมาณความแม่นยำของระดับความสูง
  • ทิศทาง การประมาณทิศทางที่อุปกรณ์หันไป และการประมาณความแม่นยำของทิศทาง

แสดงข้อมูลตำแหน่งบนแผนที่

คุณสามารถใช้ GeospatialPose ที่เก็บไว้ในcameraGeospatialPose เพื่อย้ายเครื่องหมายบนแผนที่ซึ่งแสดงตำแหน่งที่ผู้ใช้อยู่ ดำเนินการต่อจากที่ค้างไว้และเพิ่มข้อมูลต่อไปนี้

activity.view.mapView?.updateMapPosition(
  latitude = cameraGeospatialPose.latitude,
  longitude = cameraGeospatialPose.longitude,
  heading = cameraGeospatialPose.heading
)

การทำเช่นนี้จะอัปเดตตำแหน่งแผนที่อย่างต่อเนื่องโดยใช้ค่าที่ได้รับจาก Geospatial API

ลองเลย

ใน Android Studio ให้คลิกเล่น ถืออุปกรณ์ขึ้นแล้วเคลื่อนที่ไปรอบๆ เพื่อช่วยให้ ARCore สร้างการติดตาม หลังจากนั้นสักครู่ คุณจะเห็นเครื่องหมายสีเขียวปรากฏบนแผนที่ เครื่องหมายนี้จะหมุนเมื่อคุณดูสิ่งที่อยู่รอบตัวคุณ และควรชี้ไปในทิศทางที่ถูกต้องด้วย เมื่อคุณหันหน้าไปทางทิศเหนือ ลูกศรจะชี้ไปที่ทิศเหนือด้วย

ลูกศรสีเขียวจะเลื่อนตามตำแหน่งและทิศทางของคุณ

4. วางหมุดโดยใช้พิกัด Earth

Geospatial API สามารถวาง Anchor ที่คู่พิกัดและการหมุนได้ในโลกจริง วิธีนี้ช่วยให้ผู้ใช้มองเห็นเนื้อหา Anchor เมื่อมีการเข้าชมสถานที่ที่เฉพาะเจาะจง

ในขั้นตอนนี้ คุณจะเพิ่มวิธีวางจุดยึดโดยแตะบนแผนที่

ตั้งค่าการทำงานเมื่อแตะแผนที่

โปรเจ็กต์นี้มาพร้อมกับฟังก์ชัน onMapClick ซึ่งเรียกใช้พร้อมละติจูดและลองจิจูดเมื่อมีการคลิกส่วนย่อยของแผนที่ หาฟังก์ชัน onMapClick ใน HelloGeoRenderer.kt

ตรวจสอบว่าสามารถใช้วัตถุ Earth ได้

ก่อนที่จะสร้างจุดยึดใน Earth โปรดตรวจสอบว่า TrackingState ของวัตถุของโลกคือ TRACKING ซึ่งหมายความว่าเราทราบตําแหน่งของโลกแล้ว และตรวจสอบว่า EarthState เป็น ENABLED ซึ่งหมายความว่าจะไม่พบปัญหาใดๆ กับ Geospatial API เพิ่มบรรทัดเหล่านี้ภายใน onMapClick:

val earth = session?.earth ?: return
if (earth.trackingState != TrackingState.TRACKING) {
  return
}

กำหนดตำแหน่งของ Anchor ใหม่

หลังจากยืนยันว่าวัตถุ Earth กำลังติดตามอยู่ ให้ปลด earthAnchor ก่อนหน้าออก หากมี คุณสามารถแทนที่ earthAnchor ด้วยแท็ก Anchor ใหม่ในขั้นตอนถัดไป

earthAnchor?.detach()

จากนั้นใช้ cameraGeospatialPose เพื่อกำหนดระดับความสูงของจุดยึดใหม่ ใช้คู่พิกัดจากการแตะแผนที่เป็นตำแหน่งของจุดยึด

// Place the earth anchor at the same altitude as that of the camera to make it easier to view.
val altitude = earth.cameraGeospatialPose.altitude - 1
// The rotation quaternion of the anchor in the East-Up-South (EUS) coordinate system.
val qx = 0f
val qy = 0f
val qz = 0f
val qw = 1f
earthAnchor =
  earth.createAnchor(latLng.latitude, latLng.longitude, altitude, qx, qy, qz, qw)

createAnchor สร้าง Anchor คงที่ให้กับพิกัดทางภูมิศาสตร์ที่มีการหมุนที่กำหนด จุดยึดนี้จะพยายามรักษาตำแหน่งให้นิ่งและคงที่ตามพิกัดและระดับความสูงที่ระบุ

แสดงเครื่องหมายที่วางบนแผนที่

สุดท้าย ให้ย้ายเครื่องหมายใหม่ซึ่งระบุตำแหน่งเครื่องหมาย

activity.view.mapView?.earthMarker?.apply {
  position = latLng
  isVisible = true
}

ลองเลย

ใน Android Studio ให้คลิกเล่น ถืออุปกรณ์ขึ้นและเคลื่อนโทรศัพท์ไปรอบๆ เพื่อช่วยให้ ARCore สร้างการติดตาม หลังจากนั้นสักครู่ คุณจะเห็นเครื่องหมายสีเขียวปรากฏบนแผนที่ซึ่งระบุตำแหน่งปัจจุบันของคุณ

การแตะแผนที่จะใช้ Geospatial API เพื่อวาง Anchor ซึ่งจะยึดตำแหน่งในโลกจริง ลองวาง Anchor ใกล้กับตำแหน่งปัจจุบันของคุณเพื่อมองเห็นในมุมมอง AR ควรจะมีความเสถียรขณะที่ไปยังส่วนต่างๆ ของสภาพแวดล้อม

วางเครื่องหมายโดยแตะแผนที่

5. บทสรุป

ใน Codelab นี้ คุณได้เรียนรู้วิธีใช้ Geospatial API เพื่อสร้างประสบการณ์ AR ที่เรียบง่ายโดยเชื่อมโยงกับโลกความเป็นจริง

วางเครื่องหมายโดยแตะแผนที่

สรุปประเด็นที่ได้พูดถึง

  • วิธีตั้งค่าโปรเจ็กต์ Google Cloud ที่เปิดใช้ Geospatial API
  • วิธีรับข้อมูลภูมิสารสนเทศในโครงการ ARCore แล้วแสดงข้อมูลนั้นบนแผนที่
  • วิธีวางโฆษณา Anchor ที่มีตำแหน่งอยู่ในชีวิตจริงโดยใช้ตำแหน่งทางภูมิศาสตร์

แหล่งข้อมูลเพิ่มเติม

ดูรายละเอียดเพิ่มเติมเกี่ยวกับแนวคิดทางภูมิศาสตร์และ SDK ที่ใช้ใน Codelab นี้ได้ที่แหล่งข้อมูลเพิ่มเติมต่อไปนี้