สร้างแอปแนะนำสถานที่ท่องเที่ยวแบบ Mixed Reality ด้วย Android XR, Geospatial API และ Gemini

ในงาน Google I/O ปีนี้เราได้ประกาศการอัปเดตประสบการณ์เชิงมิติพื้นที่ โดยGeospatial APIพร้อมให้บริการในรูปแบบตัวอย่างในARCore สำหรับ Jetpack XRแล้ว การนำระบบกำหนดตำแหน่งด้วยภาพ (VPS) ของ Google มาใช้ใน Android XR ช่วยให้ Android XR สามารถยึดเนื้อหาดิจิทัลไว้กับโลกจริงด้วยความแม่นยำระดับต่ำกว่า 1 เมตรและการวางแนวที่แม่นยำในพื้นที่ที่รองรับ* ทีมของเราได้สร้างเดโมชื่อ XR Geospatial Tour เพื่อแสดงให้เห็นถึงศักยภาพของ Geospatial API

ลองจินตนาการว่าคุณกำลังเดินเข้าไปในเมืองใหม่ สวมแว่นตา XR แบบมีสาย (เช่น XREAL Project Aura ที่กำลังจะเปิดตัว) และมีไกด์ท้องถิ่นผู้เชี่ยวชาญคอยนำทางคุณทันที คุณไม่จำเป็นต้องก้มมองแผนที่ 2 มิติอีกต่อไป แต่จะมีโมเดล 3 มิติคอยนำทางคุณอย่างนุ่มนวล และเสียงอัจฉริยะจะบอกคุณเกี่ยวกับสถานที่สำคัญทางประวัติศาสตร์ที่อยู่ตรงหน้า เราได้ผสานรวม Geospatial API, Gemini API โดยใช้ Firebase AI Logic, Google Maps Grounding และ Jetpack XR SDK เพื่อสร้างประสบการณ์การเดินชมสถานที่ท่องเที่ยวแบบสมจริงโดยไม่ต้องใช้มือ

ข้อจำกัดความรับผิด: วิดีโอและแอปพลิเคชันไกด์นำเที่ยวมีวัตถุประสงค์เพื่อการสาธิตเท่านั้น เราได้ตัดต่อบางฉากให้สั้นลง ฮาร์ดแวร์ที่แสดงอาจอยู่ระหว่างการพัฒนา รายละเอียดผลิตภัณฑ์ขั้นสุดท้ายอาจแตกต่างกันไป

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

1. ระบุตำแหน่งของผู้ใช้ด้วย ARCore Geospatial API (VPS)

ยกระดับประสบการณ์การนำทางใน XR ด้วยการผสานรวมศักยภาพของ GPS เข้ากับความแม่นยำของ VPS ความแม่นยำและการวางแนวที่แม่นยำของ VPS ช่วยให้จุดอ้างอิง 3 มิติสอดคล้องกับโลกจริง

นี่คือเหตุผลที่ Geospatial API ใน Android XR ช่วยให้คุณสร้างประสบการณ์ที่กำหนดเองได้ VPS ใช้คอมพิวเตอร์วิทัศน์ขั้นสูงเพื่อพยายามให้ GeospatialPose (รวมถึงละติจูด ลองจิจูด และทิศทาง) ที่แม่นยำกว่า GPS

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

// Retrieve the current geospatial pose from the ARCore session
val result = geospatial.createGeospatialPoseFromPose(arDevice.state.value.devicePose)
if (result is CreateGeospatialPoseFromPoseSuccess) {
    val pose = result.pose
    Log.d("VPS", "Accurate Location: ${pose.latitude}, ${pose.longitude}")
}

เนื่องจากประสบการณ์ทั้งหมดขึ้นอยู่กับความแม่นยำนี้ เราจึงตรวจสอบ horizontalAccuracy และ orientationYawAccuracy จนกว่าจะตรงตามเกณฑ์ของเรา หากผู้ใช้อยู่ในอาคารหรือในพื้นที่ที่ไม่รู้จัก เราจะแจ้งให้ผู้ใช้ "เดินไปยังพื้นที่สาธารณะกลางแจ้งและมองไปรอบๆ"

2. สร้างแผนการเดินทางด้วย Gemini API และ Google Maps Grounding

เมื่อได้ตำแหน่งแล้ว เราจะใช้ Gemini API โดยใช้ Firebase AI Logic เพื่อแจ้งให้โมเดล Gemini ทำหน้าที่เป็นไกด์นำเที่ยวท้องถิ่น เราจะส่งพิกัดของผู้ใช้ไปยังโมเดลและขอให้โมเดลแสดงผลการตอบกลับแบบ JSON ที่มีโครงสร้างซึ่งมีทัวร์เดินชมสถานที่ท่องเที่ยวในบริเวณใกล้เคียง

   val configForTools = ToolConfig(
      functionCallingConfig = null,
      retrievalConfig = retrievalConfig {
        latLng = FirebaseLatLng(pose.latitude, pose.longitude)
        languageCode = "en"
      }
    )

    val responseJsonSchema = Schema.obj(
      mapOf(
        "locationIntro" to Schema.string(),
        "tours" to Schema.array(
          Schema.obj(
            mapOf(
              "title" to Schema.string(),
              "description" to Schema.string(),
              "stops" to Schema.array(
                Schema.obj(
                  mapOf(
                    "name" to Schema.string(),
                    "detailedName" to Schema.string(),
                    "description" to Schema.string()
                  )
                )
              )
            )
          )
        )
      )
    )

    val model = Firebase.ai(backend = GenerativeBackend.googleAI()).generativeModel(
      modelName = "gemini-3.5-flash",
      tools = listOf(Tool.googleMaps()),
      generationConfig = generationConfig {
        responseMimeType = "application/json"
        responseSchema = responseJsonSchema
      }
    )

   val result = model.generateContent("The user is at latitude ${pose.latitude} and longitude ${pose.longitude}. Generate exactly 3 diverse tours near this location (e.g., historical, food, nature). All tour ideas should be walking distance only.")

โมเดลภาษาขนาดใหญ่มีความสามารถในการสร้างคำอธิบายที่สมบูรณ์ แต่บางครั้งก็อาจสร้างพิกัดละติจูด/ลองจิจูดที่แน่นอนขึ้นมาเอง เราจึงใช้ Google Maps Grounding เพื่อแก้ปัญหานี้

3. เสียงที่จะนำทางคุณ: Gemini 2.5 TTS

เราได้ใช้เสียงบรรยายแบบไดนามิกเพื่อให้ไกด์นำเที่ยวดูสมจริงยิ่งขึ้น

การใช้ gemini-2.5-flash-tts model ช่วยให้เรากำหนดค่าการสร้างโมเดลเพื่อแสดงผลข้อมูลเสียงแทนข้อความได้โดยตรง วิธีขอ ResponseModality.AUDIO มีดังนี้

val ttsModel = Firebase.ai(backend = GenerativeBackend.googleAI())
    .generativeModel(
        modelName = "gemini-2.5-flash-tts",
        generationConfig = generationConfig {
            // Instruct the model to return Audio
            responseModalities = listOf(ResponseModality.AUDIO)
        }
    )

val response = ttsModel.generateContent("Say in a neutral but positive voice:\n$prompt")

// Extract the raw audio bytes from the response
val audioBytes = response.candidates.firstOrNull()?.content?.parts
    ?.filterIsInstance<InlineDataPart>()
    ?.firstOrNull { it.mimeType.contains("audio") }?.inlineData

4. ทำให้ข้อมูลมีชีวิตชีวาในแบบ 3 มิติด้วย Jetpack XR

ขั้นตอนสุดท้ายคือการแสดงข้อมูลนี้ในมุมมองของผู้ใช้ Jetpack XR SDK ช่วยให้การเปลี่ยนจาก UI ของ Android 2 มิติเป็นการประมวลผลเชิงมิติพื้นที่เป็นไปอย่างราบรื่น

เราใช้ Jetpack Compose สำหรับ XR เพื่อสร้างคอมโพเนนต์เชิงมิติพื้นที่ เราได้สร้าง Composable ที่ชื่อ InfoSphere เพื่อแสดงจุดที่น่าสนใจตามเส้นทางทัวร์ ซึ่งประกอบด้วย GltfModel ของทรงกลม 3 มิติที่ลอยอยู่ในพื้นที่และโต้ตอบได้เพื่อแสดงข้อมูล

การใช้ Jetpack XR SDK ช่วยให้เราวางโมเดล 3 มิติไว้ข้างๆ Compose UI ได้โดยใช้ SpatialBox และ SceneCoreEntity นอกจากนี้ เรายังใช้ InteractableComponent เพื่อตอบสนองต่อการแตะของผู้ใช้

การผสานรวม AnimatedSpatialVisibility สำหรับแพลตฟอร์ม Compose UI แบบเดิมเข้ากับองค์ประกอบ 3 มิติของ SceneCoreEntity ช่วยให้เราผสานรวมข้อมูลเข้ากับโลกจริงได้อย่างราบรื่น

@Composable
fun InfoSphere(
    content: InfoBubbleContent,
    session: Session,
    sphereModel: GltfModel,
    isSelected: Boolean,
    onClick: () -> Unit
) {
    // SpatialBox lets us arrange 3D components and SpatialPanels together
    SpatialBox(
        SubspaceModifier
            .offset(x = 2.dp, y = 1.dp, z = (-3).dp) // Positioned in 3D space
    ) {
        // Smoothly animate the visibility of our 2D Compose UI Panel
        AnimatedSpatialVisibility(visible = isSelected) {
            SpatialPanel {
                InfoBubble(content) // Regular 2D Compose UI
            }
        }
        // Render our interactive 3D sphere
        SceneCoreEntity(
            factory = {
                GltfModelEntity.create(session, sphereModel).also { entity ->
                    // Make the 3D model respond to user taps
                    entity.addComponent(InteractableComponent.create(session) { inputEvent ->
                        if (inputEvent.action == InputEvent.Action.UP) {
                            onClick()
                        }
                    })
                }
            }
        )
    }
}

สำรวจศักยภาพของ Android XR ในปัจจุบัน

การสร้างแอป XR Geospatial Tour แสดงให้เห็นว่าอุปสรรคในการสร้างประสบการณ์เชิงมิติพื้นที่ระดับโลกสำหรับนักพัฒนาแอป Android ลดลงกว่าที่เคย เมื่อ Geospatial API พร้อมให้บริการในรูปแบบตัวอย่างบน Android XR แล้ว แอปของคุณจะเข้าใจโลกรอบตัวได้อย่างราบรื่น การผสานรวม API ของ Compose for XR เข้ากับข้อมูลตำแหน่งที่มีความแม่นยำสูงของ VPS และความสามารถในการสร้างของ Gemini ช่วยให้เราสร้างประสบการณ์ที่เข้าใจทั้งตำแหน่งของผู้ใช้และสิ่งที่ผู้ใช้กำลังมองอยู่

เรายินดีที่จะเปิดรับสมัครเข้าร่วม โปรแกรม Android XR Developer Catalyst ซึ่งรวมถึง XREAL Project Aura เพื่อช่วยให้คุณได้ทดลองใช้ Android XR ตั้งแต่วันนี้เป็นต้นไป คุณสามารถสมัครขอรับสิทธิ์เข้าถึง devkit ของ XREAL Project Aura หรือ devkit ของแว่นตาแสดงผลของเราได้ในอีกไม่กี่เดือนข้างหน้า

*ข้อจำกัดความรับผิด: พร้อมใช้งานในอุปกรณ์บางรุ่น ต้องเชื่อมต่ออินเทอร์เน็ต ใช้ได้ในแอปและแพลตฟอร์มที่รองรับ ผลลัพธ์จึงอาจแตกต่างกันไป