react-native-wgpu 0.2.10 → 0.3.1

package/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`.
@@ -17,7 +19,15 @@ https://github.com/user-attachments/assets/116a41b2-2cf8-49f1-9f16-a5c83637c198
 
 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).
+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:
+
+```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
@@ -26,89 +36,100 @@ 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
 
-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}>
@@ -129,7 +150,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.
 
@@ -184,3 +205,68 @@ device.queue.copyExternalImageToTexture(
   [imageBitmap.width, imageBitmap.height],
 );
 ```
+
+## Troubleshooting
+
+### iOS
+
+To run the React Native WebGPU project on the iOS simulator, you need to disable the Metal validation API.  
+In "Edit Scheme," uncheck "Metal Validation". Learn more [here](https://developer.apple.com/documentation/xcode/validating-your-apps-metal-api-usage/).
+
+<img width="1052" alt="Uncheck 'Metal Validation'" src="https://github.com/user-attachments/assets/2676e5cc-e351-4a97-bdc8-22cbd7df2ef2">
+
+## Library Development
+
+Make sure to check out the submodules:
+
+```
+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).
+
+### Installing Dawn
+
+There is an alternative way which is to install the prebuilt binaries from GitHub.
+
+```sh
+$ yarn
+$ cd packages/webgpu
+$ yarn install-dawn
+```
+
+### Building Dawn
+
+Alternatively, you can build Dawn locally.
+
+```sh
+yarn
+cd packages/webgpu
+yarn build-dawn
+```
+
+### Upgrading
+
+1. `git submodule update --remote`
+2. `yarn clean-dawn`
+3. `yarn build-dawn`
+
+### Codegen
+
+* `cd packages/webgpu && yarn codegen`
+
+### Testing
+
+In the `package` folder, to run the test against Chrome for reference:
+
+```
+yarn test:ref
+```
+
+To run the e2e test, open the example app on the e2e screen.  
+By default, it will try to connect to a localhost test server.  
+If you want to run the test suite on a physical device, you can modify the address [here](/apps/example/src/useClient.ts#L4).
+
+```
+yarn test
+```

package/android/CMakeLists.txt

@@ -25,7 +25,6 @@ find_package(fbjni REQUIRED CONFIG)
 
 add_library(${PACKAGE_NAME} SHARED
     ./cpp/cpp-adapter.cpp
-    ./cpp/platform/ThreadUtils.cpp
     ../cpp/rnwgpu/api/GPU.cpp
     ../cpp/rnwgpu/api/GPUAdapter.cpp
     ../cpp/rnwgpu/api/GPUSupportedLimits.cpp
@@ -47,10 +46,10 @@ add_library(${PACKAGE_NAME} SHARED
     ../cpp/rnwgpu/RNWebGPUManager.cpp
     ../cpp/jsi/RNFPromise.cpp
     ../cpp/jsi/RNFHybridObject.cpp
-    ../cpp/jsi/RNFRuntimeCache.cpp
-    ../cpp/jsi/RNFWorkletRuntimeRegistry.cpp
-    ../cpp/threading/Dispatcher.cpp
-    ../cpp/threading/ThreadPool.cpp
+    ../cpp/jsi/RNFRuntimeState.cpp
+    ../cpp/rnwgpu/async/AsyncRunner.cpp
+    ../cpp/rnwgpu/async/AsyncTaskHandle.cpp
+    ../cpp/rnwgpu/async/JSIMicrotaskDispatcher.cpp
 )
 
 target_include_directories(
@@ -72,7 +71,6 @@ target_include_directories(
         ../cpp/rnwgpu/api/descriptors
         ../cpp/jsi
         ../cpp/webgpu
-        ../cpp/threading
         ../cpp/platform
 
         ${libfbjni_include_DIRS}
@@ -106,4 +104,4 @@ else()
         ReactAndroid::reactnativejni
         webgpu_dawn
     )
-endif()
+endif()

package/android/build.gradle

@@ -16,15 +16,8 @@ def reactNativeArchitectures() {
   return value ? value.split(",") : ["armeabi-v7a", "x86", "x86_64", "arm64-v8a"]
 }
 
-def isNewArchitectureEnabled() {
-  return rootProject.hasProperty("newArchEnabled") && rootProject.getProperty("newArchEnabled") == "true"
-}
-
 apply plugin: "com.android.library"
-
-if (isNewArchitectureEnabled()) {
-  apply plugin: "com.facebook.react"
-}
+apply plugin: "com.facebook.react"
 
 static def findNodeModules(baseDir) {
   // Check if we are building the example app:
@@ -75,7 +68,7 @@ android {
   defaultConfig {
     minSdkVersion getExtOrIntegerDefault("minSdkVersion")
     targetSdkVersion getExtOrIntegerDefault("targetSdkVersion")
-    buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString()
+    buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", "true"
     externalNativeBuild {
       cmake {
         cppFlags "-fexceptions", "-frtti", "-std=c++1y", "-DONANDROID"
@@ -116,15 +109,11 @@ android {
 
   sourceSets {
     main {
-      if (isNewArchitectureEnabled()) {
-        java.srcDirs += [
-          "src/newarch",
-          // This is needed to build Kotlin project with NewArch enabled
-          "${project.buildDir}/generated/source/codegen/java"
-        ]
-      } else {
-        java.srcDirs += ["src/oldarch"]
-      }
+      java.srcDirs += [
+        "src/newarch",
+        // This is needed to build Kotlin project with NewArch enabled
+        "${project.buildDir}/generated/source/codegen/java"
+      ]
     }
   }
 

package/android/src/main/java/com/webgpu/WebGPUViewPackage.java

@@ -1,26 +1,50 @@
 
 package com.webgpu;
 
-import com.facebook.react.ReactPackage;
+import com.facebook.react.TurboReactPackage;
 import com.facebook.react.bridge.NativeModule;
 import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.module.annotations.ReactModule;
+import com.facebook.react.module.model.ReactModuleInfo;
+import com.facebook.react.module.model.ReactModuleInfoProvider;
 import com.facebook.react.uimanager.ViewManager;
 
-import java.util.ArrayList;
-import java.util.Arrays;
+import java.util.Collections;
+import java.util.HashMap;
 import java.util.List;
+import java.util.Map;
 
-public class WebGPUViewPackage implements ReactPackage {
+public class WebGPUViewPackage extends TurboReactPackage {
   @Override
-  public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
-    List<ViewManager> viewManagers = new ArrayList<>();
-    viewManagers.add(new WebGPUViewManager());
-    return viewManagers;
+  public NativeModule getModule(String name, ReactApplicationContext reactContext) {
+    if (name.equals(WebGPUModule.NAME)) {
+      return new WebGPUModule(reactContext);
+    }
+    return null;
   }
 
+  @Override
+  public ReactModuleInfoProvider getReactModuleInfoProvider() {
+    return () -> {
+      Map<String, ReactModuleInfo> map = new HashMap<>();
+      map.put(
+        WebGPUModule.NAME,
+        new ReactModuleInfo(
+          WebGPUModule.NAME,
+          WebGPUModule.class.getName(),
+          false,
+          false,
+          false,
+          false,
+          true // isTurboModule
+        )
+      );
+      return map;
+    };
+  }
 
   @Override
-  public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
-      return List.of(new WebGPUModule(reactContext));
+  public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
+    return Collections.singletonList(new WebGPUViewManager());
   }
 }

package/apple/MetalView.mm

@@ -1,10 +1,6 @@
 #import "MetalView.h"
 #import "webgpu_cpp.h"
 
-#ifndef RCT_NEW_ARCH_ENABLED
-#import <React/RCTViewManager.h>
-#endif // RCT_NEW_ARCH_ENABLED
-
 @implementation MetalView {
   BOOL _isConfigured;
 }
@@ -51,19 +47,4 @@
   registry.removeSurfaceInfo([_contextId intValue]);
 }
 
-#ifndef RCT_NEW_ARCH_ENABLED
-// Paper only method
-// TODO: this method is wrong, it appears to call configureSurface instead of
-// updateSurface sometimes
-- (void)reactSetFrame:(CGRect)frame {
-  [super reactSetFrame:frame];
-  if (!_isConfigured) {
-    [self configure];
-    _isConfigured = YES;
-  } else {
-    [self update];
-  }
-}
-#endif // RCT_NEW_ARCH_ENABLED
-
 @end

package/apple/WebGPUModule.h

@@ -1,18 +1,10 @@
 #pragma once
 
 #import "RNWebGPUManager.h"
-#import <React/RCTBridgeModule.h>
+#import <RNWgpuViewSpec/RNWgpuViewSpec.h>
 #import <React/RCTEventEmitter.h>
 
-#ifdef RCT_NEW_ARCH_ENABLED
-#import <RNWgpuViewSpec/RNWgpuViewSpec.h>
 @interface WebGPUModule : RCTEventEmitter <NativeWebGPUModuleSpec>
-#else
-@interface WebGPUModule : RCTEventEmitter <RCTBridgeModule>
-#endif
-
-@property(nonatomic, weak) RCTBridge *bridge;
-@property(nonatomic, weak) RCTModuleRegistry *moduleRegistry;
 
 + (std::shared_ptr<rnwgpu::RNWebGPUManager>)getManager;
 

package/apple/WebGPUModule.mm

@@ -4,7 +4,6 @@
 
 #import <React/RCTBridge+Private.h>
 #import <React/RCTLog.h>
-#import <React/RCTUIManagerUtils.h>
 #import <ReactCommon/RCTTurboModule.h>
 #import <jsi/jsi.h>
 #import <memory>
@@ -74,11 +73,9 @@ RCT_EXPORT_BLOCKING_SYNCHRONOUS_METHOD(install) {
   return @true;
 }
 
-#ifdef RCT_NEW_ARCH_ENABLED
 - (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:
     (const facebook::react::ObjCTurboModule::InitParams &)params {
   return std::make_shared<facebook::react::NativeWebGPUModuleSpecJSI>(params);
 }
-#endif
 
 @end

package/apple/WebGPUView.h

@@ -1,4 +1,3 @@
-#ifdef RCT_NEW_ARCH_ENABLED
 #pragma once
 
 #import "MetalView.h"
@@ -11,5 +10,3 @@ NS_ASSUME_NONNULL_BEGIN
 @end
 
 NS_ASSUME_NONNULL_END
-
-#endif /* RCT_NEW_ARCH_ENABLED */

package/apple/WebGPUView.mm

@@ -1,4 +1,3 @@
-#ifdef RCT_NEW_ARCH_ENABLED
 #import "WebGPUView.h"
 
 #import <react/renderer/components/RNWgpuViewSpec/ComponentDescriptors.h>
@@ -65,4 +64,3 @@ using namespace facebook::react;
 Class<RCTComponentViewProtocol> WebGPUViewCls(void) { return WebGPUView.class; }
 
 @end
-#endif

package/cpp/WGPULogger.h

@@ -27,12 +27,17 @@ public:
    * @param message Message to be written out
    */
   static void logToConsole(std::string message) {
+#ifdef DEBUG
 #if defined(ANDROID) || defined(__ANDROID__)
     __android_log_write(ANDROID_LOG_INFO, "WebGPU", message.c_str());
 #endif
 
 #ifdef __APPLE__
     syslog(LOG_ERR, "%s\n", message.c_str());
+#endif
+#else
+    // In release mode, do nothing
+    (void)message;
 #endif
   }
 
@@ -42,6 +47,7 @@ public:
    * @param ... Arguments to format string
    */
   static void logToConsole(const char *fmt, ...) {
+#ifdef DEBUG
     va_list args;
     va_start(args, fmt);
 
@@ -54,6 +60,10 @@ public:
     syslog(LOG_ERR, "WebGPU: %s\n", buffer);
 #endif
     va_end(args);
+#else
+    // In release mode, do nothing
+    (void)fmt;
+#endif
   }
 
   static void logToJavascriptConsole(jsi::Runtime &runtime,

package/cpp/dawn/dawn_proc_table.h

@@ -2,7 +2,7 @@
 #ifndef DAWN_DAWN_PROC_TABLE_H_
 #define DAWN_DAWN_PROC_TABLE_H_
 
-#include "webgpu/webgpu.h"
+#include "dawn/webgpu.h"
 
 // Note: Often allocated as a static global. Do not add a complex constructor.
 typedef struct DawnProcTable {