Update documentation for Arena 3D Viewer

README.md:
- Add Arena 3D Viewer section with feature list
- Add arena_3d_viewer.html to repository structure

CLAUDE.md:
- Add LED specifications (0604 package, 1.5:1 ratio, 45° rotation)
- Add comprehensive Arena 3D Viewer section with:
  - Key implementation details (Three.js, preserveDrawingBuffer, etc.)
  - State object structure
  - Pattern constraints (integer divisors)
  - Screenshot filename format
  - URL parameters from Arena Editor
- Add Load Pattern placeholder note to TODOs

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: mbreiser

CLAUDE.md

@@ -39,14 +39,56 @@ Web calculations are validated against MATLAB reference data:
 ## Panel Specifications
 
 Standard panel generations:
-- G3: 32mm width, 8x8 pixels
-- G4: 40.45mm width, 16x16 pixels
-- G4.1: 40mm width, 16x16 pixels
-- G5: 40mm width, 20x20 pixels
-- G6: 45.4mm width, 20x20 pixels
+- G3: 32mm width, 8x8 pixels (circle LEDs)
+- G4: 40.45mm width, 16x16 pixels (circle LEDs)
+- G4.1: 40mm width, 16x16 pixels (rotated rectangle LEDs)
+- G5: 40mm width, 20x20 pixels (rotated rectangle LEDs)
+- G6: 45.4mm width, 20x20 pixels (rotated rectangle LEDs)
 
 Arena radius formula: `cRadius = panelWidth / (tan(alpha/2)) / 2` where `alpha = 2*PI/numPanels`
 
+### LED Specifications
+- G4.1, G5, G6 use 0604 LED package: 0.6mm × 0.4mm = 1.5:1 aspect ratio
+- LEDs are rectangles rotated 45° on the panel (not diamonds)
+- G3, G4 use circular LED visualization
+
+## Arena 3D Viewer (`arena_3d_viewer.html`)
+
+### Key Implementation Details
+- Uses Three.js r128 with OrbitControls
+- Renderer requires `preserveDrawingBuffer: true` for screenshot functionality
+- LED meshes stored in `ledMeshes[]` array for efficient animation (color-only updates)
+- Pattern rotation uses `state.phaseOffset` to shift pattern, not world rotation
+- Controls disabled during auto-rotate for performance
+
+### State Object
+```javascript
+state = {
+    panelType: 'G6',      // G3, G4, G4.1, G5, G6
+    numCols: 12,          // panels around (from 2D editor URL params)
+    numRows: 3,           // panels vertically
+    activePanels: null,   // array of active column indices, null = all
+    pattern: 'allOn',     // 'allOn', 'grating', 'sine'
+    gratingPixels: 20,    // pixels on/off (must be integer divisor)
+    sineWavelength: 120,  // wavelength in pixels (must be integer divisor)
+    phaseOffset: 0        // current phase for rotation animation
+}
+```
+
+### Pattern Constraints
+- Grating and sine wavelengths must be integer divisors of total azimuth pixels
+- This ensures patterns tile seamlessly around the arena
+- Use `getIntegerDivisors()` to populate valid options
+
+### Screenshot Filenames
+Format: `arena_{gen}_{cols}c{rows}r_{pattern}[_stats]_{timestamp}.png`
+Example: `arena_G6_12c3r_sine120_stats_2026-01-17T10-30-45.png`
+
+### URL Parameters (from Arena Editor)
+- `gen`: Panel generation (G3, G4, G4.1, G5, G6)
+- `cols`: Number of columns (panels around)
+- `active`: Comma-separated 0-based indices of active panels (omitted if all active)
+
 ## TODO / Future Improvements
 
 ### Angular Resolution Display
@@ -59,3 +101,6 @@ A proper implementation should:
 - Consider both azimuth (constant) and vertical (varies with elevation) components
 
 The azimuth resolution is constant (360° / total_azimuth_pixels), but vertical resolution varies based on viewing angle from center - pixels near the vertical center subtend smaller angles than those at the top/bottom edges.
+
+### Load Pattern Feature
+The "Load Pattern (Coming Soon)" button is a placeholder for future functionality to load custom patterns from files or the pattern editor.

README.md

@@ -34,6 +34,19 @@ Configure arena geometry and panel layout for G3-G6 display systems with:
 
 **[Launch Arena Layout Editor →](https://reiserlab.github.io/webDisplayTools/arena_editor.html)**
 
+### Arena 3D Viewer ✅ Ready
+Interactive 3D visualization of arena configurations with:
+- Three.js-based 3D rendering with orbit controls
+- Accurate LED visualization (rotated rectangles for G4.1/G5/G6, circles for G3/G4)
+- Pattern visualization: All On, Grating (square wave), Sine wave
+- Animated pattern rotation with efficient color-only updates
+- Standard view presets (top-down, cardinal directions, fly view from center)
+- Zoom controls and screenshot export with descriptive filenames
+- Linked from Arena Layout Editor with configuration pass-through
+- v3 (2026-01-17)
+
+**[Launch Arena 3D Viewer →](https://reiserlab.github.io/webDisplayTools/arena_3d_viewer.html)**
+
 ### G4.1 Pattern Editor 🚧 Coming Soon
 Design patterns for G4.1 display systems with support for multiple panel configurations.
 
@@ -73,6 +86,7 @@ webDisplayTools/
 ├── index.html                # Main landing page
 ├── g6_panel_editor.html      # G6 Panel Pattern Editor (ready)
 ├── arena_editor.html         # Arena Layout Editor (ready)
+├── arena_3d_viewer.html      # Arena 3D Viewer (ready)
 ├── g41_pattern_editor.html   # G4.1 pattern editor (placeholder)
 ├── g6_pattern_editor.html    # G6 pattern editor (placeholder)
 ├── experiment_designer.html  # Experiment Designer (placeholder)