Example Applications#

Note

Complete example source code, setup instructions, and detailed documentation are provided as part of the CloudXR.js Early Access Program artifacts on NGC. Refer to the CloudXR.js User Guide to join the program.

CloudXR.js includes example applications that demonstrate different approaches to building web clients for CloudXR streaming. These examples showcase the integration of CloudXR.js with modern web technologies and provide working reference implementations.

Available Examples#

Simple WebGL Example:

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

Features:

  • Vanilla WebGL2 and TypeScript

  • Basic CloudXR.js integration patterns

  • WebXR session management

  • Render loop implementation

React Three Fiber Example:

A comprehensive example 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.

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#

  • Sample Code Repository: NVIDIA/cloudxr-js-samples (coming soon)

  • API Documentation: TypeDoc-generated documentation included with the Early Access Program artifacts

For detailed setup instructions, code walkthroughs, and integration guides, refer to the documentation included in the Early Access Program artifacts on NGC.

On this page