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 or 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, refer to 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 or device setup in Client Setup Guide.

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

Troubleshooting#