เริ่มต้นใช้งาน API เรขาคณิตของภาพถนนและ API แองเคอร์บนหลังคาใน ARCore

1. ก่อนเริ่มต้น

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

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

การสาธิตแอป Codelab แบบเต็ม

ข้อกำหนดเบื้องต้น

  • ความรู้พื้นฐานเกี่ยวกับ AR
  • ความรู้พื้นฐานเกี่ยวกับ ARCore Geospatial API

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

  • วิธีตั้งค่าโปรเจ็กต์ 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 Street View ครอบคลุม

หากต้องการใช้เซิร์ฟเวอร์นี้ในโปรเจ็กต์ ให้ทำตามขั้นตอนต่อไปนี้

  1. สร้างโปรเจ็กต์ใน Google Cloudสร้างโปรเจ็กต์ Google Cloud
  2. ในช่องชื่อโปรเจ็กต์ ให้ป้อนชื่อที่เหมาะสม เช่น ARCore Geospatial API project แล้วเลือกสถานที่ตั้ง
  3. คลิกสร้าง
  4. ในคอนโซล Google Cloud ในหน้าตัวเลือกโปรเจ็กต์ ให้คลิกสร้างโปรเจ็กต์
  5. คลิกลิงก์ต่อไปนี้เพื่อดู ARCore API สำหรับโปรเจ็กต์นี้ แล้วคลิกเปิดใช้
  6. สร้างคีย์ API สำหรับโปรเจ็กต์ของคุณ
    1. ในส่วน API และบริการ ให้เลือกข้อมูลเข้าสู่ระบบ
    2. คลิกสร้างข้อมูลเข้าสู่ระบบ แล้วเลือกคีย์ API
    3. จดคีย์ไว้เนื่องจากคุณต้องใช้ในภายหลัง

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

ตั้งค่า Android Studio

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

หากต้องการตั้งค่า Android Studio ให้ทำตามขั้นตอนต่อไปนี้

  1. เปิด Android Studio แล้วทำอย่างใดอย่างหนึ่งต่อไปนี้
    • หากเปิดโปรเจ็กต์อยู่แล้ว ให้คลิกไฟล์ > ใหม่ > โปรเจ็กต์จากการควบคุมเวอร์ชัน
    • หากเห็นหน้าต่างยินดีต้อนรับสู่ 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 และโหมดเรขาคณิตของภาพถนน แอปจะรับข้อมูลเรขาคณิตของภาพถนนรอบๆ ผู้ใช้ได้

รับรูปทรงเรขาคณิตของภาพถนน

  1. ในไฟล์ StreetscapeGeometryActivity.kt ให้ค้นหาบรรทัดต่อไปนี้
    // TODO: Obtain Streetscape Geometry.
  2. หลังจากบรรทัดนี้ ให้รับรูปทรงของสตรีทสเคปโดยรับออบเจ็กต์ Trackable ทั้งหมดและกรองตาม StreetscapeGeometry ดังนี้
    val streetscapeGeometry = session.getAllTrackables(StreetscapeGeometry::class.java)
    คุณใช้รูปทรงเรขาคณิตเหล่านี้ในการแสดงภาพอย่างง่ายที่อยู่ในโปรเจ็กต์ตัวอย่าง ภาพนี้จะแสดงรูปหลายเหลี่ยมของอาคารหรือภูมิประเทศแต่ละแห่งด้วยสีที่ต่างกัน
  3. ในบรรทัดถัดไป ให้เพิ่มโค้ดต่อไปนี้
    streetscapeGeometryRenderer.render(render, streetscapeGeometry)
  4. เรียกใช้แอปและไปที่อาคารในพื้นที่ของคุณ
  5. หลังจากแปลเป็นภาษาท้องถิ่นเชิงพื้นที่เสร็จแล้ว ให้แตะ ไอคอนการตั้งค่า Settings แล้วเปิดใช้การแสดงภาพเรขาคณิตของสตรีทสเคป
  6. ดูอาคารใน AR อาคารแต่ละหลังที่แบ่งส่วนจะมีสีของตัวเอง และจะแสดง Quality และ Type Enums ของรูปทรงเรขาคณิตที่อยู่ตรงกลางมากที่สุด

รูปทรงของภาพถนนจะแสดงในแอป

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 จะกำหนดตำแหน่งที่เหมาะสมในการวางดาวโดยดูที่ท่าทางของ Hit ออบเจ็กต์ starAnchors ใช้ในการแสดงผลดาวในมุมมอง AR

ลองใช้

  1. เรียกใช้แอปและไปที่อาคารในพื้นที่ของคุณ
  2. หลังจากระบุตำแหน่งเชิงพื้นที่เสร็จแล้ว ให้เล็งกล้องไปที่อาคารแล้วแตะหน้าจอ คุณจะเห็นดาวปรากฏบนอาคารที่อยู่ตรงกลางหน้าจอ

ระบบจะใส่ดาวในแอป

5. ใช้ข้อมูลจุดยึดบนหลังคา

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

เพิ่มลักษณะการทำงานในโหมดบอลลูน

โปรเจ็กต์มีโหมดการวางชิ้นงาน 2 โหมด ได้แก่ โหมดดอกทานตะวันที่คุณใช้ไปแล้ว และโหมดบอลลูน

หากต้องการตั้งโปรแกรมลักษณะการทำงานสำหรับโหมดบอลลูน ให้ทำตามขั้นตอนต่อไปนี้

  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. บทสรุป

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

การสาธิตแอป Codelab แบบเต็ม

ดูข้อมูลเพิ่มเติม