📄️ Anchors
natuerlich supports WebXR Anchors Module with the useAnchor and usePersistedAnchor hooks. Both hooks return a tuple containing the anchor and a createAnchor function. If no anchor is present, the returned anchor is undefined. A new anchor is created once the createAnchor function is called. If the process is successful, the returned anchor will contain an XRAnchor.
📄️ Configuration
The XRCanvas and also the manual XR component allow to configure the foveation, frameRate, referenceSpace, and frameBufferScaling.
📄️ Custom Hands and Controllers
When building a custom hand or controller, we recommend looking at the existing default hands and controllers and modifying them to your needs. In some cases, a completely new interaction type, such as a WhipController, which selects objects with a physical-based whip-pointer, could be required. In such a case, an in-depth understanding of the xinteraction event system should be present.
📄️ Guards
Guards allow to conditionally display or include content based on the session mode or whether the object is facing the camera of the user. For instance, the SessionModeGuard guard allows only displaying a background when the session is not an AR session. The SessionModeGuard can receive either a list of allow session modes or a list of deny session modes.
📄️ Head Up Display
Placing content in front of the user's camera in an XR session can be achieved using the cameraContent property of the ImmersiveSessionOrigin. This content will be placed at the position of the user's head.
📄️ Input Sources
The Hands and Controllers components are easy to use but offer only few customizations. Instead, developers can use the GrabHand, TouchHand, Pointerhand, GrabController, PointerController, TeleportHand, and TeleportController and the useInputSources hook for more control over each hand/controller. Each inputSource represents one hand or controller. Developers can map each inputSource to a custom hand or controller implementation. If you application requires custom hands/controllers components, please read the custom input sources documentation.
📄️ Interaction with @coconut-xr/koestlich
Creating a koestlich UI
📄️ Layers
WebXR Layers allow rendering content in a specific shape (e.g., plane or cylinder) more efficiently and at a higher resolution. natuerlich provides several components that simplify the use of layers. Furthermore, when the layers feature is unavailable, natuerlich falls back to normal three.js shapes.
📄️ Interaction with Objects
Interactions in natuerlich work through properties, such as onClick. The interaction is based on @coconut-xr/xinteraction. For a more in-depth explanation of the event system and its features, visit the xinteraction documentation.
📄️ Tracked Planes
natuerlich supports WebXR Plane Detection Module in the form of TrackedPlanes. The useTrackedPlanes hook allows to retrieve all detected planes. The TrackedPlane component takes a single plane and renders the geometry retrieved from the plane. The material of the TrackedPlane can be customized using R3F, and further content can be placed as its children.
📄️ Tracked Meshes
natuerlich supports WebXR Mesh Detection Module in the form of TrackedMeshs. The useTrackedMeshes hook allows to retrieve all detected meshes. The TrackedMesh component takes a single mesh and renders the geometry retrieved from the mesh. The material of the TrackedMesh can be customized using R3F, and further content can be placed as its children.
📄️ Tracked Images
The WebXR Image Tracking feature allows tracking images in Augmented Reality. Tracking images in AR requires the image to be present, including its expected width in meters. The image must be submitted as an ImageBitmap when starting the WebXR session. natuerlich provides the TrackedImage component to display content at the place where WebXR found the tracked image. The TrackedImage component takes the same bitmap provided for the start of the session as the image parameter.
📄️ Poses
Our implementation is based on handy-work
📄️ Teleport
A basic form of teleportation can be easily implemented by changing the position attribute of ImmersiveSessionOrigin. However, selecting where to teleport can be tricky when the interaction should have a downward bend ray originating from the controller/hand. Therefore, natuerlich provides the Hands and Controller compoents with type="teleport" that implement a downward bend ray interaction and a cursor visualization. The TeleportTarget component is used to mark objects as teleportable.
📄️ useXR Hook
The useXR hook allows to retrieve the current XR state, including the mode (immersive-vr, immersive-ar, inline, or none), the session, the inputSources, the active layers, the trackedImages, and the trackedPlanes.