react-native-wgpu 0.4.1 → 0.5.0

package/README.md

@@ -1,9 +1,8 @@
 # React Native WebGPU
 
-React Native implementation of WebGPU using [Dawn](https://dawn.googlesource.com/dawn).
-This is currently a technical preview for early adopters.
+React Native implementation of WebGPU using [Dawn](https://dawn.googlesource.com/dawn).  
 
-React Native WebGPU requires React Native 0.81 or newer and doesn't run on legacy architecture.
+React Native WebGPU requires React Native 0.81 or newer. It doesn't support the legacy architecture.
 
 ## Installation
 
@@ -13,7 +12,16 @@ Please note that the package name is `react-native-wgpu`.
 npm install react-native-wgpu
 ```
 
-Note that if you use pnpm, you MUST use a `node-linker = hoisted` so that the external reference to the Dawn webgpu library can successfully link it.
+## With Expo
+
+Expo provides a React Native WebGPU template that works with React Three Fiber.
+The works on iOS, Android, and Web.
+
+```
+npx create-expo-app@latest -e with-webgpu
+```
+
+https://github.com/user-attachments/assets/efbd05f8-4ce0-46c2-919c-03e1095bc8ac
 
 Below are some examples from the [example app](/apps/example/).
 
@@ -38,13 +46,6 @@ We also provide prebuilt binaries for visionOS and macOS.
 
 https://github.com/user-attachments/assets/2d5c618e-5b15-4cef-8558-d4ddf8c70667
 
-## Diagnostics
-
-Two diagnostic screens were added to the example app so you can reproduce the issues highlighted in the code review:
-
-- `Async Runner Starvation` (`apps/example/src/Diagnostics/AsyncStarvation.tsx`) shows that a zero-delay `setTimeout` never fires before `device.createRenderPipelineAsync()` resolves because the event loop is kept busy. Launch the example app and open the screen from the home list to observe the stalled timer.
-- `Device Lost Promise Hang` (`apps/example/src/Diagnostics/DeviceLostHang.tsx`) forces a synthetic device loss by calling the native `forceLossForTesting()` helper. On the current build the `device.lost` promise remains pending indefinitely, confirming that the loss callback is never delivered once pumping stops.
-
 ## Usage
 
 Usage is identical to Web.
@@ -158,8 +159,8 @@ From there you will be able to run the example app properly.
 
 ## Similarities and Differences with the Web
 
-The API has been designed to be completely symmetric with the Web.
-For instance, you can access the WebGPU context synchronously, as well as the canvas size.
+The API has been designed to be completely symmetric with the Web.  
+For instance, you can access the WebGPU context synchronously, as well as the canvas size.  
 Pixel density and canvas resizing are handled exactly like on the Web as well.
 
 ```tsx
@@ -173,7 +174,7 @@ ctx.canvas.height = ctx.canvas.clientHeight * PixelRatio.get();
 
 ### Frame Scheduling
 
-In React Native, we want to keep frame presentation as a manual operation as we plan to provide more advanced rendering options that are React Native specific.
+In React Native, we want to keep frame presentation as a manual operation as we plan to provide more advanced rendering options that are React Native specific.  
 This means that when you are ready to present a frame, you need to call `present` on the context.
 
 ```tsx
@@ -184,6 +185,19 @@ device.queue.submit([commandEncoder.finish()]);
 context.present();
 ```
 
+### Canvas Transparency
+
+On Android, the `alphaMode` property is ignored when configuring the canvas.
+To have a transparent canvas by default, use the `transparent` property.
+
+```tsx
+return (
+  <View style={style.container}>
+    <Canvas ref={ref} style={style.webgpu} transparent />
+  </View>
+);
+```
+
 ### External Textures
 
 This module provides a `createImageBitmap` function that you can use in `copyExternalImageToTexture`.
@@ -208,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

package/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

package/cpp/jsi/{RNFEnumMapper.h → 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

package/cpp/jsi/{RNFJSIConverter.h → JSIConverter.h}

@@ -1,17 +1,10 @@
-//
-// Created by Marc Rousavy on 21.02.24.
-//
-
 #pragma once
 
 #include <memory>
-#include <array>
-#include <future>
 #include <vector>
 #include <string>
 #include <utility>
 #include <type_traits>
-#include <unordered_map>
 #include <limits>
 #include <variant>
 #include <map>
@@ -19,9 +12,8 @@
 
 #include <jsi/jsi.h>
 
-#include "RNFEnumMapper.h"
-#include "RNFJSIHelper.h"
-#include "RNFPromise.h"
+#include "EnumMapper.h"
+#include "Promise.h"
 
 #include "Unions.h"
 
@@ -34,7 +26,7 @@
 #include <cxxabi.h>
 #endif
 
-namespace margelo {
+namespace rnwgpu {
 
 namespace jsi = facebook::jsi;
 
@@ -212,8 +204,8 @@ template <> struct JSIConverter<rnwgpu::async::AsyncTaskHandle> {
   }
 
   static jsi::Value toJSI(jsi::Runtime& runtime, rnwgpu::async::AsyncTaskHandle&& handle) {
-    return Promise::createPromise(runtime, [handle = std::move(handle)](jsi::Runtime& runtime,
-                                                                        std::shared_ptr<Promise> promise) mutable {
+    return rnwgpu::Promise::createPromise(runtime, [handle = std::move(handle)](jsi::Runtime& runtime,
+                                                                        std::shared_ptr<rnwgpu::Promise> promise) mutable {
       if (!handle.valid()) {
         promise->resolve(jsi::Value::undefined());
         return;
@@ -275,98 +267,6 @@ template <typename ElementType> struct JSIConverter<std::vector<ElementType>> {
   }
 };
 
-// std::unordered_map<std::string, T> <> Record<string, T>
-template <typename ValueType> struct JSIConverter<std::unordered_map<std::string, ValueType>> {
-  static std::unordered_map<std::string, ValueType> fromJSI(jsi::Runtime& runtime, const jsi::Value& arg, bool outOfBound) {
-    jsi::Object object = arg.asObject(runtime);
-    jsi::Array propertyNames = object.getPropertyNames(runtime);
-    size_t length = propertyNames.size(runtime);
-
-    std::unordered_map<std::string, ValueType> map;
-    map.reserve(length);
-    for (size_t i = 0; i < length; ++i) {
-      std::string key = propertyNames.getValueAtIndex(runtime, i).asString(runtime).utf8(runtime);
-      jsi::Value value = object.getProperty(runtime, key.c_str());
-      map.emplace(key, JSIConverter<ValueType>::fromJSI(runtime, value, outOfBound));
-    }
-    return map;
-  }
-  static jsi::Value toJSI(jsi::Runtime& runtime, const std::unordered_map<std::string, ValueType>& map) {
-    jsi::Object object(runtime);
-    for (const auto& pair : map) {
-      jsi::Value value = JSIConverter<ValueType>::toJSI(runtime, pair.second);
-      jsi::String key = jsi::String::createFromUtf8(runtime, pair.first);
-      object.setProperty(runtime, key, std::move(value));
-    }
-    return object;
-  }
-};
-
-// HybridObject <> {}
-template <typename T> struct is_shared_ptr_to_host_object : std::false_type {};
-
-template <typename T> struct is_shared_ptr_to_host_object<std::shared_ptr<T>> : std::is_base_of<jsi::HostObject, T> {};
-
-template <typename T> struct JSIConverter<T, std::enable_if_t<is_shared_ptr_to_host_object<T>::value>> {
-  using TPointee = typename T::element_type;
-
-#if DEBUG
-  inline static std::string getFriendlyTypename() {
-    std::string name = std::string(typeid(TPointee).name());
-#if __has_include(<cxxabi.h>)
-    int status = 0;
-    char* demangled_name = abi::__cxa_demangle(name.c_str(), NULL, NULL, &status);
-    if (status == 0) {
-      name = demangled_name;
-      std::free(demangled_name);
-    }
-#endif
-    return name;
-  }
-
-  inline static std::string invalidTypeErrorMessage(const std::string& typeDescription, const std::string& reason) {
-    return "Cannot convert \"" + typeDescription + "\" to HostObject<" + getFriendlyTypename() + ">! " + reason;
-  }
-#endif
-
-  static T fromJSI(jsi::Runtime& runtime, const jsi::Value& arg, bool outOfBound) {
-#if DEBUG
-    if (arg.isUndefined()) {
-      [[unlikely]];
-      throw jsi::JSError(runtime, invalidTypeErrorMessage("undefined", "It is undefined!"));
-    }
-    if (!arg.isObject()) {
-      [[unlikely]];
-      std::string stringRepresentation = arg.toString(runtime).utf8(runtime);
-      throw jsi::JSError(runtime, invalidTypeErrorMessage(stringRepresentation, "It is not an object!"));
-    }
-#endif
-    jsi::Object object = arg.getObject(runtime);
-#if DEBUG
-    if (!object.isHostObject<TPointee>(runtime)) {
-      [[unlikely]];
-      std::string stringRepresentation = arg.toString(runtime).utf8(runtime);
-      throw jsi::JSError(runtime, invalidTypeErrorMessage(stringRepresentation, "It is a different HostObject<T>!"));
-    }
-#endif
-    return object.getHostObject<TPointee>(runtime);
-  }
-  static jsi::Value toJSI(jsi::Runtime& runtime, const T& arg) {
-#if DEBUG
-    if (arg == nullptr) {
-      [[unlikely]];
-      throw jsi::JSError(runtime, "Cannot convert nullptr to HostObject<" + getFriendlyTypename() + ">!");
-    }
-#endif
-    auto result = jsi::Object::createFromHostObject(runtime, arg);
-    auto memoryPressure = arg->getMemoryPressure();
-    if (memoryPressure > 0) {
-      result.setExternalMemoryPressure(runtime, memoryPressure);
-    }
-    return result;
-  }
-};
-
 // NativeState <> {}
 template <typename T> struct is_shared_ptr_to_native_state : std::false_type {};
 
@@ -416,16 +316,33 @@ template <typename T> struct JSIConverter<T, std::enable_if_t<is_shared_ptr_to_n
 #endif
     return object.getNativeState<TPointee>(runtime);
   }
+private:
+  // SFINAE helper to detect if T has a IsNativeObject marker type
+  template <typename U, typename = typename U::IsNativeObject>
+  static std::true_type hasNativeObjectMarker(int);
+  template <typename U>
+  static std::false_type hasNativeObjectMarker(...);
+
+  // Type trait for detection
+  static constexpr bool is_native_object = decltype(hasNativeObjectMarker<TPointee>(0))::value;
+
+public:
   static jsi::Value toJSI(jsi::Runtime& runtime, const T& arg) {
 #if DEBUG
     if (arg == nullptr) {
       [[unlikely]];
-      throw jsi::JSError(runtime, "Cannot convert nullptr to HostObject<" + getFriendlyTypename() + ">!");
+      throw jsi::JSError(runtime, "Cannot convert nullptr to NativeState<" + getFriendlyTypename() + ">!");
     }
 #endif
-    jsi::Object object(runtime);
-    object.setNativeState(runtime, arg);
-    return object;
+    // Check if the type is a NativeObject (has IsNativeObject marker)
+    // Use TPointee::create() if it's a NativeObject, otherwise fall back to plain setNativeState
+    if constexpr (is_native_object) {
+      return TPointee::create(runtime, arg);
+    } else {
+      jsi::Object object(runtime);
+      object.setNativeState(runtime, arg);
+      return object;
+    }
   }
 };
 
@@ -545,4 +462,4 @@ struct JSIConverter<std::unordered_set<std::string>> {
   }
 };
 
-} // namespace margelo
+} // namespace rnwgpu