HYPERVIEWER: 5D Ballistic Solution Space Visualizer

An interactive 5D visualization tool designed for exploring complex multidimensional ballistic solution spaces, specifically designed for FTC (First Tech Challenge) Decode season.

Example

Features

• Multidimensional Exploration: Visualize 5+ independent variables simultaneously using XYZ, Color, Size, Opacity.
• Interactive 3D Environment: Powered by React Three Fiber (R3F) for high-performance rendering.
• Lattice & Volumetric Mesh:
  • Lattice Connections: View relationships along specific dimensions.
  • 3D Volumetric Mesh: Render a solid semi-transparent volume representing the entire sampled space.
• Advanced Slicing & Filtering:
  • Pinpoint Mode: Slice through dimensions at specific values.
  • Range Mode: Filter data within manual bounds.
  • Opacity Fading: Soft-fades points and lines at the edges of your filters for clear context.
• Dual Camera Control:
  • Orbit Mode: Intuitive rotation around the data center.
  • Free View: FPS-style movement (WASD + Mouse) with pointer lock for immersive exploration.

Getting Started

Prerequisites

• Node.js (v18 or higher recommended)
• npm

Installation

1. Clone the repository:

   git clone https://github.com/Vlarkus/FTC-Complete-shooting-solution-space-visualizer.git
   cd FTC-Complete-shooting-solution-space-visualizer

2. Install dependencies:

   npm install

3. Run the development server:

   npm run dev

4. Open in browser: Navigate to http://localhost:5173 (or the port specified in your terminal).

How to Use

1. Sidebar (Left):
   • Axes: Change which variables are mapped to the spatial axes (X, Y, Z) and the color axis (C).
   • Variables: Use sliders to "slice" through dimensions. Toggle "Show All" to see the full range or enable "Opacity Filtering" for soft transitions.
2. Panels (Right):
   • Cam: Switch between Camera modes and adjust movement speed.
   • Grid: Adjust the visualization box size and step intervals.
   • Display: Change point sizes, line thicknesses, color gradients, and toggle special features like the Volumetric Mesh.
3. Shortcuts:
   • Free View: Click the canvas to lock the mouse. Use WASD to move, Space to rise, and Shift to lower. Press ESC to unlock.

Tech Stack

• React + Vite
• Three.js (@react-three/fiber, @react-three/drei)
• Zustand (State Management)
• Tailwind CSS (Styling)
• Lucide React (Icons)

---

Made by Vlarkus :)