Simple WebGL Sample Workflow#

This sample workflow documents the end-to-end process for the CloudXR.js Simple WebGL sample: a minimal implementation showing CloudXR.js integration with vanilla WebGL and TypeScript (~200 lines of code, no framework dependencies).

Prerequisites#

  • CloudXR Runtime server is running with auto-webrtc device profile.

  • Node.js v20 or later (for local development) or Docker (for containerized setup).

  • CloudXR.js package tarball from NGC (initial distribution model).

Option A: Docker (Quick Start)#

Build and run the sample in a container with no local toolchain required:

# Build the Docker image
docker build -t cloudxr-js-sample --build-arg EXAMPLE_NAME=simple .

# Run the container
docker run -d --name cloudxr-js-sample -p 8080:80 -p 8443:443 cloudxr-js-sample

Open http://localhost:8080 (HTTP) or https://localhost:8443 (HTTPS) in your browser.

Note

When using HTTPS, accept the self-signed certificate warning in your browser.

To stop and remove the container:

docker stop cloudxr-js-sample && docker rm cloudxr-js-sample

Option B: Local Development#

  1. Clone the samples repository and navigate to the sample directory:

    git clone https://github.com/NVIDIA/cloudxr-js-samples.git
cd cloudxr-js-samples/simple

  2. Install CloudXR.js from the downloaded tarball:

    npm install </path/to/nvidia-cloudxr-<version>.tgz>

  3. Install the remaining dependencies:

    npm install

  4. Build the sample:

    npm run build

  5. Start the web server:

    • HTTP (local development):

      npm run dev-server

    • HTTPS (device testing / production-like):

      npm run dev-server:https

Basic Usage#

  1. Configure Connection: Enter your CloudXR server IP address (default: localhost), set the port (default: 49100), and select AR or VR mode.

  2. Adjust Settings (optional): Configure per-eye resolution (perEyeWidth must be a multiple of 16 and perEyeHeight must be a multiple of 64), target frame rate (72, 90, or 120 FPS), streaming bitrate, and XR reference space.

  3. Start Streaming: Click CONNECT and grant XR permissions when prompted.

Tip

For the fastest way to get a server running, try the LÖVR sample: a lightweight VR framework ideal for testing your CloudXR.js client setup. For setup commands, see Quick Start Guide and End-to-End Example.

Validation Flow#

  1. Validate from desktop browser first (IWER automatically loads for WebXR emulation).

  2. Validate from headset after browser/device setup in Client Setup Guide.

  3. For HTTPS mode, configure WSS proxy in WebSocket Proxy Setup.

Troubleshooting#