Replace camera reference comparison with view matrix eye detection
for more reliable left/right eye identification. Recent Quest Browser
updates (Chromium 138/140, Horizon OS v83) changed WebXR multiview
behavior, causing the previous xrCamera.cameras[0]/[1] comparison
to fail intermittently on the left eye.
The new approach uses activeCamera.matrixWorldInverse.elements[12]
(the X translation in the view matrix) which reliably indicates:
- Negative value = left eye
- Positive value = right eye
This method is consistent across both Quest Browser and Safari/VisionOS.
Also adds explicit video texture synchronization in the render loop
to prevent timing-related glitches.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Changed canvas positioning from absolute to relative in start2DMode()
- Resolves issue where content below video was hidden underneath canvas
- Fixes canvas disappearing during page resize and fullscreen operations
- Canvas now properly flows within document layout
- Updated index.html with latest changes
- Updated vr180player/vr180-player.css with styling improvements
- Updated sbs-video.mp4 with new video content
- Fixed onWindowResize() to use container dimensions instead of hidden video element
- Updated start2DMode() to use consistent container-based sizing logic
- Added fullscreen event listeners to handle resize during fullscreen transitions
- Added minimum dimension constraints to prevent zero-sized canvas
- Canvas now maintains proper dimensions during window resize and fullscreen operations
- Remove static HTML elements (play button and control panel) from index.html
- Add createPlayButton() and create2DControlPanel() functions to dynamically generate UI
- Update DOMContentLoaded handler to create and insert UI elements on page load
- Maintain all existing functionality while making player more modular and self-contained
- UI elements are now created entirely by JavaScript, making the player easier to integrate
- Tested and verified: play button appears correctly, 2D mode works, controls function properly
- Create vr180player/ folder with organized structure:
- vr180player/images/ for all UI control images
- vr180player/vr180-player.js and vr180player/vr180-player.css
- Move poster.jpg back to root level alongside main content files
- Update all file references in index.html and CSS files
- Maintain clean separation between main content and player components
- All functionality preserved with improved organization
