react-native-wgpu 0.1.0 → 0.1.3

package/README.md

@@ -1,31 +1,239 @@
-# react-native-wgpu
+# React Native WebGPU
 
-React Native WebGPU
+React Native implementation of WebGPU using [Dawn](https://dawn.googlesource.com/dawn).  
+This is currently a technical preview for early adopters.  
 
 ## Installation
 
-```sh
+Please note that the package name is `react-native-wgpu`.
+
+```
 npm install react-native-wgpu
 ```
 
 ## Usage
 
-```js
-import { WgpuView } from "react-native-wgpu";
+You can look at the [example](/package/example) folder for working examples.
+
+```tsx
+import React, { useEffect, useRef } from "react";
+import { StyleSheet, View, PixelRatio } from "react-native";
+import type { CanvasRef } from "react-native-webgpu";
+import { Canvas } from "react-native-webgpu";
+
+import { redFragWGSL, triangleVertWGSL } from "./triangle";
+
+export function HelloTriangle() {
+  const ref = useRef<CanvasRef>(null);
+
+  async function demo() {
+    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")!;
+    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: [
+        {
+          view: textureView,
+          clearValue: [0, 0, 0, 1],
+          loadOp: "clear",
+          storeOp: "store",
+        },
+      ],
+    };
+
+    const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
+    passEncoder.setPipeline(pipeline);
+    passEncoder.draw(3);
+    passEncoder.end();
+
+    device.queue.submit([commandEncoder.finish()]);
+
+    context.present();
+  }
+
+  useEffect(() => {
+    demo();
+  }, []);
+
+  return (
+    <View style={style.container}>
+      <Canvas ref={ref} style={style.webgpu} />
+    </View>
+  );
+}
+
+const style = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  webgpu: {
+    flex: 1,
+  },
+});
+```
+
+## 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.  
+Pixel density and canvas resizing are handled exactly like on the Web as well.
+
+```tsx
+// The default canvas size is not scaled to the device pixel ratio
+// When resizing the canvas, the clientWidth and clientHeight are updated automatically
+// This behaviour is symmetric to the Web
+const ctx = canvas.current.getContext("webgpu")!;
+ctx.canvas.width = ctx.canvas.clientWidth * PixelRatio.get();
+ctx.canvas.height = ctx.canvas.clientHeight * PixelRatio.get();
+```
+
+However, there are two differences with the Web: frame scheduling and external textures.
+
+### 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.  
+This means that when you are ready to present a frame, you need to call `present` on the context.
+
+```tsx
+// draw
+// submit to the queue
+device.queue.submit([commandEncoder.finish()]);
+// This method is React Native only
+context.present();
+```
+
+### External Textures
+
+External textures are not a concept that exists in React Native.  
+Consider the following Web example:
+
+```tsx
+const response = await fetch('./assets/img/Di-3d.png');
+const imageBitmap = await createImageBitmap(await response.blob());
+
+device.queue.copyExternalImageToTexture(
+  { source: imageBitmap },
+  { texture: cubeTexture },
+  [imageBitmap.width, imageBitmap.height]
+);
+```
+
+In React Native, you would need to load the texture yourself.  
+For instance, we use Skia for image decoding [here](/package/example/src/components/useAssets.ts#L6).
+
+```tsx
+const imageBitmap = await decodeImage(require("./assets/Di-3d.png"));
+
+device.queue.writeTexture(
+  { texture: cubeTexture, mipLevel: 0, origin: { x: 0, y: 0, z: 0 } },
+  imageBitmap.data.buffer,
+  {
+    offset: 0,
+    bytesPerRow: 4 * imageBitmap.width,
+    rowsPerImage: imageBitmap.height,
+  },
+  { width: imageBitmap.width, height: 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."
+
+<img width="1052" alt="Uncheck 'Metal Validation'" src="https://github.com/user-attachments/assets/2676e5cc-e351-4a97-bdc8-22cbd7df2ef2">
 
-// ...
+### Android
 
-<WgpuView color="tomato" />
+On a physical device, you need Android API level 26 or higher.  
+On a simulator, you need Android API level 34 or higher.  
+We are currently working on relaxing that rule for Android simulators.
+
+## Library Development
+
+Make sure to check out the submodules:
+
+```
+git submodule update --init
 ```
 
-## Contributing
+Make sure you have all the tools required for building the Skia libraries (Android Studio, XCode, Ninja, CMake, Android NDK/build tools).
+
+### Building
+
+* `cd package && yarn`
+* `yarn build-dawn`
+
+### Upgrading
 
-See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
+1. `git submodule update --remote`
+2. `yarn clean-dawn`
+3. `yarn build-dawn`
 
-## License
+### Codegen
 
-MIT
+* `cd package && yarn codegen`
 
----
+### Testing
 
-Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)
+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](/package/example/src/useClient.ts#L4).
+
+```
+yarn test
+```

package/android/CMakeLists.txt

@@ -4,7 +4,7 @@ project(RNWGPU)
 set (CMAKE_VERBOSE_MAKEFILE ON)
 set (CMAKE_CXX_STANDARD 17)
 
-set (PACKAGE_NAME "react-native-webgpu")
+set (PACKAGE_NAME "react-native-wgpu")
 
 #link_directories(../libs/android/${ANDROID_ABI}/)
 
@@ -27,8 +27,22 @@ add_library(${PACKAGE_NAME} SHARED
     ./cpp/cpp-adapter.cpp
     ../cpp/rnwgpu/api/GPU.cpp
     ../cpp/rnwgpu/api/GPUAdapter.cpp
+    ../cpp/rnwgpu/api/GPUSupportedLimits.cpp
+    ../cpp/rnwgpu/api/GPUShaderModule.cpp
+    ../cpp/rnwgpu/api/GPUDeviceLostInfo.cpp
     ../cpp/rnwgpu/api/GPUDevice.cpp
     ../cpp/rnwgpu/api/GPUBuffer.cpp
+    ../cpp/rnwgpu/api/GPUQueue.cpp
+    ../cpp/rnwgpu/api/GPUCommandEncoder.cpp
+    ../cpp/rnwgpu/api/GPUQuerySet.cpp
+    ../cpp/rnwgpu/api/GPUTexture.cpp
+    ../cpp/rnwgpu/api/GPURenderBundleEncoder.cpp
+    ../cpp/rnwgpu/api/GPURenderPassEncoder.cpp
+    ../cpp/rnwgpu/api/GPURenderPipeline.cpp
+    ../cpp/rnwgpu/api/GPUBindGroup.cpp
+    ../cpp/rnwgpu/api/GPUComputePassEncoder.cpp
+    ../cpp/rnwgpu/api/GPUComputePipeline.cpp
+    ../cpp/rnwgpu/api/GPUCanvasContext.cpp
     ../cpp/rnwgpu/RNWebGPUManager.cpp
     ../cpp/jsi/RNFPromise.cpp
     ../cpp/jsi/RNFHybridObject.cpp

package/android/build.gradle

@@ -70,16 +70,6 @@ def supportsNamespace() {
 }
 
 android {
-  if (supportsNamespace()) {
-    namespace "com.wgpu"
-
-    sourceSets {
-      main {
-        manifest.srcFile "src/main/AndroidManifestNew.xml"
-      }
-    }
-  }
-
   compileSdkVersion getExtOrIntegerDefault("compileSdkVersion")
 
   defaultConfig {
@@ -156,11 +146,3 @@ dependencies {
   //noinspection GradleDynamicVersion
   implementation "com.facebook.react:react-native:+"
 }
-
-if (isNewArchitectureEnabled()) {
-  react {
-    jsRootDir = file("../src/")
-    libraryName = "WgpuView"
-    codegenJavaPackageName = "com.wgpu"
-  }
-}

package/android/cpp/AndroidPlatformContext.h

@@ -0,0 +1,132 @@
+#pragma once
+
+#include <android/bitmap.h>
+#include <jni.h>
+
+#include <memory>
+#include <string>
+#include <vector>
+
+#include "webgpu/webgpu_cpp.h"
+
+#include "PlatformContext.h"
+#include "RNWebGPUManager.h"
+
+namespace rnwgpu {
+
+namespace jsi = facebook::jsi;
+namespace jni = facebook::jni;
+
+class AndroidPlatformContext : public PlatformContext {
+private:
+  jobject _blobModule;
+
+public:
+  explicit AndroidPlatformContext(jobject blobModule) : _blobModule(blobModule) {}
+  ~AndroidPlatformContext() {
+    if (_blobModule) {
+      JNIEnv *env = facebook::jni::Environment::current();
+      env->DeleteGlobalRef(_blobModule);
+      _blobModule = nullptr;
+    }
+  }
+
+  wgpu::Surface makeSurface(wgpu::Instance instance, void *window, int width,
+                            int height) override {
+    wgpu::SurfaceDescriptorFromAndroidNativeWindow androidSurfaceDesc;
+    androidSurfaceDesc.window = reinterpret_cast<ANativeWindow *>(window);
+    wgpu::SurfaceDescriptor surfaceDescriptor;
+    surfaceDescriptor.nextInChain = &androidSurfaceDesc;
+    return instance.CreateSurface(&surfaceDescriptor);
+  }
+
+  ImageData createImageBitmap(std::string blobId, double offset,
+                              double size) override {
+    jni::Environment::ensureCurrentThreadIsAttached();
+
+    JNIEnv *env = facebook::jni::Environment::current();
+    if (!env) {
+      throw std::runtime_error("Couldn't get JNI environment");
+    }
+
+    // Use the BlobModule instance from _blobModule
+    if (!_blobModule) {
+      throw std::runtime_error("BlobModule instance is null");
+    }
+
+    // Get the resolve method ID
+    jclass blobModuleClass = env->GetObjectClass(_blobModule);
+    if (!blobModuleClass) {
+      throw std::runtime_error("Couldn't find BlobModule class");
+    }
+
+    jmethodID resolveMethod = env->GetMethodID(blobModuleClass, "resolve",
+                                               "(Ljava/lang/String;II)[B");
+    if (!resolveMethod) {
+      throw std::runtime_error("Couldn't find resolve method in BlobModule");
+    }
+
+    // Resolve the blob data
+    jstring jBlobId = env->NewStringUTF(blobId.c_str());
+    jbyteArray blobData = (jbyteArray)env->CallObjectMethod(
+        _blobModule, resolveMethod, jBlobId, static_cast<jint>(offset),
+        static_cast<jint>(size));
+    env->DeleteLocalRef(jBlobId);
+
+    if (!blobData) {
+      throw std::runtime_error("Couldn't retrieve blob data");
+    }
+
+    // Create a Bitmap from the blob data
+    jclass bitmapFactoryClass =
+        env->FindClass("android/graphics/BitmapFactory");
+    jmethodID decodeByteArrayMethod =
+        env->GetStaticMethodID(bitmapFactoryClass, "decodeByteArray",
+                               "([BII)Landroid/graphics/Bitmap;");
+    jint blobLength = env->GetArrayLength(blobData);
+    jobject bitmap = env->CallStaticObjectMethod(
+        bitmapFactoryClass, decodeByteArrayMethod, blobData, 0, blobLength);
+
+    if (!bitmap) {
+      env->DeleteLocalRef(blobData);
+      throw std::runtime_error("Couldn't decode image");
+    }
+
+    // Get bitmap info
+    AndroidBitmapInfo bitmapInfo;
+    if (AndroidBitmap_getInfo(env, bitmap, &bitmapInfo) !=
+        ANDROID_BITMAP_RESULT_SUCCESS) {
+      env->DeleteLocalRef(blobData);
+      env->DeleteLocalRef(bitmap);
+      throw std::runtime_error("Couldn't get bitmap info");
+    }
+
+    // Lock the bitmap pixels
+    void *bitmapPixels;
+    if (AndroidBitmap_lockPixels(env, bitmap, &bitmapPixels) !=
+        ANDROID_BITMAP_RESULT_SUCCESS) {
+      env->DeleteLocalRef(blobData);
+      env->DeleteLocalRef(bitmap);
+      throw std::runtime_error("Couldn't lock bitmap pixels");
+    }
+
+    // Copy the bitmap data
+    std::vector<uint8_t> imageData(bitmapInfo.height * bitmapInfo.stride);
+    memcpy(imageData.data(), bitmapPixels, imageData.size());
+
+    // Unlock the bitmap pixels
+    AndroidBitmap_unlockPixels(env, bitmap);
+
+    // Clean up JNI references
+    env->DeleteLocalRef(blobData);
+    env->DeleteLocalRef(bitmap);
+
+    ImageData result;
+    result.width = static_cast<int>(bitmapInfo.width);
+    result.height = static_cast<int>(bitmapInfo.height);
+    result.data = imageData;
+    return result;
+  }
+};
+
+} // namespace rnwgpu

package/android/cpp/cpp-adapter.cpp

@@ -1,12 +1,78 @@
-#include "Logger.h"
-#include "RNWebGPUManager.h"
+#include <memory>
+#include <unordered_map>
+
 #include <fbjni/fbjni.h>
 #include <jni.h>
+#include <jsi/jsi.h>
+
+#include <android/native_window_jni.h>
+#include <webgpu/webgpu_cpp.h>
+
+#include "AndroidPlatformContext.h"
+#include "GPUCanvasContext.h"
+#include "RNWebGPUManager.h"
 
 #define LOG_TAG "WebGPUModule"
 
+std::shared_ptr<rnwgpu::RNWebGPUManager> manager;
+
 extern "C" JNIEXPORT void JNICALL Java_com_webgpu_WebGPUModule_initializeNative(
-    JNIEnv *env, jobject /* this */, jlong jsRuntime, jobject jsInvokerHolder) {
+    JNIEnv *env, jobject /* this */, jlong jsRuntime, jobject jsInvokerHolder,
+    jobject blobModule) {
+  auto runtime = reinterpret_cast<facebook::jsi::Runtime *>(jsRuntime);
+  jobject globalBlobModule = env->NewGlobalRef(blobModule);
+  auto platformContext =
+      std::make_shared<rnwgpu::AndroidPlatformContext>(globalBlobModule);
+  manager = std::make_shared<rnwgpu::RNWebGPUManager>(runtime, nullptr,
+                                                      platformContext);
+}
+
+extern "C" JNIEXPORT void JNICALL
+Java_com_webgpu_WebGPUModule_createSurfaceContext(JNIEnv *env, jobject thiz,
+                                                  jlong jsRuntime,
+                                                  jint contextId) {
+  auto canvas = manager->surfacesRegistry.getSurface(contextId);
+  if (canvas == nullptr) {
+    throw std::runtime_error("Surface haven't configured yet");
+  }
+
   auto runtime = reinterpret_cast<facebook::jsi::Runtime *>(jsRuntime);
-  auto manager = new rnwgpu::RNWebGPUManager(runtime, nullptr);
+  auto webGPUContextRegistry = runtime->global().getPropertyAsObject(
+      *runtime, "__WebGPUContextRegistry");
+  if (webGPUContextRegistry.hasProperty(*runtime,
+                                        std::to_string(contextId).c_str())) {
+    // Context already exists, just update width/height
+    auto prop =
+        webGPUContextRegistry
+            .getPropertyAsObject(*runtime, std::to_string(contextId).c_str())
+            .asHostObject<rnwgpu::Canvas>(*runtime);
+    prop->setWidth(canvas->getWidth());
+    prop->setHeight(canvas->getHeight());
+    return;
+  }
+  webGPUContextRegistry.setProperty(
+      *runtime, std::to_string(contextId).c_str(),
+      facebook::jsi::Object::createFromHostObject(*runtime, canvas));
+}
+
+extern "C" JNIEXPORT void JNICALL Java_com_webgpu_WebGPUView_onSurfaceChanged(
+    JNIEnv *env, jobject thiz, jobject surface, jint contextId, jfloat width,
+    jfloat height) {
+  manager->surfacesRegistry.updateSurface(contextId, width, height);
+}
+
+extern "C" JNIEXPORT void JNICALL Java_com_webgpu_WebGPUView_onSurfaceCreate(
+    JNIEnv *env, jobject thiz, jobject surface, jint contextId, jfloat width,
+    jfloat height) {
+  auto window = ANativeWindow_fromSurface(env, surface);
+  // ANativeWindow_acquire(window);
+  manager->surfacesRegistry.addSurface(contextId, window, width, height);
+}
+
+extern "C" JNIEXPORT void JNICALL Java_com_webgpu_WebGPUView_onSurfaceDestroy(
+    JNIEnv *env, jobject thiz, jint contextId) {
+  auto canvas = manager->surfacesRegistry.getSurface(contextId);
+  ANativeWindow_release(
+      reinterpret_cast<ANativeWindow *>(canvas->getSurface()));
+  manager->surfacesRegistry.removeSurface(contextId);
 }

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

@@ -1,39 +1,87 @@
 package com.webgpu;
 
-import com.facebook.jni.HybridData;
+import android.util.Log;
+
+import androidx.annotation.OptIn;
+
+import java.util.HashSet;
+import java.util.Set;
+
 import com.facebook.proguard.annotations.DoNotStrip;
 import com.facebook.react.bridge.ReactApplicationContext;
-import com.facebook.react.bridge.ReactContextBaseJavaModule;
 import com.facebook.react.bridge.JavaScriptContextHolder;
 import com.facebook.react.bridge.ReactMethod;
 import com.facebook.react.common.annotations.FrameworkAPI;
+import com.facebook.react.module.annotations.ReactModule;
+import com.facebook.react.modules.blob.BlobModule;
+import com.facebook.react.modules.blob.BlobProvider;
 import com.facebook.react.turbomodule.core.CallInvokerHolderImpl;
 import com.facebook.react.turbomodule.core.interfaces.CallInvokerHolder;
 
-@FrameworkAPI public class WebGPUModule extends ReactContextBaseJavaModule {
-    static {
-        System.loadLibrary("react-native-webgpu"); // Load the C++ library
-    }
+@ReactModule(name = WebGPUModule.NAME)
+public class WebGPUModule extends NativeWebGPUModuleSpec {
+  static {
+      System.loadLibrary("react-native-wgpu"); // Load the C++ library
+  }
+
+  private final Object mContextLock = new Object();
+  private final Set<Integer> mSurfaceContextsIds = new HashSet<>();
 
-    public WebGPUModule(ReactApplicationContext reactContext) {
-        super(reactContext);
-        // Initialize the C++ module
-        initialize();
+  public WebGPUModule(ReactApplicationContext reactContext) {
+    super(reactContext);
+    // Initialize the C++ module
+    initialize();
+  }
+
+  @OptIn(markerClass = FrameworkAPI.class)
+  @ReactMethod(isBlockingSynchronousMethod = true)
+  public boolean install() {
+    ReactApplicationContext context = getReactApplicationContext();
+    JavaScriptContextHolder jsContext = context.getJavaScriptContextHolder();
+    CallInvokerHolder callInvokerHolder = context.getCatalystInstance().getJSCallInvokerHolder();
+    BlobModule blobModule = getReactApplicationContext().getNativeModule(BlobModule.class);
+    if (blobModule == null) {
+      throw new RuntimeException("React Native's BlobModule was not found!");
     }
+    initializeNative(jsContext.get(), (CallInvokerHolderImpl) callInvokerHolder, blobModule);
+    return true;
+  }
+
+  @OptIn(markerClass = FrameworkAPI.class)
+  @DoNotStrip
+  private native void initializeNative(long jsRuntime, CallInvokerHolderImpl jsInvoker, BlobModule blobModule);
+
+  @ReactMethod(isBlockingSynchronousMethod = true)
+  public boolean createSurfaceContext(double contextId) {
+    waitForNativeSurface((int)contextId);
+
+    ReactApplicationContext context = getReactApplicationContext();
+    JavaScriptContextHolder jsContext = context.getJavaScriptContextHolder();
+    createSurfaceContext(jsContext.get(), (int)contextId);
+    return true;
+  }
+
+  @DoNotStrip
+  private native void createSurfaceContext(long jsRuntime, int contextId);
 
-    @Override
-    public String getName() {
-        return "WebGPUModule";
+  private void waitForNativeSurface(Integer contextId) {
+    synchronized (mContextLock) {
+      while (!mSurfaceContextsIds.contains(contextId)) {
+        try {
+          mContextLock.wait();
+        } catch (InterruptedException e) {
+          Log.e("RNWebGPU", "Unable to create a context");
+          return;
+        }
+      }
     }
+  }
 
-    @ReactMethod(isBlockingSynchronousMethod = true)
-    public void install() {
-      ReactApplicationContext context = getReactApplicationContext();
-      JavaScriptContextHolder jsContext = context.getJavaScriptContextHolder();
-      CallInvokerHolder callInvokerHolder = context.getCatalystInstance().getJSCallInvokerHolder();
-      initializeNative(jsContext.get(),  (CallInvokerHolderImpl) callInvokerHolder);
+  protected void onSurfaceCreated(Integer contextId) {
+    synchronized (mContextLock) {
+      mSurfaceContextsIds.add(contextId);
+      mContextLock.notifyAll();
     }
+  }
 
-    @DoNotStrip
-    private native void initializeNative(long jsRuntime, CallInvokerHolderImpl jsInvoker);
 }