react-native-wgpu 0.1.0 → 0.1.2

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,26 @@
+#pragma once
+
+#include <memory>
+
+#include "webgpu/webgpu_cpp.h"
+
+#include "PlatformContext.h"
+#include "RNWebGPUManager.h"
+
+namespace rnwgpu {
+class AndroidPlatformContext : public PlatformContext {
+public:
+  AndroidPlatformContext() = default;
+  ~AndroidPlatformContext() = default;
+
+  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);
+  }
+};
+
+} // namespace rnwgpu

package/android/cpp/cpp-adapter.cpp

@@ -1,12 +1,75 @@
-#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) {
   auto runtime = reinterpret_cast<facebook::jsi::Runtime *>(jsRuntime);
-  auto manager = new rnwgpu::RNWebGPUManager(runtime, nullptr);
+  auto platformContext = std::make_shared<rnwgpu::AndroidPlatformContext>();
+  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 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,81 @@
 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.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
+  }
 
-    public WebGPUModule(ReactApplicationContext reactContext) {
-        super(reactContext);
-        // Initialize the C++ module
-        initialize();
-    }
+  private final Object mContextLock = new Object();
+  private final Set<Integer> mSurfaceContextsIds = new HashSet<>();
+
+  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();
+    initializeNative(jsContext.get(), (CallInvokerHolderImpl) callInvokerHolder);
+    return true;
+  }
+
+  @OptIn(markerClass = FrameworkAPI.class)
+  @DoNotStrip
+  private native void initializeNative(long jsRuntime, CallInvokerHolderImpl jsInvoker);
+
+  @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);
 }

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

@@ -1,24 +1,79 @@
 package com.webgpu;
 
-import androidx.annotation.Nullable;
+import androidx.annotation.NonNull;
 
 import android.content.Context;
-import android.util.AttributeSet;
+import android.view.Surface;
+import android.view.SurfaceHolder;
+import android.view.SurfaceView;
 
-import android.view.View;
+import com.facebook.proguard.annotations.DoNotStrip;
+import com.facebook.react.uimanager.ThemedReactContext;
 
-public class WebGPUView extends View {
+public class WebGPUView extends SurfaceView implements SurfaceHolder.Callback {
+
+  private Integer mContextId;
+  private WebGPUModule mModule;
 
   public WebGPUView(Context context) {
     super(context);
+    getHolder().addCallback(this);
+  }
+
+  public void setContextId(Integer contextId) {
+    if (mModule == null) {
+      Context context = getContext();
+      if (context instanceof ThemedReactContext) {
+        mModule = ((ThemedReactContext) context).getReactApplicationContext().getNativeModule(WebGPUModule.class);
+      }
+    }
+    mContextId = contextId;
+  }
+
+  @Override
+  protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
+    super.onLayout(changed, left, top, right, bottom);
   }
 
-  public WebGPUView(Context context, @Nullable AttributeSet attrs) {
-    super(context, attrs);
+  @Override
+  public void surfaceCreated(@NonNull SurfaceHolder holder) {
+    float density = getResources().getDisplayMetrics().density;
+    float width = getWidth() / density;
+    float height = getHeight() / density;
+    onSurfaceCreate(holder.getSurface(), mContextId, width, height);
+    mModule.onSurfaceCreated(mContextId);
   }
 
-  public WebGPUView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
-    super(context, attrs, defStyleAttr);
+  @Override
+  public void surfaceChanged(@NonNull SurfaceHolder holder, int format, int width, int height) {
+    float density = getResources().getDisplayMetrics().density;
+    float scaledWidth = width / density;
+    float scaledHeight = height / density;
+    onSurfaceChanged(holder.getSurface(), mContextId, scaledWidth, scaledHeight);
   }
 
+  @Override
+  public void surfaceDestroyed(@NonNull SurfaceHolder holder) {
+    onSurfaceDestroy(mContextId);
+  }
+
+  @DoNotStrip
+  private native void onSurfaceCreate(
+    Surface surface,
+    int contextId,
+    float width,
+    float height
+  );
+
+  @DoNotStrip
+  private native void onSurfaceChanged(
+    Surface surface,
+    int contextId,
+    float width,
+    float height
+  );
+
+
+  @DoNotStrip
+  private native void onSurfaceDestroy(int contextId);
 }

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

@@ -1,8 +1,6 @@
 package com.webgpu;
 
-import android.graphics.Color;
-
-import androidx.annotation.Nullable;
+import androidx.annotation.NonNull;
 
 import com.facebook.react.module.annotations.ReactModule;
 import com.facebook.react.uimanager.ThemedReactContext;
@@ -13,6 +11,7 @@ public class WebGPUViewManager extends WebGPUViewManagerSpec<WebGPUView> {
 
   public static final String NAME = "WebGPUView";
 
+  @NonNull
   @Override
   public String getName() {
     return NAME;
@@ -24,8 +23,8 @@ public class WebGPUViewManager extends WebGPUViewManagerSpec<WebGPUView> {
   }
 
   @Override
-  @ReactProp(name = "color")
-  public void setColor(WebGPUView view, @Nullable String color) {
-    view.setBackgroundColor(Color.parseColor(color));
+  @ReactProp(name = "contextId")
+  public void setContextId(WebGPUView view, int value) {
+    view.setContextId(value);
   }
 }

package/android/src/newarch/{WgpuViewManagerSpec.java → com/webgpu/WebGPUViewManagerSpec.java}

@@ -6,14 +6,14 @@ import androidx.annotation.Nullable;
 
 import com.facebook.react.uimanager.SimpleViewManager;
 import com.facebook.react.uimanager.ViewManagerDelegate;
-import com.facebook.react.viewmanagers.WgpuViewManagerDelegate;
-import com.facebook.react.viewmanagers.WgpuViewManagerInterface;
+import com.facebook.react.viewmanagers.WebGPUViewManagerDelegate;
+import com.facebook.react.viewmanagers.WebGPUViewManagerInterface;
 
-public abstract class WgpuViewManagerSpec<T extends View> extends SimpleViewManager<T> implements WgpuViewManagerInterface<T> {
+public abstract class WebGPUViewManagerSpec<T extends View> extends SimpleViewManager<T> implements WebGPUViewManagerInterface<T> {
   private final ViewManagerDelegate<T> mDelegate;
 
-  public WgpuViewManagerSpec() {
-    mDelegate = new WgpuViewManagerDelegate(this);
+  public WebGPUViewManagerSpec() {
+    mDelegate = new WebGPUViewManagerDelegate(this);
   }
 
   @Nullable

package/android/src/oldarch/com/webgpu/NativeWebGPUModuleSpec.java

@@ -0,0 +1,23 @@
+package com.webgpu;
+
+import androidx.annotation.NonNull;
+import androidx.annotation.Nullable;
+
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.ReactContextBaseJavaModule;
+
+class NativeWebGPUModuleSpec extends ReactContextBaseJavaModule {
+
+  public static final String NAME = "WebGPUModule";
+
+  public NativeWebGPUModuleSpec(@Nullable ReactApplicationContext reactContext) {
+    super(reactContext);
+  }
+
+  @NonNull
+  @Override
+  public String getName() {
+    return NAME;
+  }
+
+}