英伟达分享：使用NVIDIA CloudXR.js构建并串流Web XR体验
使用NVIDIA CloudXR.js构建并串流Web XR体验
（映维网Nweon 2026年04月01日）向企业用户提供高保真度的VR和AR体验，传统上需要原生应用开发、定制设备管理和复杂的部署流程。现在，借助全新的JavaScript SDK——NVIDIA CloudXR.js，开发者可以直接将GPU渲染的沉浸式内容串流到标准网络浏览器，而这一切均无需应用商店、无需安装、无需针对特定设备的构建。
NVIDIA CloudXR.js将NVIDIA RTX远程渲染的全部能力带到了Web平台。这从根本上改变了沉浸式应用的构建和交付方式。NVIDIA CloudXR.js将企业XR的访问范围从原生开发工作流扩展到了广大的Web开发者社区。
在NVIDIA Omniverse中构建数字孪生、机器人远程操作系统或交互式3D培训环境的开发者，现在可以通过一个URL邀请用户通过XR头显访问他们的应用。
下面，英伟达将介绍所述SDK的架构、核心API，以及如何将其接到诸如Omniverse、NVIDIA Isaac Lab和LÖVR等服务器应用程序。
1. 如何运行和托管NVIDIA CloudXR.js客户端
本节介绍如何运行和托管NVIDIA CloudXR.js Web客户端，包括前提条件和架构概述。
1.1 前提条件
要运行和托管基于CloudXR.js的Web客户端，你需要一台安装了Node.js v20或更高版本，以及npm的计算机。你可以查看NVIDIA CloudXR.js示例客户端，无需构建Web客户端即可进行试用。当然，你依然需要一个运行CloudXR Runtime的NVIDIA CloudXR服务器和一个兼容OpenXR的应用程序。前提条件包括：
客户端
服务器端
一台配备NVIDIA GPU并运行最新版NVIDIA CloudXR Runtime的服务器
兼容OpenXR的服务器应用程序，如Omniverse、Isaac Lab或LÖVR
强烈建议使用延迟低于20毫秒、带宽高于100 Mbps的WiFi 6或6E网络
1.2 CloudXR.js 架构
CloudXR.js采用双层连接模型，Web应用程序托管与XR串流管道分离（图 1）。
客户端Web服务器： 一个标准的Node.js开发服务器（或任何静态托管解决方案）通过HTTP或HTTPS向客户端设备提供Web应用程序。
CloudXR Runtime连接： SDK从浏览器到服务器运行的CloudXR Runtime建立WebSocket连接。通道承载基于WebRTC的视频流、姿态追踪数据以及控制器/手势输入。
在服务器端，CloudXR Runtime与任何兼容OpenXR的应用程序配对。它会捕获渲染的立体帧，使用硬件加速的AV1、H.265或H.264对其进行编码，并将其串流到客户端。客户端解码视频，将其合成到WebXR帧缓冲区中，并将追踪数据发送回服务器，以高达每秒120帧的速度完成闭环。
Web应用程序本身跨框架。CloudXR.js可以与原生WebGL、React Three Fiber或任何其他兼容WebXR的库集成。
2. 安装SDK
要将CloudXR.js添加到项目中，请从NVIDIA NGC下载SDK。然后将其导入到你的项目中。
npm install
软件包包含TypeScript类型定义，所以IDE自动补全和类型检查可以直接使用。可以在标准网页执行此操作。
2.2 创建串流会话
整个SDK的核心围绕一个入口点：createSession。导入它，配置连接和渲染参数，并传递可选的委托回调以处理生命周期事件。以下代码片段展示了使用createSession API的核心：
// Basic session creationconst session = createSession({ serverAddress: '192.168.1.100', serverPort: 49100, useSecureConnection: false, perEyeWidth: 2048, perEyeHeight: 1792, // from WebGl API gl: webglContext, // from WebXR API referenceSpace: xrReferenceSpace});// With event delegatesconst session = createSession(sessionOptions, { onStreamStarted: () => { console.info('CloudXR streaming started'); }, onStreamStopped: (error) => { if (error) { console.error('Streaming error:', error); } else { console.info('Streaming stopped normally'); } }});// Connect to CloudXR Runtimeif (session.connect()) { console.info('Connection initiated');}perEyeWidth和perEyeHeight值（必须是16的倍数）定义了每只眼睛视图的分辨率。SDK会自动推导出完整的串流分辨率。
2.3 集成渲染循环
连接后，从你的WebXR渲染循环驱动流传输管道。每帧需要两个调用：将当前追踪状态发送到服务器，然后渲染接收到的帧。
function onXRFrame(time: number, frame: XRFrame) { // Send head pose, controllers, and hand tracking to the server session.sendTrackingStateToServer(time, frame); // Render the streamed frame into the WebXR layer session.render(time, frame, xrSession.renderState.baseLayer); // Continue the loop xrSession.requestAnimationFrame(onXRFrame);}xrSession.requestAnimationFrame(onXRFrame);sendTrackingStateToServer函数会自动捕获并传输控制器按钮按下、触发值、控制器姿态、手势追踪数据（当设备支持时）、以及用户的头部姿态。服务器使用相关数据并从正确的视点以正确的输入状态渲染下一帧。然后，render函数将解码后的视频合成到XR显示器中。
3. 探索示例客户端
CloudXR.js提供了两个示例客户端，展示了不同的集成方法。
3.1 WebGL示例
WebGL示例（simple/）提供了一个最小化的单文件TypeScript实现，可以直接与WebXR和WebGL2 API协同工作。它包含一个连接配置UI、浏览器能力检查和一个简单的渲染循环。这是了解CloudXR.js底层工作原理的最快途径。
3.2 React示例
React示例（react/）展示了一个生产风格的架构，使用了React Three Fiber、React Three XR和React Three UIKit。它具有基于组件的会话管理、双UI系统（用于配置的2D HTML和用于交互的3D VR面板）以及用于防止React Three Fiber和CloudXR之间渲染冲突的WebGL状态追踪。
两个示例都支持通过Docker进行快速测试：
# WebGL sampledocker build -t cloudxr-js-sample --build-arg EXAMPLE_NAME=simple .docker run -d --name cloudxr-js-sample -p 8080:80 -p 8443:443 cloudxr-js-sample# React sampledocker build -t cloudxr-react-sample --build-arg EXAMPLE_NAME=react .docker run -d --name cloudxr-react-sample -p 8080:80 -p 8443:443 cloudxr-react-sample
如需带热重载的本地开发，请安装依赖项并启动开发服务器：
cd simple # or reactnpm install在浏览器中导航到http://localhost:8080。在桌面，沉浸式Web模拟器运行时（IWER）会自动加载以模拟Meta Quest 3，所以你无需实体头显即可进行开发和测试。
4. 接到服务器应用程序
CloudXR.js可与任何与CloudXR Runtime一起运行的兼容OpenXR的应用程序协同工作。以下三个示例展示了你可串流内容的广泛性：NVIDIA Omniverse、NVIDIA Isaac Lab和LÖVR。
4.1 NVIDIA Omniverse
将高保真度的USD数字孪生场景流式传输到XR头显，用于建筑漫游、设计评审和工业培训。Omniverse Kit SDK 109.0.2及更高版本包含一个集成的CloudXR WebRTC运行时，所以串流管道直接内置于平台中。操作员可以使用手势追踪与3D内容进行交互，在流式传输的环境中进行直接操作。
4.2 NVIDIA Isaac Lab
为灵巧机器人构建远程操作工作流。佩戴Quest 2/3/3s或PICO 4 Ultra的操作员可以看到机器人模拟的实时立体渲染，并使用手势追踪来控制机器人。Isaac Lab在带有Docker和NVIDIA Container Toolkit的Linux上运行，支持双GPU配置以获得最佳性能。
4.3 LÖVR
LÖVR是一个轻量级的、开源的基于Lua的VR框架，它为搭建一个可用的服务器提供了简单的路径。使用–webrtc flag启动LÖVR，并连接CloudXR.js客户端。这非常适合快速原型设计和测试你的客户端设置。
5. 配置网络以迈向生产
对于生产部署或HTTPS托管，请设置一个带有TLS终止的WebSocket代理。CloudXR.js包含一个基于Docker的HAProxy配置示例，可以自动处理此问题：
cd proxydocker build -t cloudxr-wss-proxy .docker run -d --name wss-proxy --network host \ -e BACKEND_HOST=localhost \ -e BACKEND_PORT=49100 \ -e PROXY_PORT=48322 \ cloudxr-wss-proxy代理会生成自签名证书，连接到端口49100上的CloudXR Runtime，并监听端口48322上的安全WebSocket连接。对于企业Kubernetes部署，SDK文档包含一个支持多个CloudXR服务器和负载均衡的NGINX Ingress配置。
确保你的防火墙允许TCP端口49100（信令）、UDP端口47998（媒体流）和TCP端口48322（WSS代理，如果使用HTTPS）。
6. 开始使用CloudXR.js
NVIDIA CloudXR.js将企业XR流式传输带到了Web平台——通过URL交付GPU渲染的沉浸式内容，无需原生应用。这个SDK提供了一个简洁、最小化的API，可以与任何兼容WebXR的框架集成，并支持多种服务器应用程序。它包含了生产部署所需的网络和性能工具。
通过为每一位Web开发者提供构建和交付沉浸式体验的工具，免去原生XR开发的繁琐工作，CloudXR.js让全新的应用类别成为可能。
立即下载CloudXR.js并尝试示例客户端。要最快上手一个可用的演示，请从LÖVR示例服务器和WebGL客户端开始。有关完整的API参考、配置指南和部署文档，请访问CloudXR.js SDK文档。
