VR Controller Mapping & Liquid Glass UI¶
New Liquid Glass Design ✨¶
The UI has been completely redesigned with a stunning liquid glass (glassmorphism) aesthetic.
Visual Design¶
Screen Layout
┌─────────────────────────────────────────┐
│ │
│ │
│ │
│ 360° IMMERSIVE CONTENT │
│ (No Overlays) │
│ │
│ │
│ │
│ ┌──────────────┐ │
│ │ Enter VR │ ← Liquid glass
│ └──────────────┘ │
│ ┌──────────────────┐ │
│ │ ◀ │ ▶ │ ← Glass bar │
│ └──────────────────┘ │
└─────────────────────────────────────────┘
Liquid Glass Control Bar¶
Location: Bottom center of screen Size: 280px × 80px Style: Frosted glass with blur effect
Features: - Semi-transparent background (10% white) - Backdrop blur (20px) - Subtle border (30% white) - Soft drop shadow - Pill-shaped (40px corner radius)
Buttons: - Left Arrow (◀) - Previous stage - Divider - Subtle line separator - Right Arrow (▶) - Next stage
Animations: - Scale on hover (grows slightly) - Press animation (shrinks briefly) - Smooth transitions (300ms)
VR Controller Button Mapping 🎮¶
Meta Quest / Oculus Controllers¶
Right Controller¶
[Y] [B] Y = Previous Stage
│ │ B = Previous Stage
│ │
[X] [A] X = Next Stage (primary)
│ │ A = Next Stage (primary)
│ │
└────┘
[Thumbstick] Left = Previous Stage
Right = Next Stage
[Trigger] Press = Next Stage
Left Controller¶
[Y] [B] Y = Previous Stage
│ │ B = Previous Stage
│ │
[X] [A] X = Next Stage
│ │ A = Next Stage
│ │
└────┘
[Thumbstick] Left = Previous Stage
Right = Next Stage
[Trigger] Press = Next Stage
HTC Vive / Index Controllers¶
[Menu Button] (Not mapped)
[Trackpad] Swipe Left = Previous
Swipe Right = Next
[Trigger] Press = Next Stage
[Grip Button] (Not mapped - used for teleport)
Windows Mixed Reality¶
[Thumbstick] Left = Previous Stage
Right = Next Stage
[Trigger] Press = Next Stage
[Menu Button] (System menu)
Button Mapping Details¶
A/X Button → Next Stage¶
- Component ID:
a-buttonorx-button - Action: Load next stage in sequence
- Behavior: Wraps to first stage after last
B/Y Button → Previous Stage¶
- Component ID:
b-buttonory-button - Action: Load previous stage in sequence
- Behavior: Wraps to last stage from first
Trigger → Next Stage¶
- Component ID:
xr-standard-trigger - Action: Load next stage (alternative control)
- Threshold: Full press required
Thumbstick → Left/Right Navigation¶
- Component ID:
xr-standard-thumbstick - Action:
- Push left (x < -0.5) → Previous stage
- Push right (x > 0.5) → Next stage
- Deadzone: Center ±0.2 (prevents drift)
- Behavior: One-shot trigger (hold prevents spam)
Desktop Controls (Non-VR)¶
Mouse¶
- Click Left Arrow (◀): Previous stage
- Click Right Arrow (▶): Next stage
- Drag: Look around 360°
- Scroll: Zoom (3D models only)
Keyboard (Future)¶
Planned keyboard shortcuts: - ← Arrow Left → Previous stage - → Arrow Right → Next stage - Space → Play/Pause video - Esc → Exit VR
UI Interaction Modes¶
Desktop Mode¶
- Hover effects on buttons
- Click to navigate
- Smooth animations
VR Mode¶
- Point with controller ray
- Gaze-based selection (no controller)
- Haptic feedback on button press
- All navigation via controller buttons
Liquid Glass Styling Details¶
Control Bar¶
Background: rgba(255, 255, 255, 0.1)
Backdrop Filter: blur(20px) saturate(180%)
Border: 1px solid rgba(255, 255, 255, 0.3)
Shadow: 0 8px 20px rgba(0, 0, 0, 0.3)
Enter VR Button¶
Background: rgba(255, 255, 255, 0.12)
Backdrop Filter: blur(20px) saturate(180%)
Border: 1px solid rgba(255, 255, 255, 0.25)
Shadow: 0 8px 32px rgba(0, 0, 0, 0.25)
+ inset highlight
Hover States¶
Background: rgba(255, 255, 255, 0.18)
Border: rgba(255, 255, 255, 0.35)
Transform: translateY(-2px) scale(1.02)
Shadow: Enhanced glow
Animation Timings¶
- Hover: 300ms cubic-bezier(0.4, 0, 0.2, 1)
- Press: 100ms instant
- Release: 100ms spring back
- Stage transition: Instant (seamless)
Advanced Features¶
Thumbstick Deadzone¶
Prevents accidental navigation from controller drift: - Active Zone: |x| > 0.5 - Deadzone: |x| < 0.2 - Hysteresis: Requires return to center before next trigger
Button Debouncing¶
Prevents multiple rapid stage changes: - Single trigger per button press - Must release before next press registers - Thumbstick one-shot mode
Haptic Feedback¶
Provides tactile confirmation: - Brief pulse on button press - Different intensity for next vs previous - Disabled on navigation failure
Troubleshooting¶
Controllers Not Working in VR¶
Check: 1. Controllers are powered on 2. Controllers are paired with headset 3. Browser has WebXR permissions 4. Console shows "VR Controller connected"
Debug: - Open browser console (F12) - Look for controller connection logs - Verify motion controller initialization
Buttons Not Responding¶
Solutions: 1. Ensure you're in VR mode (clicked "Enter VR") 2. Check stage count (need multiple stages) 3. Verify config.json has multiple stages 4. Try different buttons (A/B/Trigger/Thumbstick)
Glass Effect Not Visible¶
Requirements: - Modern browser (Chrome 76+, Safari 9+) - GPU acceleration enabled - backdrop-filter support
Fallback: - Works without backdrop-filter - Uses semi-transparent background - Still functional, just less glossy
Console Logs¶
When controllers are working, you'll see:
VR Controller connected: right-controller-id
Motion controller initialized
A/X button pressed - Next stage
Loading stage 2/5: stage-2
Performance Notes¶
- Glass effects: Minimal GPU impact (<1ms)
- Controller polling: 60-90 FPS, no lag
- Button mapping: Event-based (efficient)
- Animation: Hardware accelerated
Future Enhancements¶
Planned improvements: - [ ] Grip button for quick rewind - [ ] Double-tap for jump to specific stage - [ ] Hold button for stage preview - [ ] Custom button mapping in config - [ ] Voice commands ("Next", "Previous") - [ ] Hand tracking support
Summary¶
Navigation Options: 1. A/X Button → Next (primary) 2. B/Y Button → Previous 3. Trigger → Next (alternative) 4. Thumbstick Left/Right → Previous/Next 5. On-screen buttons → Click to navigate
UI Style: Liquid glass with frosted blur effect Location: Bottom center, unobtrusive Works: Desktop, VR, all controller types
Enjoy your beautiful, immersive navigation! ✨🎮