fix(🏎️): switch to native state (#298)

Author: wcandillon

README.md

@@ -222,6 +222,37 @@ device.queue.copyExternalImageToTexture(
 );
 ```
 
+### Reanimated Integration
+
+React Native WebGPU supports running WebGPU rendering on the UI thread using [React Native Reanimated](https://docs.swmansion.com/react-native-reanimated/) and [React Native Worklets](https://github.com/margelo/react-native-worklets).
+
+First, install the optional peer dependencies:
+
+```sh
+npm install react-native-reanimated react-native-worklets
+```
+
+WebGPU objects are automatically registered for Worklets serialization when the module loads. You can pass WebGPU objects like `GPUDevice` and `GPUCanvasContext` directly to worklets:
+
+```tsx
+import { Canvas } from "react-native-wgpu";
+import { runOnUI } from "react-native-reanimated";
+
+const renderFrame = (device: GPUDevice, context: GPUCanvasContext) => {
+  "worklet";
+  // WebGPU rendering code runs on the UI thread
+  const commandEncoder = device.createCommandEncoder();
+  // ... render ...
+  device.queue.submit([commandEncoder.finish()]);
+  context.present();
+};
+
+// Initialize WebGPU on main thread, then run on UI thread
+const device = await adapter.requestDevice();
+const context = canvasRef.current.getContext("webgpu");
+runOnUI(renderFrame)(device, context);
+```
+
 ## Troubleshooting
 
 ### iOS

apps/example/ios/Podfile.lock

@@ -1748,7 +1748,7 @@ PODS:
     - React-RCTFBReactNativeSpec
     - ReactCommon/turbomodule/core
     - SocketRocket
-  - react-native-safe-area-context (5.6.1):
+  - react-native-safe-area-context (5.6.2):
     - boost
     - DoubleConversion
     - fast_float
@@ -1766,8 +1766,8 @@ PODS:
     - React-graphics
     - React-ImageManager
     - React-jsi
-    - react-native-safe-area-context/common (= 5.6.1)
-    - react-native-safe-area-context/fabric (= 5.6.1)
+    - react-native-safe-area-context/common (= 5.6.2)
+    - react-native-safe-area-context/fabric (= 5.6.2)
     - React-NativeModulesApple
     - React-RCTFabric
     - React-renderercss
@@ -1778,7 +1778,7 @@ PODS:
     - ReactCommon/turbomodule/core
     - SocketRocket
     - Yoga
-  - react-native-safe-area-context/common (5.6.1):
+  - react-native-safe-area-context/common (5.6.2):
     - boost
     - DoubleConversion
     - fast_float
@@ -1806,7 +1806,7 @@ PODS:
     - ReactCommon/turbomodule/core
     - SocketRocket
     - Yoga
-  - react-native-safe-area-context/fabric (5.6.1):
+  - react-native-safe-area-context/fabric (5.6.2):
     - boost
     - DoubleConversion
     - fast_float
@@ -1865,7 +1865,7 @@ PODS:
     - ReactCommon/turbomodule/core
     - SocketRocket
     - Yoga
-  - react-native-wgpu (0.4.2):
+  - react-native-wgpu (0.5.0):
     - boost
     - DoubleConversion
     - fast_float
@@ -2398,7 +2398,7 @@ PODS:
     - React-perflogger (= 0.81.4)
     - React-utils (= 0.81.4)
     - SocketRocket
-  - ReactNativeHost (0.5.13):
+  - ReactNativeHost (0.5.15):
     - boost
     - DoubleConversion
     - fast_float
@@ -2432,7 +2432,7 @@ PODS:
     - React-Core
     - React-jsi
   - ReactTestApp-Resources (1.0.0-dev)
-  - RNGestureHandler (2.28.0):
+  - RNGestureHandler (2.30.0):
     - boost
     - DoubleConversion
     - fast_float
@@ -2552,7 +2552,7 @@ PODS:
     - RNWorklets
     - SocketRocket
     - Yoga
-  - RNWorklets (0.7.1):
+  - RNWorklets (0.7.2):
     - boost
     - DoubleConversion
     - fast_float
@@ -2579,10 +2579,10 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - RNWorklets/worklets (= 0.7.1)
+    - RNWorklets/worklets (= 0.7.2)
     - SocketRocket
     - Yoga
-  - RNWorklets/worklets (0.7.1):
+  - RNWorklets/worklets (0.7.2):
     - boost
     - DoubleConversion
     - fast_float
@@ -2609,10 +2609,10 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - RNWorklets/worklets/apple (= 0.7.1)
+    - RNWorklets/worklets/apple (= 0.7.2)
     - SocketRocket
     - Yoga
-  - RNWorklets/worklets/apple (0.7.1):
+  - RNWorklets/worklets/apple (0.7.2):
     - boost
     - DoubleConversion
     - fast_float
@@ -2936,9 +2936,9 @@ SPEC CHECKSUMS:
   React-logger: a3cb5b29c32b8e447b5a96919340e89334062b48
   React-Mapbuffer: 9d2434a42701d6144ca18f0ca1c4507808ca7696
   React-microtasksnativemodule: 75b6604b667d297292345302cc5bfb6b6aeccc1b
-  react-native-safe-area-context: c6e2edd1c1da07bdce287fa9d9e60c5f7b514616
+  react-native-safe-area-context: c00143b4823773bba23f2f19f85663ae89ceb460
   react-native-skia: 5bf2b2107cd7f2d806fd364f5e16b1c7554ed3cd
-  react-native-wgpu: 8b91bdc8de384f0fce7dd622698e46645895b085
+  react-native-wgpu: e54fcee5946cc2cee4814f63f425be358f097b14
   React-NativeModulesApple: 879fbdc5dcff7136abceb7880fe8a2022a1bd7c3
   React-oscompat: 93b5535ea7f7dff46aaee4f78309a70979bdde9d
   React-perflogger: 5536d2df3d18fe0920263466f7b46a56351c0510
@@ -2967,14 +2967,14 @@ SPEC CHECKSUMS:
   React-timing: 1e6a8acb66e2b7ac9d418956617fd1fdb19322fd
   React-utils: 52bbb03f130319ef82e4c3bc7a85eaacdb1fec87
   ReactAppDependencyProvider: 433ddfb4536948630aadd5bd925aff8a632d2fe3
-  ReactCodegen: 64dbbed4e9e0264d799578ea78492479a66fba4a
+  ReactCodegen: 7042ec4a7316b59e8f247b8fa312891179d24f5a
   ReactCommon: 394c6b92765cf6d211c2c3f7f6bc601dffb316a6
-  ReactNativeHost: 40e374201201cc54f9ef41458f2e412fbdde0d62
+  ReactNativeHost: f5e054387e917216a2a021a3f7fdc4f9f158e7e4
   ReactTestApp-DevSupport: 9b7bbba5e8fed998e763809171d9906a1375f9d3
   ReactTestApp-Resources: 1bd9ff10e4c24f2ad87101a32023721ae923bccf
-  RNGestureHandler: 3a73f098d74712952870e948b3d9cf7b6cae9961
+  RNGestureHandler: e37bdb684df1ac17c7e1d8f71a3311b2793c186b
   RNReanimated: 464375ff2caa801358547c44eca894ff0bf68e74
-  RNWorklets: 8068c8af4b241eb2c19221310729e4c440bee023
+  RNWorklets: ee58e869ea579800ec5f2f1cb6ae195fd3537546
   SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
   Yoga: a3ed390a19db0459bd6839823a6ac6d9c6db198d
 

apps/example/package.json

@@ -37,7 +37,7 @@
     "react-native-safe-area-context": "^5.4.0",
     "react-native-web": "^0.21.2",
     "react-native-wgpu": "*",
-    "react-native-worklets": "0.7.1",
+    "react-native-worklets": "0.7.2",
     "teapot": "^1.0.0",
     "three": "0.172.0",
     "typegpu": "^0.3.2",

apps/example/src/Reanimated/Reanimated.tsx

@@ -11,10 +11,9 @@ const webGPUDemo = (
   runAnimation: SharedValue<boolean>,
   device: GPUDevice,
   context: RNCanvasContext,
+  presentationFormat: GPUTextureFormat,
 ) => {
   "worklet";
-  const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
-
   if (!context) {
     throw new Error("No context");
   }
@@ -108,8 +107,9 @@ export function Reanimated() {
         console.error("Failed to get GPU canvas context");
         return;
       }
+      const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
       // TODO: stop the animation on unmount
-      runOnUI(webGPUDemo)(runAnimation, device, ctx);
+      runOnUI(webGPUDemo)(runAnimation, device, ctx, presentationFormat);
     };
     initWebGPU();
     return () => {

apps/example/src/Triangle/HelloTriangle.tsx

@@ -13,6 +13,7 @@ export function HelloTriangle() {
       if (!adapter) {
         throw new Error("No adapter");
       }
+
       const device = await adapter.requestDevice();
       const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
 

packages/webgpu/README.md

@@ -222,6 +222,37 @@ device.queue.copyExternalImageToTexture(
 );
 ```
 
+### Reanimated Integration
+
+React Native WebGPU supports running WebGPU rendering on the UI thread using [React Native Reanimated](https://docs.swmansion.com/react-native-reanimated/) and [React Native Worklets](https://github.com/margelo/react-native-worklets).
+
+First, install the optional peer dependencies:
+
+```sh
+npm install react-native-reanimated react-native-worklets
+```
+
+WebGPU objects are automatically registered for Worklets serialization when the module loads. You can pass WebGPU objects like `GPUDevice` and `GPUCanvasContext` directly to worklets:
+
+```tsx
+import { Canvas } from "react-native-wgpu";
+import { runOnUI } from "react-native-reanimated";
+
+const renderFrame = (device: GPUDevice, context: GPUCanvasContext) => {
+  "worklet";
+  // WebGPU rendering code runs on the UI thread
+  const commandEncoder = device.createCommandEncoder();
+  // ... render ...
+  device.queue.submit([commandEncoder.finish()]);
+  context.present();
+};
+
+// Initialize WebGPU on main thread, then run on UI thread
+const device = await adapter.requestDevice();
+const context = canvasRef.current.getContext("webgpu");
+runOnUI(renderFrame)(device, context);
+```
+
 ## Troubleshooting
 
 ### iOS

packages/webgpu/android/CMakeLists.txt

@@ -44,9 +44,9 @@ add_library(${PACKAGE_NAME} SHARED
     ../cpp/rnwgpu/api/GPUComputePipeline.cpp
     ../cpp/rnwgpu/api/GPUCanvasContext.cpp
     ../cpp/rnwgpu/RNWebGPUManager.cpp
-    ../cpp/jsi/RNFPromise.cpp
-    ../cpp/jsi/RNFHybridObject.cpp
-    ../cpp/jsi/RNFRuntimeState.cpp
+    ../cpp/jsi/Promise.cpp
+    ../cpp/jsi/RuntimeLifecycleMonitor.cpp
+    ../cpp/jsi/RuntimeAwareCache.cpp
     ../cpp/rnwgpu/async/AsyncRunner.cpp
     ../cpp/rnwgpu/async/AsyncTaskHandle.cpp
     ../cpp/rnwgpu/async/JSIMicrotaskDispatcher.cpp

packages/webgpu/babel.config.js

@@ -1,3 +1,4 @@
 module.exports = {
   presets: ['module:@react-native/babel-preset'],
+  plugins: ['react-native-worklets/plugin'],
 };

packages/webgpu/cpp/jsi/RNFEnumMapper.h packages/webgpu/cpp/jsi/EnumMapper.hpackages/webgpu/cpp/jsi/RNFEnumMapper.h renamed to packages/webgpu/cpp/jsi/EnumMapper.h

@@ -1,13 +1,9 @@
-//
-// Created by Marc Rousavy on 22.02.24.
-//
-
 #pragma once
 
 #include <stdexcept>
 #include <string>
 
-namespace margelo {
+namespace rnwgpu {
 
 namespace EnumMapper {
   // Add these two methods in namespace "EnumMapper" to allow parsing a custom enum:
@@ -46,4 +42,4 @@ namespace EnumMapper {
   }
 } // namespace EnumMapper
 
-} // namespace margelo
+} // namespace rnwgpu