# 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

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

3. Build the Application

       npm run build

4. Start Development Server

       npm run dev-server

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

## 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