WebXR with Needle Engine

Build immersive VR and AR experiences that work on Meta Quest, Apple Vision Pro, Android AR, and iOS - no app stores, no installation required.

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.

:::tip 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:

• VR Headsets: Meta Quest, Apple Vision Pro, Pico, HTC Vive, Valve Index, and more

• Mobile AR: Android devices with Chrome/Firefox

• iOS 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!

:::tip Learn More

• XR Event Methods - Event methods and lifecycle

• NeedleXRSession API - Advanced session control

• WebXR Component API - Full component reference :::

Platform Support

iOS: 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

Device	Browser	Features
Android 10+	✔️ Chrome	Full WebXR AR support
Android 10+	✔️ Firefox	Full WebXR AR support
iOS 14+	✔️ Safari ✔️ Chrome	Full WebXR via App Clip technology (ARKit-powered). Alternative: Everywhere Actions for USDZ/QuickLook
iOS 15+	✔️ WebXR Viewer	Older browser option (somewhat dated)
Hololens 2	✔️ Edge	hand tracking
Hololens 1	❌	no WebXR support
Magic Leap 2	✔️

VR Headsets

Device	Browser	Features
Apple Vision Pro	✔️ Safari	hand tracking, transient pointer support
Meta Quest 3	✔️ Meta Browser	hand tracking, sessiongranted1, passthrough, depth sensing, mesh tracking
Meta Quest 3S	✔️ Meta Browser	hand tracking, sessiongranted1, passthrough, depth sensing, mesh tracking
Meta Quest 2	✔️ Meta Browser	hand tracking, sessiongranted1, passthrough (black and white)
Meta Quest Pro	✔️ Meta Browser	hand tracking, sessiongranted1, passthrough
Meta Quest 1	✔️ Meta Browser	hand tracking, sessiongranted1
Pico Neo 4	✔️ Pico Browser	passthrough, hand tracking2
Pico Neo 3	✔️ Pico Browser	basic support (no hand tracking, inverted controller thumbsticks)
Oculus Rift 1/2	✔️ Chrome
Valve Index	✔️ Chrome
HTC Vive	✔️ Chrome
Hololens 2	✔️ Edge	hand tracking, AR and VR modes

Other Devices

Device	Browser	Notes
Looking Glass Holographic Display	✔️ Chrome	requires Looking Glass bridge and custom code, see our sample
Logitech MX Ink	✔️ Meta Browser	officially supported, see docs

¹: Requires enabling browser flag: chrome://flags/#webxr-navigation-permission ²: 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:

• Image Tracking Demo - WebXR on Android, QuickLook on iOS

• Musical Instrument - Spatial audio, animation, interactions

• AR Overlay UI - HTML content in AR

• Browse all XR samples

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.

:::tip 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;
}

:::tip 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>

:::tip 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

Example Avatar Rig with basic neck model and limb constraints

Next Steps

Learn More:

• XR Event Methods - Event methods and lifecycle hooks

• WebXR Component API - Complete component documentation

• NeedleXRSession API - Advanced session control

• Image Tracking Guide - Detailed image tracking documentation

iOS AR Options:

• iOS WebXR App Clip - Native WebXR support for iPhone and iPad

• Everywhere Actions - USDZ/QuickLook-based interactive AR

Get Inspired:

• Browse XR Samples - Interactive examples

• Community Projects - Projects from the Needle community