Skip to content

Add interactive hierarchy visualization for clustered 3D reconstruction#1089

Open
nilakarthikesan wants to merge 2 commits into
borglab:masterfrom
nilakarthikesan:feature/hierarchy-visualization
Open

Add interactive hierarchy visualization for clustered 3D reconstruction#1089
nilakarthikesan wants to merge 2 commits into
borglab:masterfrom
nilakarthikesan:feature/hierarchy-visualization

Conversation

@nilakarthikesan
Copy link
Copy Markdown

@nilakarthikesan nilakarthikesan commented Mar 13, 2026

Summary

Adds a web-based Three.js visualization (visualization/hierarchy-web/) that interactively shows how the GTSfM hierarchical clustering pipeline progressively merges VGGT cluster reconstructions into a complete building model.

  • Camera-based orientation: Automatically computes scene orientation from COLMAP camera poses (images.txt) by averaging camera up-vectors and computing camera-to-building direction. Produces a mathematically derived rotation matrix -- no hardcoded angles. Works for any dataset.

  • Squareness-optimized layout: At each tree level, exhaustively searches all possible row/column groupings (2^(n-1) partitions) to maximize worst-case tile squareness. Clusters fill the screen efficiently in a grid-like arrangement.

  • Per-point alpha blending: During merge transitions, matched points smoothly interpolate from child to merged positions using cubic easing. Unmatched child points fly to nearest merged counterparts; unmatched merged points fly from nearest child points.

  • Built-in recording: One-click Record button captures the visualization as a .webm video using the MediaRecorder API.

How to Run

cd visualization/hierarchy-web

# Place GTSfM results at data/gerrard-hall-vggt/results/
# (each cluster folder needs points3D.txt and images.txt)

python3 -m http.server 8080
# Open http://localhost:8080/hierarchy-vggt.html

See visualization/hierarchy-web/README.md for full setup details.

Files Added

  • visualization/hierarchy-web/hierarchy-vggt.html -- Main page with UI and styling
  • visualization/hierarchy-web/js/data-loader-vggt.js -- Point cloud and camera extrinsic loading
  • visualization/hierarchy-web/js/layout-engine-squareness.js -- Recursive layout algorithm
  • visualization/hierarchy-web/js/animation-engine-squareness.js -- Timeline and merge animations
  • visualization/hierarchy-web/js/main-hierarchy-vggt.js -- App entry point, scene setup, recording
  • visualization/hierarchy-web/js/camera-engine.js -- Camera flythrough support
  • visualization/hierarchy-web/js/interaction-engine.js -- Mouse interaction
  • visualization/hierarchy-web/README.md -- Setup and usage instructions

Test Plan

  • Place GTSfM results in data/gerrard-hall-vggt/results/, start server, open visualization
  • Verify clusters are oriented upright with building facing forward
  • Play through all events and verify merge animations complete correctly
  • Test Record button: start recording, play events, stop, verify .webm downloads
  • Verify layout fills screen without excessive white space

Web-based Three.js visualization that shows how the GTSfM hierarchical
clustering pipeline progressively merges VGGT cluster reconstructions
into a complete building model.

Key features:
- Camera-based orientation: automatically computes scene orientation from
  COLMAP camera poses (images.txt) instead of hardcoded rotations
- Squareness-optimized layout: exhaustive partition search at each tree
  level to maximize tile squareness and fill the screen efficiently
- Per-point alpha blending: smooth merge transitions where matched points
  interpolate positions and unmatched points fly to nearest counterparts
- Built-in recording: capture the visualization as a .webm video

See visualization/hierarchy-web/README.md for setup and usage instructions.

Made-with: Cursor
Add detailed explanations of:
- Camera-based orientation (parsing COLMAP poses, averaging up-vectors,
  building orthonormal rotation matrix)
- Squareness-optimized layout (exhaustive partition search, proportional
  weighting, recursive subdivision)
- Per-point alpha blending (nearest-neighbor matching, three-category
  point interpolation, cubic easing)
- Full timeline sequence description
- Recording instructions

Made-with: Cursor
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant