Skip to content

Exploring Natuerlich: A Revolutionary Interaction Library for the Spatial Web

Posted on:August 21, 2023

Natuerlich is German for Naturally!

Building interactions for the immersive web creates many challenges but thankfully Natuerlich, the latest library from Coconut XR, lets you get going a lot easier! If you’re comfortable with React, you will be able to dive right into using this library and create amazing websites that can take advantage of hand-pose interactions, HUDs, image tracking and more.

Fish position is controlled with hand gestures. I plugged my web Aquarium project into Natuerlich! Read about the web Aquarium project here

All interactions built with Natuerlich can work with hands, controllers, mouse and touch controls.

This is a webpage! Displaying the current and previously detected pose using Koestlich, another helpful library for text by Coconut XR. Image credit: coconut-xr

Using detected pose to change the fish position. Tested on a Quest Pro courtesy of Bela Bohlender

Core Features of the Natuerlich Library

  1. Anchors

    • Spatial anchors using WebXR anchors.
  2. Tracked Planes

    • Tracked room planes using WebXR planes.
  3. Tracked Images

    • Image marker tracking using WebXR Image Tracking.
  4. Teleport

    • Building a teleport interaction.
  5. Poses

    • Detecting and generating hand poses.
  6. Layers

    • High-quality content using WebXR layers.
  7. Head Up Display

    • Placing content in front of the user’s camera.
  8. Custom Input Sources

    • Building custom interactive hands and controllers.
  9. Guards

    • Conditional rendering using guards.
  10. Use XR

    • Accessing the raw XR state.
  11. Configuration

    • Configurating foveation, frameRate, referenceSpace, and frameBufferScaling.

Check out the docs to get started

Join the discord here

With the right hardware and browser, you can place the aquarium below from my post on building 3d web Aquariums in your space by touching the sprout emoji 🌱 in the corner.