react-native-wgpu 0.1.0 → 0.1.3

package/libs/ios/libwebgpu_dawn.xcframework/Info.plist

@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>AvailableLibraries</key>
+	<array>
+		<dict>
+			<key>BinaryPath</key>
+			<string>libwebgpu_dawn.a</string>
+			<key>LibraryIdentifier</key>
+			<string>ios-arm64_x86_64-simulator</string>
+			<key>LibraryPath</key>
+			<string>libwebgpu_dawn.a</string>
+			<key>SupportedArchitectures</key>
+			<array>
+				<string>arm64</string>
+				<string>x86_64</string>
+			</array>
+			<key>SupportedPlatform</key>
+			<string>ios</string>
+			<key>SupportedPlatformVariant</key>
+			<string>simulator</string>
+		</dict>
+		<dict>
+			<key>BinaryPath</key>
+			<string>libwebgpu_dawn.a</string>
+			<key>LibraryIdentifier</key>
+			<string>ios-arm64</string>
+			<key>LibraryPath</key>
+			<string>libwebgpu_dawn.a</string>
+			<key>SupportedArchitectures</key>
+			<array>
+				<string>arm64</string>
+			</array>
+			<key>SupportedPlatform</key>
+			<string>ios</string>
+		</dict>
+	</array>
+	<key>CFBundlePackageType</key>
+	<string>XFWK</string>
+	<key>XCFrameworkFormatVersion</key>
+	<string>1.0</string>
+</dict>
+</plist>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-wgpu",
-  "version": "0.1.0",
+  "version": "0.1.3",
   "description": "React Native WebGPU",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -14,6 +14,8 @@
     "ios",
     "cpp",
     "*.podspec",
+    "libs/**",
+    "!scripts",
     "!ios/build",
     "!android/build",
     "!android/gradle",
@@ -27,10 +29,12 @@
   ],
   "scripts": {
     "example": "yarn workspace react-native-webgpu-example",
-    "test": "jest",
+    "test": "jest -i",
+    "test:ref": "REFERENCE=true yarn test -i",
     "tsc": "tsc --noEmit",
     "lint": "eslint \"**/*.{ts,tsx}\"",
     "clean": "del-cli android/build example/android/build example/android/app/build example/ios/build lib",
+    "prepare": "bob build",
     "build-dawn": "ts-node scripts/build/dawn.ts",
     "clean-dawn": "rimraf ./libs && rimraf ../externals/dawn/out",
     "clang-format": "yarn clang-format-ios && yarn clang-format-android && yarn clang-format-common",
@@ -48,14 +52,14 @@
   ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/wcandillon/react-native-wgpu.git"
+    "url": "git+https://github.com/wcandillon/react-native-webgpu.git"
   },
   "author": "William Candillon <wcandillon@gmail.com> (https://github.com/wcandillon)",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/wcandillon/react-native-wgpu/issues"
+    "url": "https://github.com/wcandillon/react-native-webgpu/issues"
   },
-  "homepage": "https://github.com/wcandillon/react-native-wgpu#readme",
+  "homepage": "https://github.com/wcandillon/react-native-webgpu#readme",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
@@ -64,7 +68,10 @@
     "@types/jest": "^29.5.12",
     "@types/lodash": "^4.17.5",
     "@types/node": "^20.14.7",
+    "@types/pixelmatch": "5.2.4",
+    "@types/pngjs": "^6.0.5",
     "@types/react": "^18.2.44",
+    "@types/seedrandom": "^3.0.8",
     "@types/ws": "^8.5.10",
     "@typescript-eslint/eslint-plugin": "^7.13.1",
     "@webgpu/types": "^0.1.42",
@@ -76,19 +83,26 @@
     "eslint-plugin-prettier": "^5.1.3",
     "jest": "^29.7.0",
     "lodash": "^4.17.21",
+    "pixelmatch": "5.3.0",
+    "pngjs": "^7.0.0",
     "prettier": "^3.0.3",
+    "puppeteer": "22",
     "react": "18.2.0",
     "react-native": "0.74.2",
     "react-native-builder-bob": "^0.23.2",
     "rimraf": "^5.0.7",
+    "seedrandom": "^3.0.5",
+    "teapot": "^1.0.0",
     "ts-morph": "^22.0.0",
     "ts-node": "^10.9.2",
     "turbo": "^1.10.7",
     "typescript": "^5.2.2",
+    "wgpu-matrix": "^3.0.2",
     "ws": "^8.18.0"
   },
   "resolutions": {
-    "@types/react": "^18.2.44"
+    "@types/react": "^18.2.44",
+    "@webgpu/types": "^0.1.42"
   },
   "peerDependencies": {
     "react": "*",
@@ -114,7 +128,10 @@
   },
   "codegenConfig": {
     "name": "RNWgpuViewSpec",
-    "type": "components",
-    "jsSrcsDir": "src"
+    "type": "all",
+    "jsSrcsDir": "src",
+    "android": {
+      "javaPackageName": "com.webgpu"
+    }
   }
 }

package/{react-native-webgpu.podspec → react-native-wgpu.podspec}

@@ -4,7 +4,7 @@ package = JSON.parse(File.read(File.join(__dir__, "package.json")))
 folly_compiler_flags = '-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1 -Wno-comma -Wno-shorten-64-to-32'
 
 Pod::Spec.new do |s|
-  s.name         = "react-native-webgpu"
+  s.name         = "react-native-wgpu"
   s.version      = package["version"]
   s.summary      = package["description"]
   s.homepage     = package["homepage"]
@@ -19,16 +19,13 @@ Pod::Spec.new do |s|
     "cpp/**/*.{h,cpp}"
   ]
 
-  s.pod_target_xcconfig = {
-    "HEADER_SEARCH_PATHS" => "$(PODS_TARGET_SRCROOT)/cpp"
-  }
   s.ios.vendored_frameworks = [
-    'libs/ios/libwebgpu_dawn.xcframework', 
-    'libs/ios/libdawn_common.xcframework', 
-    'libs/ios/libdawn_native.xcframework',
-    'libs/ios/libdawn_proc.xcframework'
+    'libs/ios/libwebgpu_dawn.xcframework',
   ]
-  s.vendored_frameworks = "$(PODS_TARGET_SRCROOT)/libs/ios/libwebgpu_dawn.xcframework"
+
+  s.pod_target_xcconfig = {
+    'HEADER_SEARCH_PATHS' => '$(PODS_TARGET_SRCROOT)/cpp',
+  }
 
   # Use install_modules_dependencies helper to install the dependencies if React Native version >=0.71.0.
   # See https://github.com/facebook/react-native/blob/febf6b7f33fdb4904669f99d795eba4c0f95d7bf/scripts/cocoapods/new_architecture.rb#L79.

package/src/Canvas.tsx

@@ -0,0 +1,73 @@
+import type { ViewProps } from "react-native";
+import { forwardRef, useEffect, useImperativeHandle, useState } from "react";
+
+import WebGPUNativeView from "./WebGPUViewNativeComponent";
+import WebGPUNativeModule from "./NativeWebGPUModule";
+
+let CONTEXT_COUNTER = 1;
+function generateContextId() {
+  return CONTEXT_COUNTER++;
+}
+
+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 {
+  surface: bigint;
+  width: number;
+  height: number;
+  clientWidth: number;
+  clientHeight: number;
+}
+
+global.__WebGPUContextRegistry = {};
+const WebGPUContextRegistry = global.__WebGPUContextRegistry;
+
+type CanvasContext = GPUCanvasContext & {
+  present: () => void;
+  getNativeSurface: () => NativeCanvas;
+};
+
+export interface CanvasRef {
+  getContext(contextName: "webgpu"): CanvasContext | null;
+}
+
+export const Canvas = forwardRef<CanvasRef, ViewProps>((props, ref) => {
+  const [contextId, _] = useState(() => generateContextId());
+
+  useImperativeHandle(ref, () => ({
+    getNativeSurface: () => {
+      WebGPUNativeModule.createSurfaceContext(contextId);
+      return WebGPUContextRegistry[contextId];
+    },
+    getContext(contextName: "webgpu"): CanvasContext | null {
+      if (contextName !== "webgpu") {
+        throw new Error(`[WebGPU] Unsupported context: ${contextName}`);
+      }
+      WebGPUNativeModule.createSurfaceContext(contextId);
+      const nativeSurface = WebGPUContextRegistry[contextId];
+      if (!nativeSurface) {
+        return null;
+      }
+      const ctx = RNWebGPU.MakeWebGPUCanvasContext(nativeSurface);
+      return ctx;
+    },
+  }));
+
+  useEffect(() => {
+    return () => {
+      delete WebGPUContextRegistry[contextId];
+    };
+  }, [contextId]);
+
+  return <WebGPUNativeView {...props} contextId={contextId} />;
+});

package/src/{WebGPUNativeModule.ts → NativeWebGPUModule.ts}

@@ -3,6 +3,7 @@ import { TurboModuleRegistry } from "react-native";
 
 export interface Spec extends TurboModule {
   install: () => boolean;
+  createSurfaceContext: (contextId: number) => boolean;
 }
 
 // eslint-disable-next-line import/no-default-export

package/src/WebGPUViewNativeComponent.ts

@@ -1,8 +1,9 @@
 import codegenNativeComponent from "react-native/Libraries/Utilities/codegenNativeComponent";
 import type { ViewProps } from "react-native";
+import type { Int32 } from "react-native/Libraries/Types/CodegenTypes";
 
 interface NativeProps extends ViewProps {
-  color?: string;
+  contextId?: Int32;
 }
 
 // eslint-disable-next-line import/no-default-export

package/src/index.tsx

@@ -1,13 +1,196 @@
-import WebGPUNativeModule from "./WebGPUNativeModule";
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import WebGPUNativeModule from "./NativeWebGPUModule";
 
-export { default as WebGPUView } from "./WebGPUViewNativeComponent";
+export * from "./Canvas";
 export * from "./WebGPUViewNativeComponent";
-export { default as WebGPUModule } from "./WebGPUNativeModule";
+export * from "./utils";
+export { default as WebGPUModule } from "./NativeWebGPUModule";
 
-declare global {
-  // eslint-disable-next-line no-var
-  var gpu: GPU;
-}
+const GPU: any = {};
+GPU[Symbol.hasInstance] = function (instance: object) {
+  return "__brand" in instance && instance.__brand === "GPU";
+};
+
+const GPUAdapter: any = {};
+GPUAdapter[Symbol.hasInstance] = function (instance: object) {
+  return "__brand" in instance && instance.__brand === "GPUAdapter";
+};
+
+const GPUAdapterInfo: any = {};
+GPUAdapterInfo[Symbol.hasInstance] = function (instance: object) {
+  return "__brand" in instance && instance.__brand === "GPUAdapterInfo";
+};
+
+const GPUBindGroup: any = {};
+GPUBindGroup[Symbol.hasInstance] = function (instance: object) {
+  return "__brand" in instance && instance.__brand === "GPUBindGroup";
+};
+
+const GPUBindGroupLayout: any = {};
+GPUBindGroupLayout[Symbol.hasInstance] = function (instance: object) {
+  return "__brand" in instance && instance.__brand === "GPUBindGroupLayout";
+};
+
+const GPUBuffer: any = {};
+GPUBuffer[Symbol.hasInstance] = function (instance: object) {
+  return "__brand" in instance && instance.__brand === "GPUBuffer";
+};
+
+const GPUCanvasContext: any = {};
+GPUCanvasContext[Symbol.hasInstance] = function (instance: object) {
+  return "__brand" in instance && instance.__brand === "GPUCanvasContext";
+};
+
+const GPUCommandBuffer: any = {};
+GPUCommandBuffer[Symbol.hasInstance] = function (instance: object) {
+  return "__brand" in instance && instance.__brand === "GPUCommandBuffer";
+};
+
+const GPUCommandEncoder: any = {};
+GPUCommandEncoder[Symbol.hasInstance] = function (instance: object) {
+  return "__brand" in instance && instance.__brand === "GPUCommandEncoder";
+};
+
+const GPUCompilationInfo: any = {};
+GPUCompilationInfo[Symbol.hasInstance] = function (instance: object) {
+  return "__brand" in instance && instance.__brand === "GPUCompilationInfo";
+};
+
+const GPUCompilationMessage: any = {};
+GPUCompilationMessage[Symbol.hasInstance] = function (instance: object) {
+  return "__brand" in instance && instance.__brand === "GPUCompilationMessage";
+};
+
+const GPUComputePassEncoder: any = {};
+GPUComputePassEncoder[Symbol.hasInstance] = function (instance: object) {
+  return "__brand" in instance && instance.__brand === "GPUComputePassEncoder";
+};
+
+const GPUComputePipeline: any = {};
+GPUComputePipeline[Symbol.hasInstance] = function (instance: object) {
+  return "__brand" in instance && instance.__brand === "GPUComputePipeline";
+};
+
+const GPUDevice: any = {};
+GPUDevice[Symbol.hasInstance] = function (instance: object) {
+  return "__brand" in instance && instance.__brand === "GPUDevice";
+};
+
+const GPUDeviceLostInfo: any = {};
+GPUDeviceLostInfo[Symbol.hasInstance] = function (instance: object) {
+  return "__brand" in instance && instance.__brand === "GPUDeviceLostInfo";
+};
+
+const GPUError: any = {};
+GPUError[Symbol.hasInstance] = function (instance: object) {
+  return "__brand" in instance && instance.__brand === "GPUError";
+};
+
+const GPUExternalTexture: any = {};
+GPUExternalTexture[Symbol.hasInstance] = function (instance: object) {
+  return "__brand" in instance && instance.__brand === "GPUExternalTexture";
+};
+
+const GPUPipelineLayout: any = {};
+GPUPipelineLayout[Symbol.hasInstance] = function (instance: object) {
+  return "__brand" in instance && instance.__brand === "GPUPipelineLayout";
+};
+
+const GPUQuerySet: any = {};
+GPUQuerySet[Symbol.hasInstance] = function (instance: object) {
+  return "__brand" in instance && instance.__brand === "GPUQuerySet";
+};
+
+const GPUQueue: any = {};
+GPUQueue[Symbol.hasInstance] = function (instance: object) {
+  return "__brand" in instance && instance.__brand === "GPUQueue";
+};
+
+const GPURenderBundle: any = {};
+GPURenderBundle[Symbol.hasInstance] = function (instance: object) {
+  return "__brand" in instance && instance.__brand === "GPURenderBundle";
+};
+
+const GPURenderBundleEncoder: any = {};
+GPURenderBundleEncoder[Symbol.hasInstance] = function (instance: object) {
+  return "__brand" in instance && instance.__brand === "GPURenderBundleEncoder";
+};
+
+const GPURenderPassEncoder: any = {};
+GPURenderPassEncoder[Symbol.hasInstance] = function (instance: object) {
+  return "__brand" in instance && instance.__brand === "GPURenderPassEncoder";
+};
+
+const GPURenderPipeline: any = {};
+GPURenderPipeline[Symbol.hasInstance] = function (instance: object) {
+  return "__brand" in instance && instance.__brand === "GPURenderPipeline";
+};
+
+const GPUSampler: any = {};
+GPUSampler[Symbol.hasInstance] = function (instance: object) {
+  return "__brand" in instance && instance.__brand === "GPUSampler";
+};
+
+const GPUShaderModule: any = {};
+GPUShaderModule[Symbol.hasInstance] = function (instance: object) {
+  return "__brand" in instance && instance.__brand === "GPUShaderModule";
+};
+
+const GPUTexture: any = {};
+GPUTexture[Symbol.hasInstance] = function (instance: object) {
+  return "__brand" in instance && instance.__brand === "GPUTexture";
+};
+
+const GPUTextureView: any = {};
+GPUTextureView[Symbol.hasInstance] = function (instance: object) {
+  return "__brand" in instance && instance.__brand === "GPUTextureView";
+};
+
+global.GPU = GPU;
+global.GPUAdapter = GPUAdapter;
+global.GPUAdapterInfo = GPUAdapterInfo;
+global.GPUBindGroup = GPUBindGroup;
+global.GPUBindGroupLayout = GPUBindGroupLayout;
+global.GPUBuffer = GPUBuffer;
+global.GPUCanvasContext = GPUCanvasContext;
+global.GPUCommandBuffer = GPUCommandBuffer;
+global.GPUCommandEncoder = GPUCommandEncoder;
+global.GPUCompilationInfo = GPUCompilationInfo;
+global.GPUCompilationMessage = GPUCompilationMessage;
+global.GPUComputePassEncoder = GPUComputePassEncoder;
+global.GPUComputePipeline = GPUComputePipeline;
+global.GPUDevice = GPUDevice;
+global.GPUDeviceLostInfo = GPUDeviceLostInfo;
+global.GPUError = GPUError;
+global.GPUExternalTexture = GPUExternalTexture;
+global.GPUPipelineLayout = GPUPipelineLayout;
+global.GPUQuerySet = GPUQuerySet;
+global.GPUQueue = GPUQueue;
+global.GPURenderBundle = GPURenderBundle;
+global.GPURenderBundleEncoder = GPURenderBundleEncoder;
+global.GPURenderPassEncoder = GPURenderPassEncoder;
+global.GPURenderPipeline = GPURenderPipeline;
+global.GPUSampler = GPUSampler;
+global.GPUShaderModule = GPUShaderModule;
+global.GPUTexture = GPUTexture;
+global.GPUTextureView = GPUTextureView;
 
 WebGPUNativeModule.install();
-export const { gpu } = global;
+
+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/android/src/main/AndroidManifestNew.xml

@@ -1,2 +0,0 @@
-<manifest xmlns:android="http://schemas.android.com/apk/res/android">
-</manifest>

package/cpp/rnwgpu/MutableBuffer.h

@@ -1,48 +0,0 @@
-#pragma once
-#include <jsi/jsi.h>
-
-#include <memory>
-
-#include "RNFJSIConverter.h"
-
-namespace rnwgpu {
-
-namespace jsi = facebook::jsi;
-
-struct MutableJSIBuffer : jsi::MutableBuffer {
-  MutableJSIBuffer(void *data, size_t size) : _data(data), _size(size) {}
-
-  size_t size() const override { return _size; }
-
-  uint8_t *data() override { return reinterpret_cast<uint8_t *>(_data); }
-
-  void *_data;
-  size_t _size;
-};
-
-} // namespace rnwgpu
-
-namespace margelo {
-
-template <> struct JSIConverter<std::shared_ptr<rnwgpu::MutableJSIBuffer>> {
-  static std::shared_ptr<rnwgpu::MutableJSIBuffer>
-  fromJSI(jsi::Runtime &runtime, const jsi::Value &arg, bool outOfBound) {
-    if (!arg.getObject(runtime).isArrayBuffer(runtime)) {
-      throw std::runtime_error(
-          "Buffer::fromJSI: argument is not an ArrayBuffer");
-    }
-    auto data = arg.getObject(runtime).getArrayBuffer(runtime);
-    auto result = std::make_unique<rnwgpu::MutableJSIBuffer>(
-        data.data(runtime), data.size(runtime));
-    return result;
-  }
-
-  static jsi::Value toJSI(jsi::Runtime &runtime,
-                          std::shared_ptr<rnwgpu::MutableJSIBuffer> arg) {
-    auto val = jsi::ArrayBuffer(runtime, arg);
-    auto d = val.data(runtime);
-    return val;
-  }
-};
-
-} // namespace margelo

package/cpp/rnwgpu/api/GPUUncapturedErrorEvent.h

@@ -1,33 +0,0 @@
-#pragma once
-
-#include <future>
-#include <memory>
-#include <string>
-
-#include "Unions.h"
-#include <RNFHybridObject.h>
-
-#include "MutableBuffer.h"
-
-#include "webgpu/webgpu_cpp.h"
-
-namespace rnwgpu {
-
-namespace m = margelo;
-
-class GPUUncapturedErrorEvent : public m::HybridObject {
-public:
-  explicit GPUUncapturedErrorEvent(wgpu::UncapturedErrorEvent instance)
-      : HybridObject("GPUUncapturedErrorEvent"), _instance(instance) {}
-
-public:
-  std::string getBrand() { return _name; }
-
-  void loadHybridMethods() override {
-    registerHybridGetter("__brand", &GPUUncapturedErrorEvent::getBrand, this);
-  }
-
-private:
-  wgpu::UncapturedErrorEvent _instance;
-};
-} // namespace rnwgpu