WebXR on visionOS

WebXR

• Input Selection

  • Demonstrates handling 'select' events generated by XRInputSources.

• 360 Stereo Photos

  • Demonstrates displaying a 360 degree equirectangular stereo photo.

• Teleportion

  • Demonstrates teleporting the viewer around the scene with getOffsetReferenceSpace().

  • Pinch to a location with two fingers and let go to teleport.

Developer Docs and Video

WebXR Examples on visionOS Notes

https://immersive-web.github.io/webxr-samples/

• WebXR seems to be working on Apple Vision Pro if you set up permissions on Safari Settings (toggle various WebXR permissions on)

• VR seems to work, but AR has some issues

• Taking screenshots within the WebXR VR environment is limited

  • Either we can't take a screen capture or we take a screenshot of the outside environment rather than the VR environment

• 3D immersive photos, stereo video, teleportation/movement, immersive input hand tracking selection seems to work

• Clicking on Immersive VR demos from prior WebXR projects that were designed for Quest is stil an issue.

From Meet Safari for Spatial Computing: https://developer.apple.com/videos/play/wwdc2023/10279/?time=939 

Introduction

Currently the only browser that is supported on the Apple headset is Safari. It is unclear whether Chrome will create their own app for the headset. Safari on visionOS is built on the same WebKit engine that its iPad and Mac counterparts use, but with enhancements to accommodate spatial computing. It supports multi-tasking, full-screen and webXR capabilities. 

User Interaction

One of the highlights of Safari on visionOS is its natural interaction model. Users can interact with web content through intuitive gestures, such as touching the page or tapping fingers together, as well as eye movements. Some related javascript events for these gestures are 'pointerdown', 'pointermove', and 'pointerup' events, which are triggered by a hand movement, such as a pinch, which then queries the direction of the user's eyes to determine which HTML element to select. 

Multitasking and Full-Screen Experience

Multitasking is an important feature on this Safari. Users can open multiple windows simultaneously, combining web browsing with other applications in a spatial arrangement of their choosing. This feature is particularly beneficial for web developers who can use it alongside Mac Virtual Display for a comprehensive web development experience. There is also support for full-screen mode for web videos, which offers a more focused and enlarged viewing experience. 

Best Practices

Developers are advised to embrace responsive design principles to ensure their websites adapt effectively from smaller devices like iPhones to larger spatial computing environments. CSS viewport units are essential for designing adaptable layouts. For graphics, SVG is recommended, especially for UI elements, to guarantee optimal rendering for any size UI. When using bitmap assets, devicePixelRatio and responsive images are crucial for maintaining resolution across different devices.

Debugging

Developers can currently use the visionOS simulator by downloading the XCode beta to debug and optimize their websites, even without access to a physical device. This tool allows for the simulation of eye movements and taps, enabling developers to fine-tune interactive regions and other website functionalities. CSS properties such as cursor styles and border-radius play a crucial role in enhancing the visual feedback and interactivity on this platform. Use this link to learn how to download the beta to develop apps for visionOS without the headset. 

WebXR

WebXR is a W3C standard that enables the creation of fully immersive scenes on the web, based on WebGL technology. It transcends traditional web navigation, allowing users to literally step inside a 3D scene. Safari offers support for WebXR applications.

Software Compatibility

WebXR integrates seamlessly with many popular WebGL libraries (such as three.js and A-frame), allowing for the easy transition of existing 3D scenes into immersive experiences. By requesting a WebXR session, developers can transform their 3D content into a fully immersive environment, providing users with an unprecedented level of engagement.

Device Compatibility

WebXR is designed to be future-proof, capable of adapting to various device frame rates, whether slow or fast. This adaptability ensures that animations and interactions remain smooth and consistent across different devices. Developers are encouraged to use requestAnimationFrame for animations and to measure the time elapsed between frames for optimal performance.

Development

WebXR opens up new possibilities for 3D content on the web. The integration of this technology in Safari for spatial computing is just the beginning of exploring the immersive web. Because of Apple's involvement in W3C standards, technologies like CSS transforms and pointer events are evolving to suit spatial computing. 

Apple actively encourages feedback from the developer community to continue refining and developing WebXR and other web standards. If you're making an application on WebXR, feel free to reach out the the Safari team so that they can incorporate your feedback.