WebXRWebXR with Needle Engine

WebXR made easy. Build immersive AR and VR experiences that work everywhere – from Meta Quest to Apple Vision Pro, Android to iOS, and everything in between. No app stores, no installation, no SDKs. Just pure web technology.

Try it now

Experience WebXR in action: View XR Samples

Why Choose Needle Engine for XR

True Cross-Platform Support Needle Engine supports the full WebXR specification, including both AR and VR. Your experiences work on:

  • MetaVR Headsets: Meta Quest, Apple Vision Pro, Pico, HTC Vive, Valve Index, and more
  • AndroidMobile AR: Android devices with Chrome/Firefox
  • AppleiOS AR: Native WebXR via App Clips - a unique Needle Engine advantage
  • Emerging Tech: Looking Glass displays, Hololens, Magic Leap, and future devices

Instant Deployment No app stores, no installation, no waiting for approval. Share your XR experiences with a simple URL or QR code. Users can jump into AR/VR in seconds.

Future-Proof When a new XR device comes out that supports WebXR, your apps work automatically. This is the power of building with web standards – compatibility is not limited to a specific set of devices or SDKs.

Component-Based Simplicity Add immersive XR capabilities to any scene with a single component. No complex setup, no boilerplate code. It just works.

Quickstart: Enable XR in 2 Minutes

Adding AR or VR support to your Needle Engine scene is incredibly simple:

1. Add the WebXR Component

You can add it visually using the Unity Integration or Blender addon, or with just a few lines of code:

import { onStart, WebXR } from "@needle-tools/engine";

onStart(context => {
  context.scene.addComponent(WebXR);
});

2. Deploy and Test

Deploy your scene to any HTTPS URL and open it on an XR device. That's it!

Learn More

Platform Support

AppleiOS: Full WebXR Support Now Available

Native iOS WebXR via App Clips 🎉

Needle Engine provides full WebXR support on iPhone and iPad through App Clip technology – a unique advantage that sets Needle Engine apart. Users can experience your WebXR AR content instantly via QR codes, links, or smart app banners without installing an app.

Features:

  • Full WebXR session management powered by ARKit
  • Hit testing and plane detection
  • DOM overlays for UI elements
  • Image tracking
  • Anchor creation and tracking (work in progress)
  • Lighting estimation (work in progress)

No code changes required – your existing Needle Engine WebXR scenes work automatically on iOS. Simply enable the WebXR component with the createARButton option and deploy to an HTTPS URL.

Try it now • Read full iOS WebXR docs

Alternative: Everywhere Actions

For USDZ/QuickLook-based iOS AR experiences, see Everywhere Actions. This approach uses Apple's native 3D format and supports a subset of functionality including spatial audio, animations, and interactions.

Supported Devices & Browsers

The following devices and browsers have been verified to work with Needle Engine. When new devices with WebXR support are released, they will work with your apps out of the box.

Mobile Devices

DeviceBrowserFeatures
AndroidAndroid 10+✔️ ChromeFull WebXR AR support
AndroidAndroid 10+✔️ FirefoxFull WebXR AR support
AppleiOS 14+✔️ Safari
✔️ Chrome		Full WebXR via App Clip technology (ARKit-powered). Alternative: Everywhere Actions for USDZ/QuickLook
AppleiOS 15+✔️ WebXR ViewerOlder browser option (somewhat dated)
MicrosoftHololens 2✔️ Edgehand tracking
MicrosoftHololens 1❌no WebXR support
Magic LeapMagic Leap 2✔️

VR Headsets

DeviceBrowserFeatures
AppleApple Vision Pro✔️ Safarihand tracking, transient pointer support
MetaMeta Quest 3✔️ Meta Browserhand tracking, sessiongranted1, passthrough, depth sensing, mesh tracking
MetaMeta Quest 3S✔️ Meta Browserhand tracking, sessiongranted1, passthrough, depth sensing, mesh tracking
MetaMeta Quest 2✔️ Meta Browserhand tracking, sessiongranted1, passthrough (black and white)
MetaMeta Quest Pro✔️ Meta Browserhand tracking, sessiongranted1, passthrough
MetaMeta Quest 1✔️ Meta Browserhand tracking, sessiongranted1
PicoPico Neo 4✔️ Pico Browserpassthrough, hand tracking2
PicoPico Neo 3✔️ Pico Browserbasic support (no hand tracking, inverted controller thumbsticks)
MetaOculus Rift 1/2✔️ Chrome
Valve Index✔️ Chrome
HTC Vive✔️ Chrome
MicrosoftHololens 2✔️ Edgehand tracking, AR and VR modes

Other Devices

DeviceBrowserNotes
Looking Glass Holographic Display✔️ Chromerequires Looking Glass bridge and custom code, see our sample
LogitechLogitech MX Ink✔️ Meta Browserofficially supported, see docs

1: Requires enabling browser flag: chrome://flags/#webxr-navigation-permission2: Requires enabling toggle in Developer settings

Live Examples

Experience what's possible with Needle Engine XR. Try these interactive examples on your device:

More Examples:

Real-World Projects:

In Arm's Reach - Immersive mixed reality experience connecting users spatially and emotionally from their city to remote places of nature. This climate awareness project was realized in only 2.5 days and won 5 prizes including the Grand Prize at MIT Reality Hack 2024 - the most prizes for a project in the event's history! — #madewithneedle 💚

Castle Builder - Cross-platform multiplayer sandbox with VR support, voice chat, and synchronized experiences across desktop and VR headsets. — #madebyneedle 💚

Encryption in Space - Collaborative text placement with AR viewing on iOS via USDZ export. — #madewithneedle by Katja Rempel 💚

Core XR Features

AR Settings

When building AR experiences, you'll often need to adjust scale and positioning:

1. Define AR Session Root and Scale Add a WebXR component to your root object and modify the scale property. For AR experiences, you typically want to scale the scene to fit the real world (e.g., a product might be scaled to actual size).

2. Define User Scale Adjust the user scale to shrink (< 1) or enlarge (> 1) the user in relation to the scene when entering AR. This affects how large the virtual environment appears relative to the user.

Controlling Object Visibility

Use the XR Flag component to control whether objects are visible in different contexts:

  • Browser (desktop/mobile 2D view)
  • AR mode
  • VR mode
  • First Person view
  • Third Person view

Common Use Cases:

  • Hide floors when entering AR (real-world floor is visible)
  • Hide avatar head in first-person VR view
  • Show different UI elements in different modes

Image Tracking

Needle Engine supports WebXR Image Tracking on Android and QuickLook Image Tracking on iOS.

Track images in the real world and attach 3D content to them. Perfect for:

  • Product packaging experiences
  • Posters and marketing materials
  • Interactive business cards
  • Museum exhibits

Try the live demo • Read full Image Tracking docs

Advanced Features

Multiplayer & Networking in XR

Add real-time multiplayer support to your XR experiences with Needle Engine's built-in networking:

1. Enable Networking Add a SyncedRoom component to enable multiplayer sessions.

2. Sync Desktop Viewers Add a SyncedCamera component to allow desktop users to watch VR/AR users.

3. Enable Voice Chat Add a VoIP component for spatial voice communication.

Scene Structure

These components can be placed anywhere in your hierarchy. They can all be on the same GameObject, which is a common pattern.

HTML Content Overlays in AR

Display custom HTML UI elements during AR sessions using the dom-overlay feature:

<needle-engine>
    <div class="desktop ar" style="pointer-events:none;">
        <div class="positioning-container">
          <p>Your content for AR and desktop</p>
          <p class="only-in-ar">This only appears in AR</p>
        </div>
    </div>
</needle-engine>

Control visibility with CSS:

.only-in-ar {
  display: none;
}

.ar-session-active .only-in-ar {
  display: initial;
}

Styling Note

The overlay element will always be displayed fullscreen while in XR. To align content differently, create a container inside the AR element.

See live example

Customize AR Exit Button

By default, Needle Engine creates an "X" button in the top-right corner to exit AR. You can customize or hide it:

Custom Button:

<needle-engine>
  <div slot="quit-ar">
    Exit AR
  </div>
</needle-engine>

Hide Button:

<needle-engine>
  <div slot="quit-ar"></div>
</needle-engine>

Tips

Always provide users with a way to exit AR. Use NeedleXRSession.stop() to exit programmatically.

Travelling Between VR Worlds

Needle Engine supports the sessiongranted state, allowing users to seamlessly navigate between WebXR applications without leaving their immersive session.

How to Use: Add the OpenURL component to clickable objects to create links to other XR experiences.

Availability: Currently supported on Meta Quest 1, 2, and 3 in the Meta Browser (requires browser flag: chrome://flags/#webxr-navigation-permission). On other platforms, users will need to re-enter VR on the new page.

Custom Avatars

While Needle Engine doesn't provide out-of-the-box integration with external avatar systems, you can create custom application-specific avatars:

Basic Avatar Setup:

  1. Create an empty GameObject as avatar root
  2. Add an object named Head with an XRFlag set to Third Person
  3. Add objects named HandLeft and HandRight
  4. Add your graphics below these objects

Experimental Components:

There are several experimental components for more expressive avatars. These are subject to change, so we recommend duplicating them for your own use:

  • PlayerColor - Randomized synchronized player colors
  • AvatarEyeLook_Rotation - Eyes follow other avatars (synchronized)
  • AvatarBlink_Simple - Periodic eye blinking animation
  • OffsetConstraint - Position constraints for body parts
  • BasicIKConstraint - Simple IK for arms and legs

Avatar ExampleExample Avatar Rig with basic neck model and limb constraints

Next Steps

Learn More:

iOS AR Options:

Get Inspired: