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

1. ภาพรวม

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

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

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

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

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

สิ่งที่คุณต้องมี

• อุปกรณ์ Android ที่รองรับ ARCore ซึ่งเชื่อมต่อกับคอมพิวเตอร์สำหรับการพัฒนาซอฟต์แวร์โดยใช้สาย USB และกำหนดค่าด้วยการแก้ไขข้อบกพร่องผ่าน USB
• ติดตั้งและกำหนดค่า Android Studio เพื่อสร้างแอป Android
• บริการ Google Play สำหรับ AR เวอร์ชัน 1.31 ขึ้นไปที่ติดตั้งในอุปกรณ์ Android สำหรับการพัฒนา

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

ตั้งค่า Android Studio

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

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

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

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

1. สร้างโปรเจ็กต์ในคอนโซล Google Cloud โดยทำดังนี้
   • ไปที่สร้างโปรเจ็กต์ใน Google Cloud Platform
     
   • ป้อนชื่อโปรเจ็กต์ที่เหมาะสม (เช่น "โปรเจ็กต์ ARCore Geospatial API") แล้วเลือกตำแหน่งใดก็ได้
   • คลิกสร้าง
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. เปิด app > 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.
}

ใต้ TODO ให้ขอข้อมูลเชิงพื้นที่จาก ARCore เพิ่มบรรทัดต่อไปนี้

val cameraGeospatialPose = earth.cameraGeospatialPose

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

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

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

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

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

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

ลองเลย

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

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

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

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

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

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

ตรวจสอบว่าใช้ออบเจ็กต์ Earth ได้

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

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

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

หลังจากยืนยันว่าออบเจ็กต์ Earth ติดตามแล้ว ให้ยกเลิกการเชื่อมต่อ earthAnchor ก่อนหน้า (หากมี) คุณจะแทนที่ earthAnchor ด้วยสมอเรือใหม่ในขั้นตอนถัดไปได้โดยทำดังนี้

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 ที่ยึดกับพิกัดทางภูมิศาสตร์ที่มีการหมุนที่กำหนด โดยจุดยึดนี้จะพยายามคงที่และยึดกับพิกัดและความสูงที่ระบุ

[qx, qy, qz, qw]ตัวแปรจะกำหนดการหมุนของจุดยึดที่แสดงในควอเทอร์เนียนในระบบพิกัดตะวันออก-ขึ้น-ใต้ (EUS) คุณใช้ค่าที่แตกต่างกันเพื่อหมุนจุดยึด แต่ในตัวอย่างนี้ ให้ใช้ควอเทอร์เนียนหน่วยสำหรับการหมุนเริ่มต้น การหมุนควอเทอร์เนียนหน่วยมีจุดยึดที่กำหนดทิศทางเพื่อให้ X+ ชี้ไปทางทิศตะวันออก Y+ ชี้ขึ้นจากใจกลางโลก และ Z+ ชี้ไปทางทิศใต้

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

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

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

ลองเลย

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

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

5. บทสรุป

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

สิ่งที่เราได้พูดถึงไปแล้ว

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

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

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

• เอกสารประกอบเกี่ยวกับ ARCore Geospatial API
• World Geodetic System (WGS)
• Google Maps SDK สำหรับ Android