Build WebXR Client#

Tip

A prebuilt CloudXR web client is available at https://nvidia.github.io/IsaacTeleop/client/main/. You only need to build from source if you want to customize the client.

The Isaac Teleop WebXR client is built with React, Three.js, and WebXR. It streams VR/AR content from a CloudXR Runtime server to the browser. For more details about CloudXR.js SDK and its advanced features, see the CloudXR.js documentation.

The source is located at deps/cloudxr/webxr_client/.

Prerequisites#

  • Node.js (v20 or higher)

1. Download CloudXR.js SDK#

From the project root:

source deps/cloudxr/webxr_client/scripts/setup_cloudxr_env.sh
deps/cloudxr/webxr_client/scripts/download_cloudxr_sdk.sh

This will automatically download the CloudXR.js SDK and place it in deps/cloudxr/nvidia-cloudxr-6.1.0.tgz. The package.json is configured to install the SDK from this local file.

2. Install dependencies#

From the deps/cloudxr/webxr_client/ directory:

npm install ../nvidia-cloudxr-6.1.0.tgz

3. Build & Run#

Production build#

From deps/cloudxr/webxr_client/:

npm run build

Output in build/:

  • index.html — entry page

  • bundle.js — main application (UIKit, MSDF text, icons; loaded on first paint)

  • bundle.emulator.js — desktop XR / IWER stack (DevUI, synthetic environments, and related deps); loaded only when emulation is used

Development build (one-shot)#

Outputs to ./build/ with source maps for debugging:

npm run dev

Development server (with hot reload)#

Starts a webpack dev server on http://localhost:8080 with hot module replacement:

npm run dev-server

For HTTPS (required by WebXR on most browsers):

npm run dev-server:https

This starts the dev server with a self-signed certificate on https://localhost:8080. You can follow the same instructions to use the WebXR client as documented in the Quick Start Guide.