🔧

Author: wcandillon

README.md

@@ -172,7 +172,7 @@ ctx.canvas.height = ctx.canvas.clientHeight * PixelRatio.get();
 
 ### Frame Scheduling
 
-Frame presentation is automatic, matching the behavior of `GPUCanvasContext` on the Web. A native display link (CADisplayLink on iOS, Choreographer on Android) ticks once per vsync and presents any surface whose texture was acquired during a previous vsync interval, which gives your render code the full frame between two vsyncs to encode and submit. Short `await`s between `getCurrentTexture()` and `device.queue.submit(...)` are safe (microtasks drain before the next vsync); however, if your render code takes longer than one frame to submit, the present will fire before submit and you will see a stale frame.
+Frame presentation is automatic, matching the behavior of `GPUCanvasContext` on the Web. A native display link (CADisplayLink on iOS, Choreographer on Android) ticks once per vsync and presents any surface whose texture was acquired during a previous vsync interval, which gives your render code the full frame between two vsyncs to encode and submit.
 
 ### Canvas Transparency
 

apps/example/src/App.tsx

@@ -36,6 +36,7 @@ import { Reanimated } from "./Reanimated";
 import { AsyncStarvation } from "./Diagnostics/AsyncStarvation";
 import { DeviceLostHang } from "./Diagnostics/DeviceLostHang";
 import { PresentRace } from "./Diagnostics/PresentRace";
+import { MultiCanvasSubmit } from "./Diagnostics/MultiCanvasSubmit";
 import { StorageBufferVertices } from "./StorageBufferVertices";
 
 // The two lines below are needed by three.js
@@ -95,6 +96,10 @@ function App() {
           <Stack.Screen name="AsyncStarvation" component={AsyncStarvation} />
           <Stack.Screen name="DeviceLostHang" component={DeviceLostHang} />
           <Stack.Screen name="PresentRace" component={PresentRace} />
+          <Stack.Screen
+            name="MultiCanvasSubmit"
+            component={MultiCanvasSubmit}
+          />
           <Stack.Screen
             name="StorageBufferVertices"
             component={StorageBufferVertices}

apps/example/src/Diagnostics/MultiCanvasSubmit.tsx

@@ -0,0 +1,158 @@
+import React, { useEffect, useRef } from "react";
+import { StyleSheet, Text, View } from "react-native";
+import type { CanvasRef } from "react-native-wgpu";
+import { Canvas } from "react-native-wgpu";
+
+type Mode = "combined" | "split";
+
+const runPair = (
+  device: GPUDevice,
+  contextA: GPUCanvasContext,
+  contextB: GPUCanvasContext,
+  format: GPUTextureFormat,
+  mode: Mode,
+  shouldStop: () => boolean,
+) => {
+  contextA.configure({ device, format, alphaMode: "premultiplied" });
+  contextB.configure({ device, format, alphaMode: "premultiplied" });
+
+  const frame = () => {
+    if (shouldStop()) {
+      return;
+    }
+
+    const textureA = contextA.getCurrentTexture();
+    const textureB = contextB.getCurrentTexture();
+
+    const time = Date.now() / 1000;
+    const r = (Math.sin(time * 2.0) + 1) / 2;
+    const g = (Math.sin(time * 1.5 + Math.PI / 3) + 1) / 2;
+    const b = (Math.sin(time * 1.0 + Math.PI / 2) + 1) / 2;
+
+    const drawClear = (
+      encoder: GPUCommandEncoder,
+      view: GPUTextureView,
+      color: GPUColor,
+    ) => {
+      const pass = encoder.beginRenderPass({
+        colorAttachments: [
+          {
+            view,
+            clearValue: color,
+            loadOp: "clear",
+            storeOp: "store",
+          },
+        ],
+      });
+      pass.end();
+    };
+
+    if (mode === "combined") {
+      // One encoder, two passes targeting two different surfaces, one
+      // command buffer, one submit. Tracks that beginRenderPass accumulates
+      // every color-attachment surface into the encoder's presentable set.
+      const encoder = device.createCommandEncoder();
+      drawClear(encoder, textureA.createView(), [r, g, b, 1]);
+      drawClear(encoder, textureB.createView(), [1 - r, 1 - g, 1 - b, 1]);
+      device.queue.submit([encoder.finish()]);
+    } else {
+      // Two encoders, two command buffers, one submit. Tracks that
+      // queue.submit aggregates presentable surfaces across every command
+      // buffer in the array.
+      const encoderA = device.createCommandEncoder();
+      drawClear(encoderA, textureA.createView(), [r, g, b, 1]);
+      const encoderB = device.createCommandEncoder();
+      drawClear(encoderB, textureB.createView(), [1 - r, 1 - g, 1 - b, 1]);
+      device.queue.submit([encoderA.finish(), encoderB.finish()]);
+    }
+
+    requestAnimationFrame(frame);
+  };
+
+  frame();
+};
+
+const Pair = ({ mode, label }: { mode: Mode; label: string }) => {
+  const refA = useRef<CanvasRef>(null);
+  const refB = useRef<CanvasRef>(null);
+  useEffect(() => {
+    let stopped = false;
+    (async () => {
+      const adapter = await navigator.gpu.requestAdapter();
+      if (!adapter) {
+        return;
+      }
+      const device = await adapter.requestDevice();
+      const contextA = refA.current?.getContext("webgpu");
+      const contextB = refB.current?.getContext("webgpu");
+      if (!contextA || !contextB) {
+        return;
+      }
+      const format = navigator.gpu.getPreferredCanvasFormat();
+      runPair(device, contextA, contextB, format, mode, () => stopped);
+    })();
+    return () => {
+      stopped = true;
+    };
+  }, [mode]);
+  return (
+    <View style={styles.pair}>
+      <Text style={styles.label}>{label}</Text>
+      <View style={styles.row}>
+        <Canvas ref={refA} style={styles.canvas} />
+        <Canvas ref={refB} style={styles.canvas} />
+      </View>
+    </View>
+  );
+};
+
+export const MultiCanvasSubmit = () => {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.intro}>
+        Each row drives two canvases that render inverted hues from a single
+        submit. If the presentable-surface tracking is broken, one of the two
+        canvases will stop updating (no display-link tick will present it).
+      </Text>
+      <Pair
+        mode="combined"
+        label="One encoder, two passes, one command buffer"
+      />
+      <Pair
+        mode="split"
+        label="Two encoders, two command buffers, one submit"
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#111",
+    padding: 12,
+  },
+  intro: {
+    color: "#f5f5f5",
+    fontSize: 13,
+    lineHeight: 18,
+    marginBottom: 12,
+  },
+  pair: {
+    flex: 1,
+    marginBottom: 12,
+  },
+  label: {
+    color: "#f5f5f5",
+    fontSize: 13,
+    marginBottom: 6,
+  },
+  row: {
+    flex: 1,
+    flexDirection: "row",
+  },
+  canvas: {
+    flex: 1,
+    marginRight: 6,
+  },
+});

apps/example/src/Home.tsx

@@ -127,6 +127,10 @@ export const examples = [
     screen: "PresentRace",
     title: "⚠️ Present Race (await before submit)",
   },
+  {
+    screen: "MultiCanvasSubmit",
+    title: "🖼️ Multi-Canvas Submit Tracking",
+  },
   {
     screen: "StorageBufferVertices",
     title: "💾 Storage Buffer Vertices",

apps/example/src/Route.ts

@@ -29,5 +29,6 @@ export type Routes = {
   AsyncStarvation: undefined;
   DeviceLostHang: undefined;
   PresentRace: undefined;
+  MultiCanvasSubmit: undefined;
   StorageBufferVertices: undefined;
 };

packages/webgpu/cpp/rnwgpu/SurfaceRegistry.h

@@ -41,13 +41,15 @@ class SurfaceInfo {
 
   void reconfigure(int newWidth, int newHeight) {
     std::unique_lock<std::shared_mutex> lock(_mutex);
+    _resetPresentationStateLocked();
     config.width = newWidth;
     config.height = newHeight;
     _configure();
   }
 
   void configure(wgpu::SurfaceConfiguration &newConfig) {
     std::unique_lock<std::shared_mutex> lock(_mutex);
+    _resetPresentationStateLocked();
     config = newConfig;
     config.width = width;
     config.height = height;