react-native-wgpu 0.1.2 → 0.1.3

package/src/Canvas.tsx

@@ -12,6 +12,13 @@ function generateContextId() {
 declare global {
   // eslint-disable-next-line no-var
   var __WebGPUContextRegistry: Record<number, NativeCanvas>;
+  // eslint-disable-next-line no-var
+  var RNWebGPU: {
+    gpu: GPU;
+    MakeWebGPUCanvasContext: (nativeCanvas: NativeCanvas) => CanvasContext;
+    DecodeToUTF8: (buffer: NodeJS.ArrayBufferView | ArrayBuffer) => string;
+    createImageBitmap: typeof createImageBitmap;
+  };
 }
 
 export interface NativeCanvas {
@@ -51,9 +58,7 @@ export const Canvas = forwardRef<CanvasRef, ViewProps>((props, ref) => {
       if (!nativeSurface) {
         return null;
       }
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-expect-error
-      const ctx = navigator.MakeWebGPUCanvasContext(nativeSurface);
+      const ctx = RNWebGPU.MakeWebGPUCanvasContext(nativeSurface);
       return ctx;
     },
   }));

package/src/index.tsx

@@ -3,6 +3,7 @@ import WebGPUNativeModule from "./NativeWebGPUModule";
 
 export * from "./Canvas";
 export * from "./WebGPUViewNativeComponent";
+export * from "./utils";
 export { default as WebGPUModule } from "./NativeWebGPUModule";
 
 const GPU: any = {};
@@ -175,3 +176,21 @@ global.GPUTexture = GPUTexture;
 global.GPUTextureView = GPUTextureView;
 
 WebGPUNativeModule.install();
+
+if (!navigator) {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-expect-error
+  navigator = {};
+}
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-expect-error
+navigator.gpu = RNWebGPU.gpu;
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-expect-error
+navigator.userAgent = "react-native";
+
+global.createImageBitmap =
+  global.createImageBitmap ??
+  ((...params: Parameters<typeof createImageBitmap>) =>
+    new Promise((resolve) => resolve(RNWebGPU.createImageBitmap(...params))));

package/src/utils.ts

@@ -0,0 +1,40 @@
+import { useEffect, useRef } from "react";
+
+import type { CanvasRef } from "./Canvas";
+
+type Unsubscribe = () => void;
+
+export const warnIfNotHardwareAccelerated = (adapter: GPUAdapter) => {
+  if (adapter.info.architecture === "swiftshader") {
+    console.warn(
+      "GPUAdapter is not hardware accelerated. This is common on Android emulators. Rendering will be slow.",
+    );
+  }
+};
+
+export const useCanvasEffect = (
+  effect: () => void | Unsubscribe | Promise<void | Unsubscribe>,
+) => {
+  const ref = useRef<CanvasRef>(null);
+  const unsubscribe = useRef<Unsubscribe>();
+  useEffect(() => {
+    requestAnimationFrame(async () => {
+      // const adapter = await navigator.gpu.requestAdapter();
+      // if (!adapter) {
+      //   return;
+      // }
+      // const device = await adapter.requestDevice();
+      const unsub = await effect();
+      if (unsub) {
+        unsubscribe.current = unsub;
+      }
+    });
+    return () => {
+      if (unsubscribe.current) {
+        unsubscribe.current();
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return ref;
+};

package/cpp/rnwgpu/api/ImageData.h

@@ -1,50 +0,0 @@
-#pragma once
-
-#include <memory>
-
-#include "ArrayBuffer.h"
-
-namespace rnwgpu {
-
-struct ImageData {
-  std::shared_ptr<ArrayBuffer> data;
-  size_t width;
-  size_t height;
-};
-
-} // namespace rnwgpu
-
-namespace margelo {
-
-using namespace rnwgpu; // NOLINT(build/namespaces)
-
-template <> struct JSIConverter<std::shared_ptr<rnwgpu::ImageData>> {
-  static std::shared_ptr<rnwgpu::ImageData>
-  fromJSI(jsi::Runtime &runtime, const jsi::Value &arg, bool outOfBounds) {
-    auto result = std::make_unique<rnwgpu::ImageData>();
-    if (!outOfBounds && arg.isObject()) {
-      auto obj = arg.getObject(runtime);
-      if (obj.hasProperty(runtime, "data")) {
-        auto prop = obj.getProperty(runtime, "data");
-        result->data = JSIConverter<std::shared_ptr<ArrayBuffer>>::fromJSI(
-            runtime, prop, false);
-      }
-      if (obj.hasProperty(runtime, "width")) {
-        auto prop = obj.getProperty(runtime, "width");
-        result->width = prop.getNumber();
-      }
-      if (obj.hasProperty(runtime, "height")) {
-        auto prop = obj.getProperty(runtime, "height");
-        result->height = prop.getNumber();
-      }
-    }
-
-    return result;
-  }
-  static jsi::Value toJSI(jsi::Runtime &runtime,
-                          std::shared_ptr<rnwgpu::ImageData> arg) {
-    throw std::runtime_error("Invalid ImageData::toJSI()");
-  }
-};
-
-} // namespace margelo

package/cpp/rnwgpu/api/Navigator.h

@@ -1,46 +0,0 @@
-#pragma once
-
-#include <memory>
-
-#include "GPU.h"
-#include "GPUCanvasContext.h"
-
-namespace rnwgpu {
-
-namespace m = margelo;
-
-class Navigator : public m::HybridObject {
-public:
-  explicit Navigator(std::shared_ptr<GPU> gpu,
-                     std::shared_ptr<PlatformContext> platformContext)
-      : HybridObject("Navigator"), _gpu(gpu),
-        _platformContext(platformContext) {}
-
-  std::shared_ptr<GPU> getGPU() { return _gpu; }
-
-  std::shared_ptr<GPUCanvasContext>
-  MakeWebGPUCanvasContext(std::shared_ptr<Canvas> canvas) {
-    auto nativeSurface = canvas->getSurface();
-    auto width = canvas->getWidth();
-    auto height = canvas->getHeight();
-    auto surface = _platformContext->makeSurface(
-        _gpu->get(), reinterpret_cast<void *>(nativeSurface), width, height);
-    if (surface == nullptr) {
-      throw std::runtime_error("null surface");
-    }
-    auto ctx = std::make_shared<GPUCanvasContext>(surface, canvas);
-    return ctx;
-  }
-
-  void loadHybridMethods() override {
-    registerHybridGetter("gpu", &Navigator::getGPU, this);
-    registerHybridMethod("MakeWebGPUCanvasContext",
-                         &Navigator::MakeWebGPUCanvasContext, this);
-  }
-
-private:
-  std::shared_ptr<GPU> _gpu;
-  std::shared_ptr<PlatformContext> _platformContext;
-};
-
-} // namespace rnwgpu