docs: layers and secondary input sources

feat: xr layer for vanilla

Author: bbohlender

README.md

@@ -72,6 +72,8 @@ export function App() {
 - ✴ [Origin](https://docs.pmnd.rs/xr/tutorials/origin)
 - 🪄 [Teleport](https://docs.pmnd.rs/xr/tutorials/teleport)
 - 🕹️ [Gamepad](https://docs.pmnd.rs/xr/tutorials/gamepad)
+- ➕ [Secondary Input Sources](https://docs.pmnd.rs/xr/tutorials/secondary-input-sources)
+- 📺 [Layers](https://docs.pmnd.rs/xr/tutorials/layers)
 - 🎮 [Custom Controller/Hands/...](https://docs.pmnd.rs/xr/tutorials/custom-inputs)
 - ⚓️ [Anchors](https://docs.pmnd.rs/xr/tutorials/anchors)
 - 📱 [Dom Overlays](https://docs.pmnd.rs/xr/tutorials/dom-overlay)
@@ -81,8 +83,6 @@ export function App() {
 ## Roadmap
 
 - 🤳 XR Gestures
-- ➕ Multimodal
-- 📺 Layers
 - 🕺 Tracked Body
 - ↕ react-three/controls
 

docs/advanced/performance.md

@@ -1,7 +1,7 @@
 ---
 title: Performance
 description: Important considerations for building performant immersive web applications with react-three/xr
-nav: 20
+nav: 22
 ---
 
 All performance optimizations for non-immersive 3D web applications are also applicable for immersive XR web applications. Relevant guides on the topic of performance for 3D web applications are the [R3F performance guide](https://docs.pmnd.rs/react-three-fiber/advanced/scaling-performance), [R3F performance pitfalls](https://docs.pmnd.rs/react-three-fiber/advanced/pitfalls), and the [Threejs tips and tricks](https://discoverthreejs.com/tips-and-tricks/#performance). In general, it is good to check if your web application's performance is GPU- or CPU-bound to select the correct optimization techniques.

docs/advanced/pitfalls.md

@@ -1,7 +1,7 @@
 ---
 title: Pitfalls
 description: Pitfalls to avoid when building immersive web applications with react-three/xr
-nav: 19
+nav: 21
 ---
 
 ## Changing the camera position in XR

docs/getting-started/all-components.md

@@ -56,6 +56,8 @@ Component for rendering a mesh for the XRPlane based on the detected plane geome
 
 Component that positions its children in the provided space.
 
+- `space`: Property to provide the xr space or the reference space type, such as `"viewer"`.
+
 ### `TeleportTarget`
 
 Component that allows to declare its children as teleport targets.
@@ -64,6 +66,24 @@ Component that allows to declare its children as teleport targets.
 
 Component that allows to emit hit tests from its position in the scene graph.
 
+- `onResults`: Property that allows to provide a callback to retrieve the hit test results.
+
+### `XRLayer`
+
+Component for rendering high quality quad, cylinder, or equirectangular layers inside supported sessions while including a fallback for not supported sessions.
+
+- `src`: Property for displaying images and videos onto the layer. For rendering dynamic content to the layer, leave the `src` empty and put the the dynamic (3D) content into the children so the layer acts as a render target. 
+- `shape`: Property to configure the shape of the layer (`"quad"`, `"cylinder"`, `"equirectangular"`).
+- `layout`: Property to configure the layout of the display content for stereo content (`"default"`, `"mono"`, `"stereo-left-right"`, `"stereo-top-bottom"`).
+- `centralAngle`: Property to configure the central angle in case the layer `shape` is a `"cylinder"`.
+- `centralHorizontalAngle`: Property to configure the central horizontal angle in case the layer `shape` is `"equirectangular"`.
+- `upperVerticalAngle`: Property to configure the upper vertical angle in case the layer `shape` is `"equirectangular"`.
+- `lowerVerticalAngle`: Property to configure the lower verical angle in case the layer `shape` is `"equirectangular"`.
+- `chromaticAberrationCorrection`: Property to configure whether chromatic abberration should be corrected by the layer.
+- `quality`: Property to configure for what type of content the layer should be optimized (`"default"`, `"text-optimized"`, `"graphics-optimized"`).
+
+The component also accepts properties for changing the scale, position, rotation, and more.
+
 ## Pointer
 
 The core interaction concept is based on (touch/grab/ray) pointers.

docs/getting-started/introduction.md

@@ -52,6 +52,8 @@ export function App() {
 - ✴ [Origin](../tutorials/origin.md)
 - 🪄 [Teleport](../tutorials/teleport.md)
 - 🕹️ [Gamepad](../tutorials/gamepad.md)
+- ➕ [Secondary Input Sources](../tutorials/secondary-input-sources.md)
+- 📺 [Layers](../tutorials/layers.md)
 - 🎮 [Custom Controller/Hands/...](../tutorials/custom-inputs.md)
 - ⚓️ [Anchors](../tutorials/anchors.md)
 - 📱 [Dom Overlay](../tutorials/dom-overlay.md)

docs/getting-started/introduction.pdf

@@ -1,7 +1,7 @@
 ---
 title: from Natuerlich
 description: Migrate your application from natuerlich
-nav: 22
+nav: 24
 ---
 
 @react-three/xr is inspired by natuerlich, and therefore, many things are similar, especially the way interactions are handled. However, a few things have been changed and renamed.

docs/migration/from-natuerlich.md

@@ -1,7 +1,7 @@
 ---
 title: from @react-three/xr v5
 description: Migrate your application from @react-three/xr v5
-nav: 21
+nav: 23
 ---
 
 The goal of @react-three/xr v6 is to align this library closer to the react-three ecosystem. We, therefore, focussed on supporting the react-three/fiber event handlers. Another focus of v6 is to reduce boilerplate and provide more defaults while also giving developers more access to the lower-level WebXR primitives. In combination, these changes allow developers to build XR experiences that interoperate with the whole react-three ecosystem using only a few lines of code. 

docs/migration/from-react-three-xr-5.md

@@ -1,7 +1,7 @@
 ---
 title: Anchors
 description: How to create and manage anchors in your AR experience?
-nav: 15
+nav: 17
 ---
 
 Anchors allow to anchor virtual objects into the physical world in AR experiences. `react-three/xr` offers a multitude of ways to create and manage anchors. A simple solution is `useXRAnchor`, which works similarly to `useState` as it returns the current anchor and a function to request a new anchor as a tuple.

docs/tutorials/anchors.md

@@ -1,7 +1,7 @@
 ---
 title: Custom Hands/Controllers/...
 description: Customize interactions and style of inputs such as hands, controllers, and more
-nav: 14
+nav: 16
 ---
 
 @react-three/xr provides a set of default hands, controllers, transient pointers, gazes, and screen input that can be configured and completely exchanged with your own implementation. The following example shows how to configure the ray color of the ray pointer in the users hand.