Add latency drop down

Author: gareth-morgan-nv

deps/cloudxr/webxr_client/helpers/react/CloudXRComponent.tsx

@@ -230,6 +230,8 @@ export default function CloudXRComponent({
             referenceSpace = referenceSpace.getOffsetReferenceSpace(offsetTransform);
           }
 
+          const lowLatency = config.networkLatencyMode === 'LOW';
+
           // Fill in CloudXR session options.
           const cloudXROptions: CloudXR.SessionOptions = {
             serverAddress: connectionConfig.serverIP,
@@ -244,7 +246,13 @@ export default function CloudXRComponent({
             gl: gl,
             referenceSpace: referenceSpace,
             deviceFrameRate: config.deviceFrameRate,
-            maxStreamingBitrateKbps: config.maxStreamingBitrateMbps * 1000, // Convert Mbps to Kbps
+            networkLatencyMode: lowLatency
+              ? CloudXR.NetworkLatencyMode.Low
+              : CloudXR.NetworkLatencyMode.Default,
+            // LOW preset sets bitrate, DRC, and tracking uplink in SessionImpl; do not override.
+            ...(lowLatency
+              ? {}
+              : { maxStreamingBitrateKbps: config.maxStreamingBitrateMbps * 1000 }),
             enablePoseSmoothing: config.enablePoseSmoothing,
             posePredictionFactor: config.posePredictionFactor,
             enableTexSubImage2D: config.enableTexSubImage2D,

deps/cloudxr/webxr_client/helpers/utils.ts

@@ -146,6 +146,9 @@ export interface CloudXRConfig {
   /** Maximum streaming bitrate in Megabits per second (Mbps) */
   maxStreamingBitrateMbps: number;
 
+  /** CloudXR network latency preset (`LOW` caps bitrate and throttles tracking uplink for congested links). */
+  networkLatencyMode?: 'DEFAULT' | 'LOW';
+
   /** Preferred video codec used for streaming */
   codec?: 'h264' | 'h265' | 'av1';
 

deps/cloudxr/webxr_client/src/CloudXR2DUI.tsx

@@ -86,6 +86,8 @@ export class CloudXR2DUI {
   private immersiveSelect!: HTMLSelectElement;
   /** Dropdown to select device frame rate (FPS) */
   private deviceFrameRateSelect!: HTMLSelectElement;
+  /** Dropdown for CloudXR networkLatencyMode preset */
+  private networkLatencyModeSelect!: HTMLSelectElement;
   /** Dropdown to select max streaming bitrate (Mbps) */
   private maxStreamingBitrateMbpsSelect!: HTMLSelectElement;
   /** Dropdown to select preferred streaming codec */
@@ -213,6 +215,7 @@ export class CloudXR2DUI {
       // Set initial display value
       this.posePredictionFactorValue.textContent = this.posePredictionFactorInput.value;
       this.updateConfiguration();
+      this.updateNetworkLatencyModeUi();
       this.updateDeviceProfileWarning(resolveDeviceProfileId(this.deviceProfileSelect.value));
       this.updateConnectButtonState();
       this.initialized = true;
@@ -361,6 +364,7 @@ export class CloudXR2DUI {
     this.proxyUrlInput = this.getElement<HTMLInputElement>('proxyUrl');
     this.immersiveSelect = this.getElement<HTMLSelectElement>('immersive');
     this.deviceFrameRateSelect = this.getElement<HTMLSelectElement>('deviceFrameRate');
+    this.networkLatencyModeSelect = this.getElement<HTMLSelectElement>('networkLatencyMode');
     this.maxStreamingBitrateMbpsSelect =
       this.getElement<HTMLSelectElement>('maxStreamingBitrateMbps');
     this.codecSelect = this.getElement<HTMLSelectElement>('codec');
@@ -444,6 +448,7 @@ export class CloudXR2DUI {
       reprojectionGridRows: 0,
       deviceFrameRate: 90,
       maxStreamingBitrateMbps: 150,
+      networkLatencyMode: 'DEFAULT',
       codec: 'av1',
       immersiveMode: 'ar',
       deviceProfileId: 'custom',
@@ -477,6 +482,7 @@ export class CloudXR2DUI {
     enableLocalStorage(this.reprojectionGridRowsInput, 'reprojectionGridRows');
     enableLocalStorage(this.proxyUrlInput, 'proxyUrl');
     enableLocalStorage(this.deviceFrameRateSelect, 'deviceFrameRate');
+    enableLocalStorage(this.networkLatencyModeSelect, 'networkLatencyMode');
     enableLocalStorage(this.maxStreamingBitrateMbpsSelect, 'maxStreamingBitrateMbps');
     enableLocalStorage(this.codecSelect, 'codec');
     enableLocalStorage(this.enablePoseSmoothingSelect, 'enablePoseSmoothing');
@@ -563,6 +569,10 @@ export class CloudXR2DUI {
     addListener(this.reprojectionGridRowsInput, 'keyup', updateGridValidation);
     this.updateGridValidationMessage();
     addListener(this.deviceFrameRateSelect, 'change', onProfileLinkedChange);
+    addListener(this.networkLatencyModeSelect, 'change', () => {
+      this.updateNetworkLatencyModeUi();
+      onProfileLinkedChange();
+    });
     addListener(this.maxStreamingBitrateMbpsSelect, 'change', onProfileLinkedChange);
     addListener(this.codecSelect, 'change', onProfileLinkedChange);
     addListener(this.enablePoseSmoothingSelect, 'change', onProfileLinkedChange);
@@ -745,6 +755,7 @@ export class CloudXR2DUI {
       maxStreamingBitrateMbps:
         parseInt(this.maxStreamingBitrateMbpsSelect.value) ||
         this.getDefaultConfiguration().maxStreamingBitrateMbps,
+      networkLatencyMode: this.networkLatencyModeSelect.value === 'LOW' ? 'LOW' : 'DEFAULT',
       codec:
         (this.codecSelect.value as 'h264' | 'h265' | 'av1') || this.getDefaultConfiguration().codec,
       // Headless mode turns off the client's CloudXR frame blit but keeps tracking; the WebXR
@@ -870,6 +881,7 @@ export class CloudXR2DUI {
       localStorage.setItem('reprojectionGridCols', this.reprojectionGridColsInput.value);
       localStorage.setItem('reprojectionGridRows', this.reprojectionGridRowsInput.value);
       localStorage.setItem('deviceFrameRate', this.deviceFrameRateSelect.value);
+      localStorage.setItem('networkLatencyMode', this.networkLatencyModeSelect.value);
       localStorage.setItem('maxStreamingBitrateMbps', this.maxStreamingBitrateMbpsSelect.value);
       localStorage.setItem('codec', this.codecSelect.value);
       localStorage.setItem('enablePoseSmoothing', this.enablePoseSmoothingSelect.value);
@@ -881,6 +893,17 @@ export class CloudXR2DUI {
     }
   }
 
+  private updateNetworkLatencyModeUi(): void {
+    const low = this.networkLatencyModeSelect.value === 'LOW';
+    this.maxStreamingBitrateMbpsSelect.disabled = low;
+    const help = document.getElementById('networkLatencyModeHelp');
+    if (help) {
+      help.textContent = low
+        ? 'Low mode sets ~15 Mbit/s max bitrate, Ragnarok DRC, ~30 Hz pose/controller uplink, and disables hand/body bulk. Settings below do not apply.'
+        : 'Default: full-rate tracking (including hands/body), Ragnarok ALL adaptive streaming. Set max Mbps below.';
+    }
+  }
+
   private updateDeviceProfileWarning(profileId: DeviceProfileId): void {
     if (!this.deviceProfileWarning) return;
     const profile = getDeviceProfile(profileId);

deps/cloudxr/webxr_client/src/index.html

@@ -723,6 +723,17 @@ <h3 class="debug-title">Debug Settings</h3>
                     </div>
                 </div>
 
+                <div class="config-section">
+                    <label for="networkLatencyMode" class="input-label">Network Latency Mode</label>
+                    <select id="networkLatencyMode" class="ui-input config-input">
+                        <option value="DEFAULT" selected>Default (high quality)</option>
+                        <option value="LOW">Low (congested Wi‑Fi)</option>
+                    </select>
+                    <div id="networkLatencyModeHelp" class="config-text">
+                        Default: full-rate tracking and Mbps below. Low: applies ~15 Mbit/s, Ragnarok DRC, and throttled pose/controller uplink (ignores Mbps).
+                    </div>
+                </div>
+
                 <div class="config-section">
                     <label class="input-label">Maximum Streaming Bitrate</label>
                     <label for="maxStreamingBitrateMbps" class="input-label">Megabits per second</label>