Start to implement a 3D model viewer

[spwoodcock]

What type of PR is this? (check all applicable)

• 🍕 Feature
• 🐛 Bug Fix
• 📝 Documentation
• 🧑‍💻 Refactor
• ✅ Test
• 🤖 Build or CI
• ❓ Other (please specify)

Describe this PR

• Pretty rough and ready, but a start to the 3D mesh rendering directly in DroneTM.
• Using ODM Obj2Tiles we can convert the contents of odm_texturing (mostly the .obj file) into Cesium 3D tile format, best for rendering selectively via HTTP requests (including zoom levels / detail).
• I set the default read path to S3 dtm-data/projects/pid/3d-tiles/**
• If this path is present, the frontend will show a button to 'View 3D Model'
• That opens a separate map with a maplibre map + three.js rendering of the model.
• Had to use a proxy via an endpoint on our backend to avoid permission issues with the private bucket - not ideal, but works, and should be performant enough in prod 🤞

Generating the data

• Added an obj2tiles container image in PR: Add Dockerfile & ghcr container build workflow OpenDroneMap/Obj2Tiles#94
  Run the container interactive: docker run --rm -it -v ./3d:/data --entrypoint=bash ghcr.io/opendronemap/obj2tiles:latest
  Prod command: obj2tiles --lods 8 --divisions 3 --lat 8.485934013759598 --lon -13.287644678683064 --alt 0.0 odm_textured_model_geo.obj ./output
  • Required to set lat / lon to center of project, else default to Milan somewhere.
  • I think it automatically reprojects in EPSG:4978 (WSG84 3D)
  • Do we need so many levels of detail? Perhaps 5 is enough instead of 7?

In production, we can use the correctly identified coords and altitude by opensfm:

obj2tiles --lods 8 --divisions 3 \
	--lat "$(jq -r .latitude opensfm/reference_lla.json)" \
	--lon "$(jq -r .longitude opensfm/reference_lla.json)" \
	--alt "$(jq -r .altitude opensfm/reference_lla.json)" \
	odm_textured_model_geo.obj ./output

Adding the conversion to DroneTM

• This part still needs to be done.
• After processing is complete and data in S3, we need to convert the data to 3D tiles.
• Once converted it should be placed in the correct S3 path.

TODO

• Fix the elevation - why is the model floating?
• Fix the rendering - it's pretty bad currently, having to zoom in and out to render all tiles properly. It should look good on first load.

AI Tool Usage

• No AI tools were used
• AI tools were used (complete below)

If AI-assisted:

• Tool(s) used: Opus 4.6 LLM
• What was generated: Assisted with the three.js approach, adapting what was already present in maplibre docs: https://maplibre.org/maplibre-gl-js/docs/examples/add-3d-tiles-using-threejs/
• What you reviewed and changed: Manual code review after - this is mostly a prototype, so less thorough than usual. To be improved.

Screenshots

Data from: https://drone.hotosm.org/projects/lumley-beach-demo

Alternative Approaches Considered

• Instead of 3D tiles + maplibre, we could use Potree and single file 3D mesh formats.
• That would require downloading the whole file before viewing though - fine for small projects, but bad for city-scale, where 3D tiles really shine.

Review Guide

• Manually create the data from the ODM outputs.
• Place in S3.
• Load the project.
• Click to view the model.

Checklist

• I have read the Contributing Guide
• I have read the Code of Conduct
• PR is focused and small
• Tests are included or updated
• I understand all code in this PR and can answer questions about it
• No secrets, credentials, or sensitive data are included
• Commit messages are descriptive
• Related docs and screenshots are updated

[optional] What gif best describes this PR or how it makes you feel?