feat(🔺): new async handling (#275)

Author: wcandillon

…-three-fiber-npm-8.17.6-bc537e834c.patch …t-three-fiber-npm-9.4.0-77fe8ee9bd.patch.yarn/patches/@react-three-fiber-npm-8.17.6-bc537e834c.patch renamed to .yarn/patches/@react-three-fiber-npm-9.4.0-77fe8ee9bd.patch .yarn/patches/@react-three-fiber-npm-8.17.6-bc537e834c.patch renamed to .yarn/patches/@react-three-fiber-npm-9.4.0-77fe8ee9bd.patch

@@ -1,13 +1,13 @@
 diff --git a/package.json b/package.json
-index e866692ead26f118141e8a3c67374a09f8aab0e9..08997ecbf59a077d15d035aee4f1285a5da76a95 100644
+index 265e5707cc4c56a369d4c9db0d75e9077b12cdee..15f54ddb2ac2bd34b95545be06c589d04d70a5cb 100644
 --- a/package.json
 +++ b/package.json
-@@ -30,7 +30,7 @@
+@@ -31,7 +31,7 @@
    "main": "dist/react-three-fiber.cjs.js",
    "module": "dist/react-three-fiber.esm.js",
    "types": "dist/react-three-fiber.cjs.d.ts",
 -  "react-native": "native/dist/react-three-fiber-native.cjs.js",
-+  "react-native": "dist/react-three-fiber.cjs.js",
++  "react-native": "dist/react-three-fiber.esm.js",
    "sideEffects": false,
    "preconstruct": {
      "entrypoints": [

README.md

@@ -3,6 +3,8 @@
 React Native implementation of WebGPU using [Dawn](https://dawn.googlesource.com/dawn).  
 This is currently a technical preview for early adopters.  
 
+React Native WebGPU requires React Native 0.81 or newer and doesn't run on legacy architecture.
+
 ## Installation
 
 Please note that the package name is `react-native-wgpu`.
@@ -15,19 +17,19 @@ Below are some examples from the [example app](/apps/example/).
 
 https://github.com/user-attachments/assets/116a41b2-2cf8-49f1-9f16-a5c83637c198
 
-## Three.js
-
 Starting from `r168`, Three.js runs out of the box with React Native WebGPU.
 You need to have a slight modification of [the metro config](/apps/example/metro.config.js) to resolve Three.js to the WebGPU build.
-We also support [three-fiber](/apps/example/src/ThreeJS/Fiber.tsx).
-For model loading, we also need the following polyfill:
+We also support [react-three-fiber](/apps/example/src/ThreeJS/Fiber.tsx); to make it work, patch `node_modules/@react-three/fiber/package.json` (for instance via `patch-package`) so that it resolves to the WebGPU entry point instead of the React Native bundle:
 
-```tsx
-// The two lines below are needed by three.js
-import "fast-text-encoding";
-window.parent = window;
+```diff
+diff --git a/node_modules/@react-three/fiber/package.json b/node_modules/@react-three/fiber/package.json
+@@
+-  "react-native": "native/dist/react-three-fiber-native.cjs.js",
++  "react-native": "dist/react-three-fiber.cjs.js",
 ```
 
+For model loading, we also need [the following polyfill](/apps/example/src/App.tsx#29).
+
 https://github.com/user-attachments/assets/5b49ef63-0a3c-4679-aeb5-e4b4dddfcc1d
 
 We also provide prebuilt binaries for visionOS and macOS.
@@ -36,87 +38,91 @@ https://github.com/user-attachments/assets/2d5c618e-5b15-4cef-8558-d4ddf8c70667
 
 ## Usage
 
-Currently we recommend to use the `useCanvasEffect` to access the WebGPU context.
+Usage is identical to Web.
 
 ```tsx
 import React from "react";
 import { StyleSheet, View, PixelRatio } from "react-native";
-import { Canvas, useCanvasEffect } from "react-native-wgpu";
+import { Canvas, CanvasRef } from "react-native-wgpu";
 
 import { redFragWGSL, triangleVertWGSL } from "./triangle";
 
 export function HelloTriangle() {
-  const ref = useCanvasEffect(async () => {
-    const adapter = await navigator.gpu.requestAdapter();
-    if (!adapter) {
-      throw new Error("No adapter");
-    }
-    const device = await adapter.requestDevice();
-    const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
-
-    const context = ref.current!.getContext("webgpu")!;
-    const canvas = context.canvas as HTMLCanvasElement;
-    canvas.width = canvas.clientWidth * PixelRatio.get();
-    canvas.height = canvas.clientHeight * PixelRatio.get();
-
-    if (!context) {
-      throw new Error("No context");
-    }
-
-    context.configure({
-      device,
-      format: presentationFormat,
-      alphaMode: "opaque",
-    });
-
-    const pipeline = device.createRenderPipeline({
-      layout: "auto",
-      vertex: {
-        module: device.createShaderModule({
-          code: triangleVertWGSL,
-        }),
-        entryPoint: "main",
-      },
-      fragment: {
-        module: device.createShaderModule({
-          code: redFragWGSL,
-        }),
-        entryPoint: "main",
-        targets: [
+  const ref = useRef<CanvasRef>(null);
+  useEffect(() => {
+    const helloTriangle = async () => {
+      const adapter = await navigator.gpu.requestAdapter();
+      if (!adapter) {
+        throw new Error("No adapter");
+      }
+      const device = await adapter.requestDevice();
+      const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
+
+      const context = ref.current!.getContext("webgpu")!;
+      const canvas = context.canvas as HTMLCanvasElement;
+      canvas.width = canvas.clientWidth * PixelRatio.get();
+      canvas.height = canvas.clientHeight * PixelRatio.get();
+
+      if (!context) {
+        throw new Error("No context");
+      }
+
+      context.configure({
+        device,
+        format: presentationFormat,
+        alphaMode: "opaque",
+      });
+
+      const pipeline = device.createRenderPipeline({
+        layout: "auto",
+        vertex: {
+          module: device.createShaderModule({
+            code: triangleVertWGSL,
+          }),
+          entryPoint: "main",
+        },
+        fragment: {
+          module: device.createShaderModule({
+            code: redFragWGSL,
+          }),
+          entryPoint: "main",
+          targets: [
+            {
+              format: presentationFormat,
+            },
+          ],
+        },
+        primitive: {
+          topology: "triangle-list",
+        },
+      });
+
+      const commandEncoder = device.createCommandEncoder();
+
+      const textureView = context.getCurrentTexture().createView();
+
+      const renderPassDescriptor: GPURenderPassDescriptor = {
+        colorAttachments: [
           {
-            format: presentationFormat,
+            view: textureView,
+            clearValue: [0, 0, 0, 1],
+            loadOp: "clear",
+            storeOp: "store",
           },
         ],
-      },
-      primitive: {
-        topology: "triangle-list",
-      },
-    });
-
-    const commandEncoder = device.createCommandEncoder();
-
-    const textureView = context.getCurrentTexture().createView();
-
-    const renderPassDescriptor: GPURenderPassDescriptor = {
-      colorAttachments: [
-        {
-          view: textureView,
-          clearValue: [0, 0, 0, 1],
-          loadOp: "clear",
-          storeOp: "store",
-        },
-      ],
-    };
+      };
 
-    const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
-    passEncoder.setPipeline(pipeline);
-    passEncoder.draw(3);
-    passEncoder.end();
+      const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
+      passEncoder.setPipeline(pipeline);
+      passEncoder.draw(3);
+      passEncoder.end();
 
-    device.queue.submit([commandEncoder.finish()]);
+      device.queue.submit([commandEncoder.finish()]);
 
-    context.present();
-  });
+      context.present();
+    };
+    helloTriangle();
+  }, [ref]);
 
   return (
     <View style={style.container}>
@@ -137,7 +143,7 @@ const style = StyleSheet.create({
 
 ## Example App
 
-To run the example app you first need to [build Dawn or download the prebuilt binaries](#building-dawn).
+To run the example app you first need to [install Dawn](#installing-dawn).
 
 From there you will be able to run the example app properly.
 
@@ -212,9 +218,9 @@ git submodule update --init
 
 Make sure you have all the tools required for building the Skia libraries (Android Studio, XCode, Ninja, CMake, Android NDK/build tools).
 
-### Downloading Dawn
+### Installing Dawn
 
-There is an alternative way which is to download the prebuilt binaries from GitHub.
+There is an alternative way which is to install the prebuilt binaries from GitHub.
 
 ```sh
 $ yarn

apps/example/ios/Podfile.lock

@@ -1865,7 +1865,7 @@ PODS:
     - ReactCommon/turbomodule/core
     - SocketRocket
     - Yoga
-  - react-native-wgpu (0.2.10):
+  - react-native-wgpu (0.3.0):
     - boost
     - DoubleConversion
     - fast_float
@@ -2903,7 +2903,7 @@ SPEC CHECKSUMS:
   React-microtasksnativemodule: 75b6604b667d297292345302cc5bfb6b6aeccc1b
   react-native-safe-area-context: c6e2edd1c1da07bdce287fa9d9e60c5f7b514616
   react-native-skia: 5bf2b2107cd7f2d806fd364f5e16b1c7554ed3cd
-  react-native-wgpu: 9c80c820813ecb17fe331794180a00fb21a33af2
+  react-native-wgpu: 6704c6ad8ef91fdbbad58543089ac50c0e6f3fa7
   React-NativeModulesApple: 879fbdc5dcff7136abceb7880fe8a2022a1bd7c3
   React-oscompat: 93b5535ea7f7dff46aaee4f78309a70979bdde9d
   React-perflogger: 5536d2df3d18fe0920263466f7b46a56351c0510

apps/example/package.json

@@ -13,13 +13,14 @@
     "build:android": "cd android && ./gradlew assembleDebug --warning-mode all",
     "build:ios": "react-native build-ios --scheme Example --mode Debug --extra-params \"-sdk iphonesimulator CC=clang CPLUSPLUS=clang++ LD=clang LDPLUSPLUS=clang++ GCC_OPTIMIZATION_LEVEL=0 GCC_PRECOMPILE_PREFIX_HEADER=YES ASSETCATALOG_COMPILER_OPTIMIZATION=time DEBUG_INFORMATION_FORMAT=dwarf COMPILER_INDEX_STORE_ENABLE=NO\"",
     "build:macos": "react-native build-macos --scheme Example --mode Debug",
-    "mkdist": "node -e \"require('node:fs').mkdirSync('dist', { recursive: true, mode: 0o755 })\""
+    "mkdist": "node -e \"require('node:fs').mkdirSync('dist', { recursive: true, mode: 0o755 })\"",
+    "postinstall": "yarn pod:install:ios"
   },
   "dependencies": {
     "@callstack/react-native-visionos": "^0.74.0",
     "@react-navigation/native": "^6.1.17",
     "@react-navigation/stack": "^6.4.0",
-    "@react-three/fiber": "^8.17.6",
+    "@react-three/fiber": "^9.4.0",
     "@shopify/react-native-skia": "2.2.14",
     "@tensorflow/tfjs": "^4.22.0",
     "@tensorflow/tfjs-backend-webgpu": "^4.22.0",

apps/example/src/App.tsx

@@ -30,6 +30,9 @@ import { GradientTiles } from "./GradientTiles";
 import { CanvasAPI } from "./CanvasAPI";
 import { Tensorflow } from "./Tensorflow";
 import { ComputeToys } from "./ComputeToys";
+import { Reanimated } from "./Reanimated";
+import { AsyncStarvation } from "./Diagnostics/AsyncStarvation";
+import { DeviceLostHang } from "./Diagnostics/DeviceLostHang";
 
 // The two lines below are needed by three.js
 import "fast-text-encoding";
@@ -80,6 +83,9 @@ function App() {
             {(props) => <Tests {...props} assets={assets} />}
           </Stack.Screen>
           <Stack.Screen name="GradientTiles" component={GradientTiles} />
+          <Stack.Screen name="Reanimated" component={Reanimated} />
+          <Stack.Screen name="AsyncStarvation" component={AsyncStarvation} />
+          <Stack.Screen name="DeviceLostHang" component={DeviceLostHang} />
         </Stack.Navigator>
       </NavigationContainer>
     </GestureHandlerRootView>

apps/example/src/CanvasAPI/CanvasAPI.tsx

@@ -1,16 +1,18 @@
 import { Button, View } from "react-native";
-import { Canvas, useGPUContext } from "react-native-wgpu";
+import type { CanvasRef } from "react-native-wgpu";
+import { Canvas } from "react-native-wgpu";
+import { useRef } from "react";
 
 import { redFragWGSL, triangleVertWGSL } from "../Triangle/triangle";
 
 export const CanvasAPI = () => {
-  const { ref, context } = useGPUContext();
-
+  const ref = useRef<CanvasRef>(null);
   return (
     <View style={{ flex: 1 }}>
       <Button
         onPress={() =>
           (async () => {
+            const context = ref.current?.getContext("webgpu");
             if (!context) {
               throw new Error("No context");
             }

apps/example/src/ComputeToys/ComputeToy.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from "react";
-import { Canvas, useCanvasEffect } from "react-native-wgpu";
+import type { CanvasRef } from "react-native-wgpu";
+import { Canvas } from "react-native-wgpu";
 import { useWindowDimensions } from "react-native";
 import { useSharedValue } from "react-native-reanimated";
 import { Gesture, GestureDetector } from "react-native-gesture-handler";
@@ -46,23 +47,24 @@ export interface ComputeToyProps {
 }
 
 export const ComputeToy = ({ toy: { shader, uniforms } }: ComputeToyProps) => {
+  const ref = useRef<CanvasRef>(null);
   const mouse = useSharedValue({ pos: { x: 0, y: 0 }, click: false });
   const { width, height } = useWindowDimensions();
   const [engine, setEngine] = useState<ComputeEngine | null>(null);
   const animationRef = useRef<number | null>(null);
   const lastTimeRef = useRef<number>(0);
 
   // Initialize WebGPU and the compute engine
-  const canvasRef = useCanvasEffect(() => {
+  useEffect(() => {
     const initWebGPU = async () => {
       try {
         // Create the compute engine
         await ComputeEngine.create();
         const eng = ComputeEngine.getInstance();
 
         // Set the canvas surface
-        if (canvasRef.current) {
-          eng.setSurface(canvasRef.current!);
+        if (ref.current) {
+          eng.setSurface(ref.current!);
 
           // Set the canvas size based on your CANVAS constants
           // TODO: use PixelRatio.get()?
@@ -106,7 +108,7 @@ export const ComputeToy = ({ toy: { shader, uniforms } }: ComputeToyProps) => {
         cancelAnimationFrame(animationRef.current);
       }
     };
-  });
+  }, [height, ref, shader, uniforms, width]);
 
   // Animation/render loop
   const renderLoop = useCallback(
@@ -163,7 +165,7 @@ export const ComputeToy = ({ toy: { shader, uniforms } }: ComputeToyProps) => {
 
   return (
     <GestureDetector gesture={gesture}>
-      <Canvas ref={canvasRef} style={{ width, height }} />
+      <Canvas ref={ref} style={{ width, height }} />
     </GestureDetector>
   );
 };