- Replace onBeforeRender stereo detection to use cascading fallbacks:
1. Direct xrCamera.cameras[0]/[1] comparison
2. View matrix matrixWorldInverse.elements[12] with 0.001 threshold
3. Projection matrix elements[8] as last resort
- Add video texture sync in renderXR before render call
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
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
- Modify on2DTouchStart() to check dragging state before showing controls
- Prevents controls from appearing during active touch dragging
- Makes touch behavior consistent with mouse dragging behavior
- Controls hide when dragging starts and show when dragging ends
- Resolves issue where touch dragging would show controls while mouse dragging correctly hid them
- Ensures seamless user experience across desktop and mobile devices
- Add CSS classes (.muted/.unmuted) for mute button state management
- Fix button logic to show action that will be taken (standard UI pattern):
- When audio playing (unmuted): shows mute icon (click to mute)
- When audio muted: shows unmute icon (click to unmute)
- Add proper hover states for both mute and unmute icons
- Initialize button state correctly on video load
- Smooth 0.15s transitions between all states
- Follows standard media player UI conventions
- Fix panel positioning calculation to account for panel height
- Position panel bottom edge 10% from canvas bottom (not container)
- Ensure panel stays within canvas bounds when WebGL canvas is active
- Update positioning on window resize for responsive behavior
- Resolves issue where panel appeared partially below canvas
- Add complete 2D control panel with HTML structure and CSS styling
- Implement JavaScript functionality for all control buttons:
- Fullscreen toggle for immersive 16:9 video experience
- Play/pause with dynamic icon switching
- Back/forward 15-second skip controls
- Mute/unmute toggle
- Click-to-seek progress bar with real-time updates
- Add auto-hide behavior (5-second timeout) with mouse/touch activation
- Integrate with existing 2D mode - shows only when VR not supported
- Include all button PNG assets (normal and hover states)
- Responsive design for mobile devices
- Professional styling matching design specifications
- Added video.load() to resetToOriginalState() function
- Forces video element to reload and show poster image instead of first frame
- Ensures proper reset to original state after exiting VR
- Created resetToOriginalState() function to reset video to poster frame and show play button
- Integrated reset function into onVRSessionEnd() for consistent VR exit behavior
- Enhanced onVideoEnded() to reset state for all playback modes
- Ensures users see original poster + play button state after exiting VR
- Add 2D rectilinear mode when VR is not supported
- Implement mouse and touch drag controls for camera movement
- Add proper pitch and yaw constraints (45°) for VR180 content boundaries
- Reduce momentum damping from 0.9 to 0.8 for 50% less inertia
- Show only left eye view in 2D mode for proper rectilinear projection
- Constrain WebGL canvas to 16:9 aspect ratio matching video element
- Add intuitive drag directions (drag down = look up, drag left = look right)
- Prevent viewing empty areas beyond VR180 content coverage
- Maintain smooth momentum-based camera movement with natural boundaries
- Replace embedded SVG code with external play.svg file
- Update HTML to use <img src='play.svg'> for cleaner code
- Update CSS selector from 'svg' to 'img' element
- Maintain all existing functionality and styling
- Improve code maintainability and separation of concerns
- Enable better caching and easier SVG updates
- Replace text button with beautiful SVG play button
- Position button over center of video with responsive sizing
- Add smooth hover and click animations
- Hide button after click and enable native browser controls for 2D
- Maintain VR functionality when supported
- Add proper accessibility with aria-label
- Responsive design works on mobile and desktop
- Remove all debug console.log statements
- Maintain clean, production-ready code
- Play button now works reliably in both VR and 2D modes
- Video element visibility properly managed for 2D/VR transitions
- Remove automatic video hiding on page load
- Show video element by default for 2D viewing
- Enable play button for regular video playback when VR is not supported
- Hide video only when entering VR mode, show when exiting
- Maintain existing VR functionality when supported
- Button text always comes from HTML, never modified by JavaScript
