Asynchronous 3D understanding of photorealistic tiles

[ngoiyaeric]

Look at the example and find a solution using this codebase

3D bounding boxes is a new experimental feature from Gemini 2.0 that will continue to improve in future models.

To get 3D bounding boxes, you need to tell the model exactly what you need for the output format. This is the recommended one as it's the one the model knows the best.

To prevent the model from repeating itself, it is recommended to use a temperature over 0, in this case 0.5. Limiting the number of items (10 in this case) is also a way to prevent the model from looping and to speed up the decoding of the bounding boxes. You can experiment with these parameters and find what works best for your use-case.

https://colab.research.google.com/github/google-gemini/cookbook/blob/main/examples/Spatial_understanding_3d.ipynb#scrollTo=WbWHzjtT6ELv

depth estimation and geometry in 3D tiles

[ngoiyaeric]

@coderabbitai plan

[coderabbitai]

Coding Plan

Summary

• Create a dedicated bbox3dSearch agent using Gemini 2.0 Flash with spatial understanding prompting, isolated from the general model selection flow
• Follow the established resolution_search server action pattern for image processing, streaming, and state management
• Conditionally render a 3D analysis trigger button only when the Google Maps 3D provider is active
• Render detected bounding boxes as native Polygon3DElement overlays attached directly to the <gmp-map-3d> element via a new context-based pattern

Design Choices

Design Choice 1: Model Selection for 3D Bounding Box Analysis

Options Considered:

1. Add Gemini 2.0 Flash as a user-selectable model option in getModel() waterfall
2. Hardcode Gemini 2.0 Flash directly in the bbox3d agent, bypassing getModel() entirely

Chosen Option: 2

Rationale: The 3D bounding box feature is experimental and tightly coupled to Gemini 2.0's unique capabilities. Hardcoding the model in the agent keeps the feature isolated and avoids polluting the general model selection logic.

Design Choice 2: 3D Overlay Rendering Approach

Options Considered:

1. Convert 3D bboxes to 2D GeoJSON and use existing GeoJsonLayer (loses depth information)
2. Create a new component that renders native Polygon3DElement overlays on Map3DElement
3. Use deck.gl or Three.js for custom 3D rendering

Chosen Option: 2

Rationale: Native Polygon3DElement and Polyline3DElement are designed for <gmp-map-3d> integration, support altitude coordinates, and align with existing patterns. This approach preserves depth information without introducing new dependencies.

Design Choice 3: Trigger Mechanism for 3D Analysis

Options Considered:

1. Add a separate button alongside the existing search/analysis button
2. Add a mode toggle that switches between 2D analysis and 3D bbox analysis
3. Auto-detect when Google Maps 3D provider is active and show the 3D option contextually

Chosen Option: 3

Rationale: Show the 3D bbox analysis button only when mapProvider === 'google' since photorealistic 3D tiles are only available in that mode. This provides a clean UX without cluttering the interface when the feature isn't applicable.

💡 User Tips

Regenerate the plan with different choices with @coderabbitai <feedback>.

Implementation Steps

Phase 1: AI Agent and Model Infrastructure

This phase establishes the core AI capability by creating a dedicated agent for 3D bounding box detection using Gemini 2.0's spatial understanding feature, along with the necessary model configuration.

Task 1: Create Gemini 2.0 Flash Model Utility

Add a utility function to instantiate the Gemini 2.0 Flash model specifically for 3D spatial understanding tasks, separate from the general getModel() flow.

• Add getGemini2FlashModel() function in lib/utils/index.ts that creates a @ai-sdk/google instance configured with gemini-2.0-flash model name
• Use a new environment variable GEMINI_API_KEY (distinct from GEMINI_3_PRO_API_KEY) for the Gemini 2.0 Flash API key
• Function should be self-contained and not depend on user model selection or the getModel() waterfall

Task 2: Define 3D Bounding Box Schema and Types

Create the Zod schema and TypeScript types for the 3D bounding box analysis output that matches Gemini's spatial understanding format.

• Create schema in lib/agents/bbox3d-search.tsx with structure: { objects: [{ label: string, box_3d: [x_center, y_center, z_center, x_size, y_size, z_size, roll, pitch, yaw] }], summary: string }
• Add Bbox3DResult and Bbox3DObject interfaces to lib/types/index.ts
• Include optional confidence field per object for potential future use
• Add 'bbox_3d_result' to the AIMessage.type union in lib/types/index.ts

Task 3: Implement bbox3dSearch Agent

Create the agent that performs 3D spatial understanding analysis on map screenshots.

• Create lib/agents/bbox3d-search.tsx following the resolutionSearch pattern
• System prompt must include the exact output format instruction: "Output a JSON list where each entry contains the object name in label and its 3D bounding box in box_3d as [x_center, y_center, z_center, x_size, y_size, z_size, roll, pitch, yaw]"
• Include context injection for location coordinates and camera state (heading, tilt, range)
• Set temperature: 0.5 and include instruction to limit to 10 objects to prevent repetition/looping
• Use streamObject with the bbox3d schema, calling getGemini2FlashModel() directly
• Accept same parameters as resolutionSearch: messages, timezone, drawnFeatures, location, plus additional cameraState for 3D context

🤖 Prompt for AI agents

This phase creates the core AI agent infrastructure for 3D bounding box
detection using Gemini 2.0 Flash. The goal is to establish the model utility,
schema/types, and the agent itself in isolation from the existing model
selection flow.

**Task 1: `lib/utils/index.ts` — Add `getGemini2FlashModel()`**
- Add a new exported function `getGemini2FlashModel()` that instantiates a
`@ai-sdk/google` model with the model name `gemini-2.0-flash`
- Use a new environment variable `GEMINI_API_KEY` (separate from
`GEMINI_3_PRO_API_KEY`) for the API key
- The function must be self-contained and must not reference `getModel()` or any
user model selection logic

**Task 2: `lib/types/index.ts` — Add Types**
- Add `Bbox3DObject` interface with fields: `label: string`, `box_3d: [number,
number, number, number, number, number, number, number, number]`, and optional
`confidence?: number`
- Add `Bbox3DResult` interface with fields: `objects: Bbox3DObject[]`, `summary:
string`
- Extend the `AIMessage.type` union to include `'bbox_3d_result'`

**Task 3: `lib/agents/bbox3d-search.tsx` — Create Agent**
- Create the file following the same structural pattern as `resolutionSearch`
- Define a Zod schema matching: `{ objects: array of { label: string, box_3d:
9-element number tuple, confidence?: number }, summary: string }`
- System prompt must include: "Output a JSON list where each entry contains the
object name in `label` and its 3D bounding box in `box_3d` as `[x_center,
y_center, z_center, x_size, y_size, z_size, roll, pitch, yaw]`"
- Include instructions to limit output to 10 objects
- Set `temperature: 0.5`
- Inject location coordinates and `cameraState` (heading, tilt, range) into the
prompt context
- Use `streamObject` calling `getGemini2FlashModel()` directly
- Function signature should accept: `messages`, `timezone`, `drawnFeatures`,
`location`, and `cameraState`

Phase 2: Server Action Integration

This phase wires the new agent into the application's server action pipeline, handling image capture, processing, and UI streaming following the established resolution_search pattern.

Task 1: Add bbox_3d_analysis Action Branch

Extend app/actions.tsx with a new action handler for 3D bounding box analysis.

• Add else if (action === 'bbox_3d_analysis') branch after the resolution_search block (around line 220)
• Parse FormData fields: file_google (primary image), timezone, latitude, longitude, drawnFeatures, plus new fields heading, tilt, range for camera state
• Convert image to base64 data URL using the same pattern as resolution_search
• Build multimodal CoreMessage with image part
• Call bbox3dSearch agent with full context including camera state

Task 2: Implement UI Streaming for 3D Analysis

Set up the streaming UI response pattern for the 3D analysis results.

• Create summaryStream for incremental text updates
• Implement processBbox3DAnalysis() async function following the processResolutionSearch() pattern
• Stream partial results via partialObjectStream to summaryStream
• On completion, append a new <Bbox3DOverlay> component (to be created) to uiStream with the detected objects
• Append standard querySuggestor results and FollowupPanel

Task 3: Update AI State Management

Add proper state handling for the new message type to enable history reconstruction.

• Commit four messages to AI state with shared groupeId: response (summary text), bbox_3d_result (full JSON with objects and image data), related, followup
• Add 'bbox_3d_result' to the filter exclusion list when building messages (alongside 'resolution_search_result')
• Sanitize image data from history using the same IMAGE_PROCESSED placeholder pattern

Task 4: Implement History Rehydration

Add the UI reconstruction case for bbox_3d_result messages when loading chat history.

• Add case 'bbox_3d_result': in getUIStateFromAIState() switch statement
• Parse the stored JSON to extract objects, summary, and image data
• Render <BotMessage> with summary and <Bbox3DOverlay> with the detected objects
• Follow the same pattern as resolution_search_result reconstruction

🤖 Prompt for AI agents

This phase integrates the `bbox3dSearch` agent into the server action pipeline
in `app/actions.tsx`, following the `resolution_search` pattern for streaming,
state management, and history rehydration.

**Task 1: Add `bbox_3d_analysis` action branch in `app/actions.tsx`**
- Add `else if (action === 'bbox_3d_analysis')` after the `resolution_search`
block (around line 220)
- Parse the following FormData fields: `file_google` (image), `timezone`,
`latitude`, `longitude`, `drawnFeatures`, `heading`, `tilt`, `range`
- Convert the image to a base64 data URL using the same method as
`resolution_search`
- Build a multimodal `CoreMessage` with an image part
- Invoke the `bbox3dSearch` agent passing full context including a `cameraState`
object with `heading`, `tilt`, and `range`

**Task 2: Implement `processBbox3DAnalysis()` streaming function**
- Create an async `processBbox3DAnalysis()` function mirroring
`processResolutionSearch()`
- Create a `summaryStream` for incremental text updates
- Stream partial results via `partialObjectStream` to `summaryStream`
- On stream completion, append `<Bbox3DOverlay>` component to `uiStream` with
the full detected objects array
- Append standard `querySuggestor` results and `FollowupPanel` after the overlay

**Task 3: AI state commits**
- Commit four messages to AI state sharing a `groupeId`: `response` (summary
text), `bbox_3d_result` (full JSON with objects and image data), `related`,
`followup`
- Add `'bbox_3d_result'` to the message filter exclusion list alongside
`'resolution_search_result'`
- Apply the same `IMAGE_PROCESSED` placeholder sanitization to image data in
history

**Task 4: History rehydration in `getUIStateFromAIState()`**
- Add `case 'bbox_3d_result':` to the switch statement
- Parse the stored JSON to extract `objects`, `summary`, and image data
- Render `<BotMessage>` with the summary and `<Bbox3DOverlay>` with the detected
objects, following `resolution_search_result` reconstruction as a template

Phase 3: UI Trigger and Map Context

This phase adds the user-facing trigger mechanism and establishes the necessary map context access for capturing 3D camera state.

Task 1: Expose Map3D Element Reference

Enable external access to the Google Maps 3D element for both screenshot capture context and overlay attachment.

• In components/map/google-map.tsx, add a useRef<Map3DElement> and pass it to <Map3D ref={...}>
• Create a new context Map3DContext in components/map/map-3d-context.tsx similar to the existing Mapbox MapContext
• Wrap <Map3D> with the context provider, exposing the Map3DElement instance
• Export useMap3D() hook for consuming components

Task 2: Add 3D Analysis Trigger Button

Create the conditional UI trigger for 3D bounding box analysis.

• In components/header-search-button.tsx, add a second button that appears only when mapProvider === 'google'
• Create handleBbox3DAnalysis() function that captures: Google Static Maps image, camera state from mapData.cameraState (heading, tilt, range), center coordinates, timezone, drawn features
• Append all data to FormData with action: 'bbox_3d_analysis'
• Use a distinct icon (e.g., <Box> or <Cube> from lucide-react) to differentiate from the 2D analysis button
• Add corresponding button to components/mobile-icons-bar.tsx for mobile parity

Task 3: Pass Camera State in FormData

Extend the form submission to include 3D camera parameters needed for spatial context.

• In the handleBbox3DAnalysis() function, append heading, tilt, and range from mapData.cameraState to FormData
• These values provide the AI model with camera orientation context to interpret the 3D scene correctly
• Parse these fields in the server action branch and pass to the agent

🤖 Prompt for AI agents

This phase adds the Map3D context infrastructure and the conditional UI trigger
button for initiating 3D bounding box analysis.

**Task 1: Create `Map3DContext` in `components/map/map-3d-context.tsx`**
- Model the new context after the existing Mapbox `MapContext`
- Context value should expose the `Map3DElement` instance (or `null`)
- Export a `useMap3D()` hook for consuming components
- In `components/map/google-map.tsx`, add a `useRef<Map3DElement>`, pass it to
`<Map3D ref={...}>`, and wrap `<Map3D>` with the `Map3DContext` provider
exposing the ref value

**Task 2: Add 3D analysis button in `components/header-search-button.tsx`**
- Add a second button that renders **only** when `mapProvider === 'google'`
- Use a distinct icon (e.g., `<Box>` or `<Cube>` from lucide-react) to visually
differentiate it from the 2D analysis button
- Create a `handleBbox3DAnalysis()` function that:
  - Captures the Google Static Maps image
  - Reads camera state (`heading`, `tilt`, `range`) from `mapData.cameraState`
  - Reads center coordinates and timezone
  - Reads drawn features
- Builds a `FormData` object with `action: 'bbox_3d_analysis'` and all the above
fields including `heading`, `tilt`, and `range`
- Add a matching button to `components/mobile-icons-bar.tsx` for mobile parity

Phase 4: 3D Bounding Box Visualization

This phase implements the rendering of detected 3D bounding boxes as native Google Maps 3D overlays on the photorealistic tiles.

Task 1: Create Bbox3DOverlay Component

Build the component that renders 3D bounding boxes on the Google Maps 3D view using native Polygon3DElement.

• Create components/map/bbox-3d-overlay.tsx as a sibling to google-geojson-layer.tsx
• Accept props: objects: Bbox3DObject[] (the detected bounding boxes with labels and box_3d arrays)
• Consume Map3DContext to access the Map3DElement for overlay attachment
• Component renders null and performs side-effects only (same pattern as GeoJsonLayer)

Task 2: Implement Bounding Box to Polygon3D Conversion

Convert the Gemini box_3d format to Google Maps 3D polygon coordinates.

• Create utility function to convert [x_center, y_center, z_center, x_size, y_size, z_size, roll, pitch, yaw] to 8 corner vertices of a 3D box
• Apply rotation transforms using roll, pitch, yaw Euler angles
• Convert relative camera-frame coordinates to world coordinates using the map's camera state
• Generate LatLngAltitude arrays suitable for Polygon3DElement.path

Task 3: Render 3D Polygons with Labels

Imperatively create and attach Polygon3DElement instances to the Map3DElement.

• In Bbox3DOverlay useEffect, create Polygon3DElement for each face of each bounding box (6 faces per box, or simplified to wireframe with Polyline3DElement)
• Set altitudeMode to 'ABSOLUTE' or 'RELATIVE_TO_GROUND' based on context
• Apply semi-transparent fill colors with distinct stroke for visibility
• Use extruded: true where applicable for solid box rendering
• Append elements to Map3DElement via map3d.append(polygon)
• Clean up elements on unmount or when objects prop changes

Task 4: Add Label Overlays for Detected Objects

Display text labels for each detected 3D bounding box.

• Create label elements positioned at the centroid of each bounding box
• Use either HTML overlay divs positioned via CSS transforms or Marker3DElement if text labeling is supported
• Include the object label text and optionally a summary tooltip
• Style labels to be readable against photorealistic tile backgrounds (dark background with white text, or vice versa)

🤖 Prompt for AI agents

This phase builds the `Bbox3DOverlay` React component and all supporting
utilities to render detected 3D bounding boxes as native Google Maps 3D
overlays.

**Task 1: Create `components/map/bbox-3d-overlay.tsx`**
- Place file as a sibling to `google-geojson-layer.tsx`
- Accept props: `objects: Bbox3DObject[]`
- Consume `Map3DContext` via the `useMap3D()` hook to get the `Map3DElement`
instance
- The component should return `null` (no rendered DOM output); all work is done
via side-effects, matching the `GeoJsonLayer` pattern

**Task 2: Implement box_3d → Polygon3D conversion utility**
- Create a utility function (can be in the same file or a separate util) that
accepts a `box_3d` array `[x_center, y_center, z_center, x_size, y_size, z_size,
roll, pitch, yaw]`
- Compute all 8 corner vertices of the 3D box
- Apply Euler angle rotation transforms (roll, pitch, yaw)
- Convert camera-frame relative coordinates to world coordinates using the
current map camera state
- Return `LatLngAltitude` arrays suitable for use as `Polygon3DElement.path`

**Task 3: Render polygons in `Bbox3DOverlay` useEffect**
- For each detected object, create `Polygon3DElement` instances for each face (6
faces), or use `Polyline3DElement` for a simplified wireframe
- Set `altitudeMode` to `'ABSOLUTE'` or `'RELATIVE_TO_GROUND'` as appropriate
- Apply semi-transparent fill colors and a distinct stroke for visibility
- Use `extruded: true` where applicable
- Attach each element to the `Map3DElement` via `map3d.append(polygon)`
- Return a cleanup function that removes all created elements on unmount or when
`objects` prop changes

**Task 4: Add label overlays**
- For each bounding box, create a label element positioned at the centroid
- Use HTML overlay divs (positioned via CSS transforms) or `Marker3DElement` if
text labeling is supported
- Display the object's `label` text with an optional summary tooltip
- Style for readability against photorealistic tile backgrounds (e.g., dark
background with white text)

Research

This is a Next.js application with a multi-agent AI architecture using Vercel AI SDK. It features a dual map provider system (Mapbox and Google Maps 3D via <gmp-map-3d> web component) with existing spatial analysis capabilities through the resolutionSearch agent. The application uses server actions for AI orchestration, streamable UI for real-time updates, and has an established pattern for capturing map screenshots and passing them to vision models. The Google Maps 3D component (Map3D) exposes its DOM element via forwardRef, enabling direct manipulation for 3D overlays. The existing resolution_search action flow provides a complete template for image-based AI analysis with GeoJSON overlay rendering.

---

🚀 Next Steps

🤖 All AI agent prompts combined

Task: 1

This phase creates the core AI agent infrastructure for 3D bounding box
detection using Gemini 2.0 Flash. The goal is to establish the model utility,
schema/types, and the agent itself in isolation from the existing model
selection flow.

**Task 1: `lib/utils/index.ts` — Add `getGemini2FlashModel()`**
- Add a new exported function `getGemini2FlashModel()` that instantiates a
`@ai-sdk/google` model with the model name `gemini-2.0-flash`
- Use a new environment variable `GEMINI_API_KEY` (separate from
`GEMINI_3_PRO_API_KEY`) for the API key
- The function must be self-contained and must not reference `getModel()` or any
user model selection logic

**Task 2: `lib/types/index.ts` — Add Types**
- Add `Bbox3DObject` interface with fields: `label: string`, `box_3d: [number,
number, number, number, number, number, number, number, number]`, and optional
`confidence?: number`
- Add `Bbox3DResult` interface with fields: `objects: Bbox3DObject[]`, `summary:
string`
- Extend the `AIMessage.type` union to include `'bbox_3d_result'`

**Task 3: `lib/agents/bbox3d-search.tsx` — Create Agent**
- Create the file following the same structural pattern as `resolutionSearch`
- Define a Zod schema matching: `{ objects: array of { label: string, box_3d:
9-element number tuple, confidence?: number }, summary: string }`
- System prompt must include: "Output a JSON list where each entry contains the
object name in `label` and its 3D bounding box in `box_3d` as `[x_center,
y_center, z_center, x_size, y_size, z_size, roll, pitch, yaw]`"
- Include instructions to limit output to 10 objects
- Set `temperature: 0.5`
- Inject location coordinates and `cameraState` (heading, tilt, range) into the
prompt context
- Use `streamObject` calling `getGemini2FlashModel()` directly
- Function signature should accept: `messages`, `timezone`, `drawnFeatures`,
`location`, and `cameraState`
===============================================================================

Task: 2

This phase integrates the `bbox3dSearch` agent into the server action pipeline
in `app/actions.tsx`, following the `resolution_search` pattern for streaming,
state management, and history rehydration.

**Task 1: Add `bbox_3d_analysis` action branch in `app/actions.tsx`**
- Add `else if (action === 'bbox_3d_analysis')` after the `resolution_search`
block (around line 220)
- Parse the following FormData fields: `file_google` (image), `timezone`,
`latitude`, `longitude`, `drawnFeatures`, `heading`, `tilt`, `range`
- Convert the image to a base64 data URL using the same method as
`resolution_search`
- Build a multimodal `CoreMessage` with an image part
- Invoke the `bbox3dSearch` agent passing full context including a `cameraState`
object with `heading`, `tilt`, and `range`

**Task 2: Implement `processBbox3DAnalysis()` streaming function**
- Create an async `processBbox3DAnalysis()` function mirroring
`processResolutionSearch()`
- Create a `summaryStream` for incremental text updates
- Stream partial results via `partialObjectStream` to `summaryStream`
- On stream completion, append `<Bbox3DOverlay>` component to `uiStream` with
the full detected objects array
- Append standard `querySuggestor` results and `FollowupPanel` after the overlay

**Task 3: AI state commits**
- Commit four messages to AI state sharing a `groupeId`: `response` (summary
text), `bbox_3d_result` (full JSON with objects and image data), `related`,
`followup`
- Add `'bbox_3d_result'` to the message filter exclusion list alongside
`'resolution_search_result'`
- Apply the same `IMAGE_PROCESSED` placeholder sanitization to image data in
history

**Task 4: History rehydration in `getUIStateFromAIState()`**
- Add `case 'bbox_3d_result':` to the switch statement
- Parse the stored JSON to extract `objects`, `summary`, and image data
- Render `<BotMessage>` with the summary and `<Bbox3DOverlay>` with the detected
objects, following `resolution_search_result` reconstruction as a template
===============================================================================

Task: 3

This phase adds the Map3D context infrastructure and the conditional UI trigger
button for initiating 3D bounding box analysis.

**Task 1: Create `Map3DContext` in `components/map/map-3d-context.tsx`**
- Model the new context after the existing Mapbox `MapContext`
- Context value should expose the `Map3DElement` instance (or `null`)
- Export a `useMap3D()` hook for consuming components
- In `components/map/google-map.tsx`, add a `useRef<Map3DElement>`, pass it to
`<Map3D ref={...}>`, and wrap `<Map3D>` with the `Map3DContext` provider
exposing the ref value

**Task 2: Add 3D analysis button in `components/header-search-button.tsx`**
- Add a second button that renders **only** when `mapProvider === 'google'`
- Use a distinct icon (e.g., `<Box>` or `<Cube>` from lucide-react) to visually
differentiate it from the 2D analysis button
- Create a `handleBbox3DAnalysis()` function that:
  - Captures the Google Static Maps image
  - Reads camera state (`heading`, `tilt`, `range`) from `mapData.cameraState`
  - Reads center coordinates and timezone
  - Reads drawn features
- Builds a `FormData` object with `action: 'bbox_3d_analysis'` and all the above
fields including `heading`, `tilt`, and `range`
- Add a matching button to `components/mobile-icons-bar.tsx` for mobile parity
===============================================================================

Task: 4

This phase builds the `Bbox3DOverlay` React component and all supporting
utilities to render detected 3D bounding boxes as native Google Maps 3D
overlays.

**Task 1: Create `components/map/bbox-3d-overlay.tsx`**
- Place file as a sibling to `google-geojson-layer.tsx`
- Accept props: `objects: Bbox3DObject[]`
- Consume `Map3DContext` via the `useMap3D()` hook to get the `Map3DElement`
instance
- The component should return `null` (no rendered DOM output); all work is done
via side-effects, matching the `GeoJsonLayer` pattern

**Task 2: Implement box_3d → Polygon3D conversion utility**
- Create a utility function (can be in the same file or a separate util) that
accepts a `box_3d` array `[x_center, y_center, z_center, x_size, y_size, z_size,
roll, pitch, yaw]`
- Compute all 8 corner vertices of the 3D box
- Apply Euler angle rotation transforms (roll, pitch, yaw)
- Convert camera-frame relative coordinates to world coordinates using the
current map camera state
- Return `LatLngAltitude` arrays suitable for use as `Polygon3DElement.path`

**Task 3: Render polygons in `Bbox3DOverlay` useEffect**
- For each detected object, create `Polygon3DElement` instances for each face (6
faces), or use `Polyline3DElement` for a simplified wireframe
- Set `altitudeMode` to `'ABSOLUTE'` or `'RELATIVE_TO_GROUND'` as appropriate
- Apply semi-transparent fill colors and a distinct stroke for visibility
- Use `extruded: true` where applicable
- Attach each element to the `Map3DElement` via `map3d.append(polygon)`
- Return a cleanup function that removes all created elements on unmount or when
`objects` prop changes

**Task 4: Add label overlays**
- For each bounding box, create a label element positioned at the centroid
- Use HTML overlay divs (positioned via CSS transforms) or `Marker3DElement` if
text labeling is supported
- Display the object's `label` text with an optional summary tooltip
- Style for readability against photorealistic tile backgrounds (e.g., dark
background with white text)

💡 Iterate on the plan with: @coderabbitai <feedback>

Example Feedback
- `@coderabbitai` You can skip phase 3. Add a simple unit test case for phase 2.
- `@coderabbitai` For design choice 1 go ahead with option 3 and replan.

---

💬 Have feedback or questions? Drop into our discord!