Should look familiar – it is the same Webkit underneath.
Touch the page to follow a link, or look at it and tap fingers together
Tab over has been completely redesigned
You can do Tab views to surround you
Best practices –
- All the websites work out the box using responsive design
- Use CSS viewport units
- Resize based on media and container queries
- Use SVG for UI elements
- For bitmap access use devicePixelRatio for image loading
Natural Interactions
- Main model is eye and hand gesture.. just look around and pinch to select (it will capture where you eyes were looking
- Touch the page with your index finger – that is a pointerDown event. You don’t need to worry about this for low level interactions
- Media Queries – it is similar to a touch screen – coarse and doesn’t support hovering
- Elements will highlight based on eye tracking so it knows how to select
- Make sure to use cursor:pointer; to show that something is interactive.
- Test your highlight regions in the xrOS simulator
Platform optimization
- Screen is a bit more abstract, just like the change of pixels when retina was introduced.
- Full screen windows can be resized on the platform, so they can be larger than expected.
- requestAnimationFrame always measure elapsed time between frames
Integrating with 3d Content
- Adjust your website to use quicklook so that you can pull 3D objects out of the website and anchor them in the real space.
- All you need is a link to the usdz model, and an image with a preview
- Will leverage the advance lighting and rendering from ARKit
- Adding a new element via <model interactive> <source = src””> </model> for html
- WebXR dev preview is available to learn more
- New settings screen in Safari on the platform to enable various 3D features and WebXR