CloudXR.js Simple Example

A minimal WebGL example demonstrating WebXR streaming from a CloudXR server to a web browser. This example shows how to integrate WebXR with CloudXR to stream immersive VR/AR content.

Note: This example is for learning purposes, not production use.

Quick Start

Prerequisites

• Node.js (v20 or higher)

Installation

1. Navigate to the example folder

   cd simple
   Copy

2. Install Dependencies

   # For this early access release, please run the following to install SDK from the given tarball. This step will not be needed when SDK is publicly accessible.
   npm install ../nvidia-cloudxr-6.0.0-beta.tgz
   
   npm install
   Copy

3. Build the Application

   npm run build
   Copy

4. Start Development Server

   npm run dev-server
   Copy

5. Open in Browser

   • Navigate to http://localhost:8080 (or the port shown in terminal)
   • For desktop browsers, IWER (Immersive Web Emulator Runtime) will automatically load to emulate a Meta Quest 3 headset

Basic Usage

1. Configure Connection

   • Enter CloudXR server IP address (default: localhost)
   • Set port (default: 49100)
   • Select AR or VR mode

2. Adjust Settings (Optional)

   • Per-eye resolution (must be multiples of 16)
   • Target frame rate (72, 90, or 120 FPS)
   • Streaming bitrate
   • XR reference space and camera offsets

3. Start Streaming

   • Click "CONNECT"
   • Grant XR permissions when prompted

Requirements:

• CloudXR server running and accessible
• WebXR-compatible device (VR/AR headset) or desktop browser (IWER loads automatically for emulation)

Architecture

CloudXRClient Class

The main application class (CloudXRClient in main.ts) handles:

Initialization:

• UI element management and localStorage persistence
• Browser capability checks (WebXR, WebGL2, WebRTC)
• Event listener setup

Connection Flow:

1. WebGL Setup - Creates high-performance WebGL2 context
2. WebXR Session - Enters immersive VR/AR mode
3. Reference Space - Configures coordinate system for tracking
4. CloudXR Session - Establishes streaming connection to server
5. Render Loop - Sends tracking data, receives video, renders frames

Key Components:

• WebXR Session - Hardware access (headset, controllers)
• WebGL Context - Video rendering
• CloudXR Session - Streaming management (WebRTC-based)
• XRWebGLLayer - Bridge between WebXR and WebGL

Project Structure

simple/
├── src/
│   └── main.ts          # Main application sample
├── index.html           # UI and form elements sample
├── package.json         # Dependencies and scripts
├── webpack.common.js    # Webpack base configuration sample
├── webpack.dev.js       # Development configuration sample
├── webpack.prod.js      # Production configuration sample
└── tsconfig.json        # TypeScript configuration sample
Copy

Code Overview

The main.ts file contains well-commented code explaining each step:

1. Browser Checks - Validates WebXR, WebGL2, and WebRTC support
2. Connection Setup - Reads form inputs and validates configuration
3. WebGL Initialization - Creates optimized rendering context
4. WebXR Session - Enters immersive mode with requested features
5. CloudXR Setup - Configures streaming session with event handlers
6. Render Loop - Runs 72-120 times per second:
   • Sends tracking data to server
   • Receives video frame
   • Renders to display

Each method includes inline comments explaining the purpose and key concepts.

License

See the LICENSE file for details.

Next Steps

Experience one of the compatible OpenXR applications with CloudXR Runtime

• Isaac Lab Teleoperation