📐AERIAL SHOT PROTOTYPE

Isometric Perspective Transformation Engine

PROTOTYPE: Aerial View / Isometric Perspective
BRANCH: prototypes/aerial-shot

Architecture Overview

Normalized Branch Architecture

The transformation engine uses a normalized coordinate system that standardizes all golf course layouts before applying perspective transformations. This ensures:

  • Consistent rendering across different hole archetypes (Precision, Convergent, Explorer, Creative)
  • Predictable transformation behavior regardless of course layout complexity
  • Easy integration of new hole types without modifying core transformation logic

Isometric Perspective Transformation

The "aerial shot" uses axonometric projection (specifically isometric) to create the 3D effect:

  • Parallel View: Lines remain parallel (unlike true perspective), maintaining consistent scale
  • Diagonal Movement: Course appears to move "up and to the right" creating depth illusion
  • Zone-Based Depth: Different zones (rough, fairway, approach, green) have different Z-depths
  • 3D Arc Trajectories: Shot paths are rendered as curved 3D arcs through the transformed space

Transformation Pipeline

The transformation follows this pipeline:

  1. Normalization: 2D hole layout generated via holeGenerator.ts
  2. Coordinate Transformation: Apply rotation matrices (X, Y, Z axes) using perspectiveTransform.ts
  3. Depth Application: Assign Z-values based on zone progression and transformation descriptor
  4. Projection: Project 3D coordinates to 2D using axonometric projection
  5. Arc Generation: Generate 3D shot trajectories using shotArc3D.ts
  6. Rendering: Render transformed SVG paths in PerspectiveHoleView component

Controls

isometric view, oriented diagonal up-right, with receding depth effect, (rough: 0, fairway: 20, approach: 40, green: 60)

Aerial Shot: Authentication System

Transformation: isometric view, oriented diagonal up-right, with receding depth effect, (rough: 0, fairway: 20, approach: 40, green: 60)

Pipeline: Flat Pattern → Perspective Transform → Arc Animation

TEEGREENHole 1

Technical Implementation

Core Files

  • lib/perspectiveTransform.ts: Axonometric projection engine and coordinate transformations
  • lib/perspectiveLanguage.ts: Transformation language and descriptor system
  • lib/shotArc3D.ts: 3D arc trajectory generation for shot paths
  • lib/perspectiveHoleGenerator.ts: Integration layer for perspective-transformed layouts
  • components/prototypes/PerspectiveHoleView.tsx: React component for rendering aerial shots

Future Refinements

  • Enhanced SVG path parser for better curve preservation
  • Animation support for shot trajectory playback
  • Interactive transformation controls
  • Multiple hole visualization (entire course aerial view)
  • Export functionality (SVG, PNG, PDF)
  • Performance optimization for complex hole geometries