สร้างด้วย Geospatial Creator และ Places API จาก Google Maps Platform

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

Geospatial Creator ใน Unity ซึ่งขับเคลื่อนโดย ARCore และ 3D Tiles ที่สมจริงจาก Google Maps Platform ช่วยให้คุณสร้างและแสดงภาพประสบการณ์ Augmented Reality (AR) สำหรับละติจูดและลองจิจูดที่เฉพาะเจาะจงได้อย่างรวดเร็ว ทั้งหมดนี้ทำได้ภายใน Unity Editor วิธีนี้ช่วยลดเวลาในการสร้างฉาก AR ที่ระบุตำแหน่งทางภูมิศาสตร์ฉากเดียวสำหรับแอปได้อย่างมาก แต่จะเกิดอะไรขึ้นหากคุณต้องการสร้างประสบการณ์ที่คล้ายกันหลายรายการในสถานที่ต่างๆ คุณยังทำเช่นนี้ได้ด้วยการใช้ C# API ใน Geospatial Creator

ในโค้ดแล็บนี้ คุณจะได้เขียนโค้ด C# ที่ใช้ Geospatial Creator และ Places API จาก Google Maps Platform เพื่อสร้างประสบการณ์ด้านข้อมูลเชิงพื้นที่หลายรายการโดยใช้เทมเพลตเริ่มต้น คุณสามารถสำรวจและปรับแต่งประสบการณ์การใช้งานที่ได้ใน Unity Editor ก่อนที่จะคอมไพล์เป็นแอป

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

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

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

• วิธีใช้ API ใน Geospatial Creator เพื่อสร้างและแสดงภาพประสบการณ์ที่อิงตามตำแหน่งทางภูมิศาสตร์ในหลายสถานที่
• วิธีใช้ Places API จาก Google Maps Platform เพื่อค้นหาตำแหน่งของสถานที่
• วิธีเรียกใช้ประสบการณ์ AR บนอุปกรณ์

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

• อุปกรณ์ Android หรือ iOS ที่รองรับ ARCore

2. ตั้งค่าสภาพแวดล้อม

หากต้องการใช้ Geospatial Creator คุณต้องตั้งค่าการให้สิทธิ์เพื่อเข้าถึง 3D Tiles แบบสมจริง บริการ ARCore ใน Google Cloud และ Places API จาก Google Maps Platform

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

Codelab นี้กำหนดให้ต้องมีโปรเจ็กต์ Google Cloud ที่เปิดใช้การเรียกเก็บเงินเพื่อเข้าถึง Server API ของ Google คุณต้องตั้งค่าการเรียกเก็บเงินสำหรับ Codelab นี้ แต่ระบบจะเรียกเก็บเงินจากคุณก็ต่อเมื่อโปรเจ็กต์ใช้บริการแบบไม่มีค่าใช้จ่ายเกินโควต้า

หากต้องการตั้งค่าโปรเจ็กต์ใน Google Cloud ให้ทำตามขั้นตอนต่อไปนี้

1. สร้างโปรเจ็กต์ใน Google Cloud Console
2. ในกล่องข้อความชื่อโปรเจ็กต์ ให้ป้อนชื่อที่เหมาะสม เช่น ARCore Geospatial Project แล้วเลือกสถานที่ตั้ง
3. คลิกสร้าง
4. ในคอนโซล Google Cloud ในหน้าตัวเลือกโปรเจ็กต์ ให้คลิกสร้างโปรเจ็กต์
5. ดูเปิดใช้การเรียกเก็บเงิน และตรวจสอบราคาสำหรับ 3D Tiles ที่สมจริงและราคาสำหรับ Places API (ใหม่)

เปิดใช้ Map Tiles API

Map Tiles API มีชิ้นส่วนแผนที่ 3 มิติแบบสมจริงซึ่งมองเห็นได้ใน Unity Editor

• หากต้องการเปิดใช้ Map Tiles API ให้คลิกปุ่มต่อไปนี้ แล้วเลือกเปิดใช้:
  เปิดใช้ Map Tiles API

เปิดใช้ ARCore API

ARCore API ใน Google Cloud ช่วยให้คุณเข้าถึง ARCore Geospatial API ในอุปกรณ์เป้าหมายได้

• หากต้องการเปิดใช้ ARCore API ให้คลิกปุ่มต่อไปนี้ แล้วเลือกเปิดใช้
  เปิดใช้ ARCore API

เปิดใช้ Places API

Places API จาก Google Maps Platform ช่วยให้คุณรับข้อมูลตำแหน่งสำหรับสถานที่กว่า 200 ล้านแห่ง ซึ่งคุณจะใช้ใน Codelab เพื่อค้นหาสถานที่ที่เกี่ยวข้อง API นี้ให้ผลการค้นหาและพิกัดทางภูมิศาสตร์ของสถานที่

• หากต้องการเปิดใช้ Places API ให้คลิกปุ่มต่อไปนี้ แล้วเลือกเปิดใช้:
  เปิดใช้ Places API

สร้างคีย์ API สำหรับโปรเจ็กต์

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

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

ตั้งค่าซอฟต์แวร์

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

1. โคลนที่เก็บนี้
2. ดาวน์โหลด Unity Hub แล้วใช้เพื่อติดตั้ง Unity เวอร์ชัน 2022.3 ตรวจสอบว่าคุณกำลังติดตั้งเครื่องมือบิลด์ที่ไม่บังคับสำหรับ Android หรือ iOS
3. ใน Unity Hub ให้กดเพิ่ม > เพิ่มโปรเจ็กต์จากดิสก์
4. ในแผงลำดับชั้น ให้เลือกต้นทางของ AR Geospatial Creator
5. ในกล่องข้อความคีย์ API ของ Google Maps Tile ให้แทรกคีย์ API แล้วกด Enter (หรือ return ใน macOS)
6. ใน Edit > Project Settings > XR Plug-in Management > ARCore Extensions ให้ใช้การตรวจสอบสิทธิ์คีย์ API สำหรับ Android หรือ iOS แล้วแทรกคีย์ API
7. ในไฟล์ > การตั้งค่าการสร้าง ให้เปลี่ยนแพลตฟอร์มเป้าหมายเป็น Android หรือ iOS

3. สร้างสมอแรก

ใน Codelab นี้ คุณจะได้สร้าง Anchor ใน AR ที่ใช้ได้ในหลายสถานที่ คุณใช้ห้องสมุดสาธารณะในซานฟรานซิสโก รัฐแคลิฟอร์เนีย เป็นตัวอย่าง แต่คุณสามารถใช้สถานที่ใกล้เคียงได้

เกี่ยวกับคอมโพเนนต์ต้นทางของ Geospatial Creator

ฉาก Unity แต่ละฉากที่สร้างด้วย Geospatial Creator ต้องมีต้นทาง Geospatial Creator เพียง 1 รายการ ออบเจ็กต์เกมนี้เป็นจุดอ้างอิงสำหรับการแปลงค่าละติจูด ลองจิจูด และระดับความสูงในโลกจริงเป็นพิกัดเกม Unity

โปรเจ็กต์ตัวอย่างมีต้นทางของ Geospatial Creator ซึ่งใช้ Cesium ในการแสดงผล 3D Tiles ที่สมจริงในมุมมอง Scene ของเอดิเตอร์ และช่วยให้คุณเห็นภาพตำแหน่งที่เนื้อหา AR จะปรากฏในโลกได้อย่างแม่นยำ

ย้ายจุดเริ่มต้น

ย้ายต้นทางของ Geospatial Creator ไปยังละติจูดและลองจิจูดของสาขาห้องสมุดหลักในซานฟรานซิสโก

หากต้องการใช้การผสานรวมในตัวของ Geospatial Creator กับ Places API เพื่อย้ายต้นทางไปยังตำแหน่งที่ถูกต้องโดยอัตโนมัติ ให้ทำตามขั้นตอนต่อไปนี้

1. ในแผงลำดับชั้น ให้เลือกออบเจ็กต์เกม Geospatial Creator Origin
2. ในแผงเครื่องมือตรวจสอบ ให้คลิกค้นหาสถานที่
3. พิมพ์ San Francisco Public Library ในกล่องโต้ตอบการค้นหา ผลลัพธ์แรกควรอยู่ที่ 100 Larkin Street
4. คลิกใช้กับออบเจ็กต์เพื่อใช้ผลการค้นหากับต้นทาง คุณควรเห็นว่าละติจูดและลองจิจูดของต้นทางอัปเดตเป็นพิกัดใหม่

เพิ่มจุดยึด Geospatial Creator ลงในฉาก

เมื่อมีต้นทางแล้ว ให้เพิ่ม Anchor ของ Geospatial Creator โดยใช้ GameObject > XR > AR Geospatial Creator Anchor โดยค่าเริ่มต้น จุดยึดจะอยู่ร่วมกับต้นทาง

ใช้จุดยึดนี้เพื่อวางตำแหน่งเนื้อหา AR 3 มิติ โปรเจ็กต์ตัวอย่างจะมีโมเดล 3 มิติของหนังสือ

หากต้องการวางหนังสือในฉาก ให้ทำตามขั้นตอนต่อไปนี้

1. ในแผงโปรเจ็กต์ ให้ลากโมเดลหนังสือไปยังแผงมุมมองเอดิเตอร์
2. ในแผงลำดับชั้น ให้ตรวจสอบว่าหนังสือเป็นองค์ประกอบย่อยของจุดยึดที่คุณสร้างไว้ก่อนหน้านี้ ระบบจะวางตำแหน่งออบเจ็กต์เกมย่อยของ Anchor Geospatial Creator โดยสัมพันธ์กับ Anchor
3. ในแผงลำดับชั้น ให้เลือกหนังสือ ตั้งค่าตำแหน่งเป็น 0, 0, 0

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

แม้ว่าคุณจะย้ายออบเจ็กต์ในเอดิเตอร์เพื่อค้นหาความสูง WGS84 โดยประมาณได้ แต่เราขอแนะนำให้กำหนดค่า Geospatial Anchors เป็น Rooftop Anchor ในกรณีนี้เพื่อให้ระบบแก้ไขความสูงโดยอัตโนมัติเมื่อเทียบกับหลังคาของโครงสร้างที่อยู่เหนือออบเจ็กต์

• โดยเปิดแผงเครื่องมือตรวจสอบของ Anchor แล้วตั้งค่าพร็อพเพอร์ตี้ Altitude Type เป็น Rooftop

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

• หากต้องการให้โมเดลลอยอยู่เหนือดาดฟ้าของห้องสมุดแทนที่จะวางอยู่บนดาดฟ้า ให้เปลี่ยนพารามิเตอร์ Altitude relative to rooftop เป็น 15 เมตรเหนือดาดฟ้า

ตอนนี้โมเดลลอยอยู่เหนือห้องสมุดอย่างสวยงาม

ตอนนี้โปรเจ็กต์ของคุณมีฉาก AR ภูมิสารสนเทศเชิงพื้นที่ที่สมบูรณ์แล้ว ซึ่งรวมถึงคอมโพเนนต์ระบบ AR ที่จำเป็นทั้งหมด ต้นกำเนิดของ Geospatial Creator และจุดยึด 1 จุดที่มีโมเดลแนบอยู่

จากนั้นทำเครื่องหมายซ้ำที่ตำแหน่งอื่นๆ ในห้องสมุด

4. ค้นหาตำแหน่งยึดใหม่ด้วย Places API

Places API จาก Google Maps Platform ช่วยให้คุณรับข้อมูลตำแหน่งสำหรับสถานที่กว่า 200 ล้านแห่งได้ ในโค้ดแล็บนี้ คุณจะใช้ API นี้เพื่อค้นหาสาขาอื่นๆ ของห้องสมุดสาธารณะในซานฟรานซิสโก และใช้ผลลัพธ์เหล่านั้นเพื่อสร้างสมอของ Geospatial Creator สำหรับผลการค้นหา 10 รายการถัดไป

• หากต้องการเริ่มต้น ให้คลิกชิ้นงาน > สคริปต์ > เอดิเตอร์ แล้วเปิดไฟล์ "AnchorDuplicator.cs" ไฟล์นี้มีโค้ด Boilerplate บางส่วนที่จะช่วยให้คุณเริ่มต้นใช้งาน Places API และแยกวิเคราะห์ผลลัพธ์ได้

ตรวจสอบสิทธิ์ด้วย Places API

1. ค้นหาบรรทัดต่อไปนี้ในคลาส AnchorDuplicator

   private const string API_KEY = "<YOUR_API_KEY_HERE>";
   

2. แทนที่ <YOUR_API_KEY_HERE> ด้วยคีย์ที่ได้รับในขั้นตอนการตั้งค่า

ค้นหาข้อความค้นหาใน Places API

เมื่อตั้งค่าการให้สิทธิ์ Places API เสร็จแล้ว คุณจะเขียนโค้ดที่เริ่มต้นคำขอ POST ได้

• โดยค้นหาCreatePlacesRequestเมธอด แล้วใช้คำจำกัดความของเมธอดต่อไปนี้

  string postBody = "{ \"textQuery\": \"" + searchTerm + "\", " + 
                      "   \"locationBias\": { \"circle\": { " +
                      "      \"center\": { \"latitude\": " + lat + ", \"longitude\": " + lon + " }, " +
                      "      \"radius\": 10000 }" +
                      "   }" +
                      "}";
  
  string url = "https://places.googleapis.com/v1/places:searchText";
  
  UnityWebRequest request = UnityWebRequest.Post(url, postBody, "application/json");
  request.SetRequestHeader("X-Goog-Api-Key", apiKey);
  request.SetRequestHeader("X-Goog-FieldMask", "places.displayName,places.location");
  
  return request;
  

  ตอนนี้เมื่อมีการเรียกใช้เมธอด CreatePlacesRequest ระบบจะส่งคำขอที่ค้นหา searchTerm ในวงกลมที่มีจุดศูนย์กลางอยู่ที่ lat และ lon

ทดสอบงาน

ก่อนดำเนินการต่อ คุณต้องยืนยันว่าการเรียก Places API สำเร็จ

1. เรียกใช้ฟังก์ชันใน Unity Editor โดยทำดังนี้
   1. ใน Google AR Codelab ให้คลิกเรียกใช้คำขอ Places
   2. เปิดคอนโซล Unity คุณควรเห็นผลลัพธ์ปรากฏขึ้น

5. เพิ่ม Anchor ลงในสถานที่ต่างๆ โดยใช้โปรแกรม

ตอนนี้คุณได้ยืนยันแล้วว่า Places API พบผลลัพธ์ ให้สร้าง Anchor ของ Geospatial Creator ใหม่ในแต่ละสถานที่ที่ระบุโดยผลลัพธ์

สร้างรายการในเมนู

1. ในAnchorDuplicator คลาส ให้ค้นหาเมธอด CreateNewAnchorsFromPlaces และใช้คำจำกัดความของเมธอดต่อไปนี้

   if (_places == null)
   {
       Debug.LogError("Cannot create anchors: Places has not been initialized.");
       return;
   }
   
   // You start with only one anchor in the scene, which you want to copy:
   var prototypeAnchorObject = GameObject
       .FindObjectOfType<ARGeospatialCreatorAnchor>()
       .gameObject;
   
   foreach (var place in _places)
   {
       var newAnchorObject = GameObject.Instantiate(prototypeAnchorObject);
       var anchor = newAnchorObject.GetComponent<ARGeospatialCreatorAnchor>();
       anchor.Latitude = place.location.latitude;
       anchor.Longitude = place.location.longitude;
   
       newAnchorObject.name = place.displayName.text;
   }
   

   รายการเมนูนี้จะตรวจสอบคำขอก่อนหน้านี้ที่เริ่มต้นไว้ และใช้ ARGeospatialCreatorAnchor แรกในฉากเป็นต้นแบบสำหรับการสร้าง Anchor โดยจะสร้าง Anchor 1 รายการต่อสถานที่ 1 แห่งในผลลัพธ์ของ Places API
2. ใช้รายการเมนูสร้าง Anchor ใหม่จากคำตอบของสถานที่ใน Google AR Codelab เพื่อสร้าง Anchor
3. คุณควรเห็น Anchor หลายรายการปรากฏในแผงลำดับชั้น

ยืนยันตำแหน่งของโฆษณา Anchor

หากต้องการยืนยันว่าชิ้นงานทั้งหมดยึดไว้ในตำแหน่งที่ถูกต้องก่อนเรียกใช้แอป ให้ทำตามขั้นตอนต่อไปนี้

1. คลิก Anchor ที่เพิ่มในแผงลำดับชั้น
2. กด F
3. ตรวจสอบจุดยึดในมุมมอง Scene
4. หากจุดยึดไม่อยู่ในตำแหน่งที่ถูกต้อง ให้คลิกสแนปกับไทล์ หรือเปลี่ยนค่า Latitude, Longitude หรือ Editor Override Altitude ด้วยตนเอง

6. ดูชิ้นงานใน AR

หากต้องการดูชิ้นงานใน AR บนอุปกรณ์ Android หรือ iOS ที่รองรับ ARCore ให้ทำตามขั้นตอนต่อไปนี้

1. คลิกไฟล์ > การตั้งค่าการสร้าง แล้วเลือกแพลตฟอร์มการสร้าง Android หรือ iOS
2. คลิกเปลี่ยนแพลตฟอร์ม
3. ตรวจสอบว่าอุปกรณ์ที่ใช้พัฒนาเชื่อมต่อและกำหนดค่าสำหรับการพัฒนาแล้ว
4. คลิกสร้างและเรียกใช้
5. ยืนยันว่าแอปทำงานบนอุปกรณ์ได้
6. ไปที่ตำแหน่งที่คุณยึดเนื้อหา หากคุณไม่ได้เปลี่ยนตัวอย่าง สถานที่คือห้องสมุดสาธารณะในซานฟรานซิสโก

7. บทสรุป

ยินดีด้วย คุณเขียนแอป Unity ที่ใช้ Geospatial Creator และ Google Maps Platform Places API เพื่อสร้างประสบการณ์ด้านข้อมูลเชิงพื้นที่หลายรายการโดยใช้เทมเพลตเริ่มต้น เราหวังว่าคุณจะใช้ความรู้เหล่านี้เพื่อขยายการเข้าถึงของเนื้อหา Geospatial Creator ได้

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

• Geospatial Creator ใน Unity