VIB34D V2 Holographic Visualization Engine

This skill provides complete context for working with the VIB34D V2 system - a sophisticated holographic visualization engine with 4 distinct rendering systems, 11-parameter control interface, gallery management, and trading card generation.

System Overview

VIB34D V2 is a fully operational visualization platform with:

**4 Visualization Systems**: Faceted (2D geometric), Quantum (3D lattice), Holographic (audio-reactive), Polychora (4D polytopes)

**11 Parameter Controls**: Real-time manipulation of geometry, rotation, density, chaos, colors

**20 WebGL Contexts**: Multi-layer canvas architecture with proper resource management

**Gallery System**: Portfolio management with live iframe previews

**Trading Card Export**: Generate visual cards from any system state

Core Architecture

Main Entry Point

**File**: `index.html` (2470+ lines)

**Key Functions**:

- `switchSystem()` at line 774 - Routes between 4 visualization systems

- `updateParameter()` at line 1710 - Applies parameter changes to active system

- `CanvasLayerManager` - Manages 20 WebGL contexts across 5-layer architecture

The 4 Visualization Systems

1. **FACETED** (VIB34DIntegratedEngine)

- Simple 2D geometric patterns

- Engine: `src/core/Engine.js`

- Best for: Clean, minimal visualizations

2. **QUANTUM** (QuantumEngine)

- Complex 3D lattice structures

- Engine: `src/quantum/QuantumEngine.js`

- Best for: Scientific, data-driven visuals

3. **HOLOGRAPHIC** (RealHolographicSystem)

- Audio-reactive holograms

- Engine: `src/holograms/RealHolographicSystem.js`

- Best for: Music visualization, reactive content

4. **POLYCHORA** (PolychoraSystem)

- 4D polytope projections

- Engine: `src/core/PolychoraSystem.js`

- Best for: Mathematical, hyperdimensional visuals

Parameter System

All systems respond to these 11 parameters:

```javascript

{

geometry: 0-7, // 8 VIB3 geometry types

rot4dXW: -6.28 to 6.28, // 4D rotation X-W plane

rot4dYW: -6.28 to 6.28, // 4D rotation Y-W plane

rot4dZW: -6.28 to 6.28, // 4D rotation Z-W plane

gridDensity: 5-100, // Detail/complexity level

morphFactor: 0-2, // Shape transformation amount

chaos: 0-1, // Randomization factor

speed: 0.1-3, // Animation speed multiplier

hue: 0-360, // Color hue (degrees)

intensity: 0-1, // Brightness level

saturation: 0-1 // Color saturation

}

```

Development Guidelines

Running the Development Server

```bash

Start server on port 8144

python3 -m http.server 8144

Access main interface

open http://localhost:8144

Access gallery system

open http://localhost:8144/gallery.html

```

Testing Checklist

When making changes, verify:

1. **System Switching**: Click all 4 system buttons - should switch instantly without errors

2. **Parameter Controls**: Move sliders and dropdowns - should update visualization in real-time

3. **Geometry Selection**: Change geometry dropdown - should apply to active system

4. **Gallery Previews**: Open gallery.html - iframes should show correct systems

5. **Trading Cards**: Export from any system - should generate proper card

6. **Console**: Check for JavaScript errors - should be clean

Critical Success Factors

**✅ DO:**

Preserve sophisticated multi-system architecture

Test system switching after every change

Maintain clean parameter routing to active system

Keep canvas layer management intact

Verify gallery iframe previews work

Ensure all 4 systems remain functional

**❌ DON'T:**

Simplify the sophisticated architecture

Add mobile optimizations without extensive testing

Override core switchSystem or updateParameter functions

Break canvas layer manager functionality

Create dependencies that prevent system switching

Remove working functionality to "fix" mobile

Known Working State

The system was successfully restored to commit `dcf16f0` after mobile optimization attempts broke functionality. This represents the last fully working state before optimization cascade failures.

Common Development Tasks

Adding a New Parameter

1. Add to parameter object in `index.html`

2. Add slider/control to UI

3. Update `updateParameter()` function (line 1710)

4. Implement parameter in each of 4 engine files

5. Test in all 4 systems

Creating a New Visualization System

1. Create new engine file in `src/` directory

2. Implement standard parameter interface (11 parameters)

3. Add system button to UI

4. Add case to `switchSystem()` function (line 774)

5. Update `CanvasLayerManager` routing

6. Add to gallery system detection

Fixing Gallery Previews

Gallery previews use iframes with parameter passing:

Preview URL format: `viewer.html?system={name}&params={json}`

System detection in viewer reads URL parameters

Check `gallery.html` for preview generation code

Ensure viewer.html properly initializes selected system

Performance Optimization

If optimization is needed:

Profile individual systems, not the switching mechanism

Optimize shader code in engine files

Reduce draw calls per frame

Consider LOD (level of detail) for gridDensity

Use requestAnimationFrame properly

Clean up WebGL resources on system switch

File Structure

Core Files (All Working)

`index.html` - Main system interface (2470+ lines)

`gallery.html` - Portfolio and save/load system

`viewer.html` - Individual visualization viewer

`src/core/Engine.js` - Faceted system

`src/quantum/QuantumEngine.js` - Quantum system

`src/holograms/RealHolographicSystem.js` - Holographic system

`src/core/PolychoraSystem.js` - Polychora 4D system

Supporting Files

`src/core/CanvasLayerManager.js` - Multi-canvas orchestration

`src/core/VIB3Geometry.js` - 8 base geometry definitions

`src/utils/` - Various utility functions

Troubleshooting

System Won't Switch

Check console for JavaScript errors

Verify `switchSystem()` function not overridden

Ensure canvas layer manager initialized

Check for mobile optimization code conflicts

Parameters Not Updating

Verify `updateParameter()` function scope

Check active system properly receives parameters

Ensure parameter routing in canvas manager

Test with console.log in engine files

Gallery Previews Broken

Check iframe src URLs in gallery.html

Verify viewer.html loads correct system

Test parameter JSON encoding/decoding

Ensure CORS not blocking local iframes

WebGL Context Errors

Check total canvas count (should be 20)

Verify contexts cleaned up on system switch

Test with fewer simultaneous contexts

Check browser WebGL context limit

Mobile Considerations

If mobile support is required:

Create separate mobile-optimized page instead of modifying main system

Test extensively to ensure no regression of desktop functionality

Use feature detection, not user-agent sniffing

Consider simplified 2-system version for mobile

Preserve full desktop functionality at all costs

Current Status

**✅ SYSTEM FULLY OPERATIONAL**

All features working:

System switching without errors

Parameter controls with immediate response

Gallery previews showing correct visualizations

All 20 WebGL contexts properly managed

Trading card generation from all systems

Professional interface with full functionality preserved

**Ready for**: Advanced development, feature enhancement, new visualization modes, performance optimization (done carefully)

Notes

This system represents a sophisticated multi-engine visualization platform. Any changes should be made incrementally with thorough testing to preserve the working state. The architecture is deliberately complex to support 4 distinct rendering systems with unified parameter control - simplification would break core functionality.

VIB34D V2 System Context