Sample Applications#

Sample applications are available on GitHub at NVIDIA/cloudxr-js-samples. They demonstrate different approaches to building web clients for CloudXR streaming, and provide working reference implementations.

Available Samples#

Simple WebGL Sample:

A minimal WebGL sample demonstrating WebXR streaming from CloudXR Runtime to a web browser. Shows the fundamental integration between WebXR and CloudXR.js using vanilla WebGL and TypeScript.

Workflow: Simple WebGL Sample Workflow

Features:

  • Vanilla WebGL2 and TypeScript

  • Basic CloudXR.js integration patterns

  • WebXR session management

  • Render loop implementation

React Three Fiber Sample:

A comprehensive sample demonstrating how to integrate CloudXR streaming with modern React development patterns. Showcases the combination of CloudXR.js with React Three Fiber, React Three XR, and React Three UIKit.

Workflow: React Sample Workflow

Features:

  • React Three Fiber and React Three XR integration

  • 3D user interface creation with React Three UIKit

  • Dual UI system (2D HTML + 3D VR)

  • WebGL state management between CloudXR and React Three Fiber

Prerequisites#

Both examples require:

  • Node.js (v20 or higher)

  • CloudXR Runtime running with an OpenXR compatible server application

  • WebXR-compatible device (VR/AR headset) or desktop browser with IWER emulation

Additional Resources#