react-native-webgpu 0.5.11

package/package.json

@@ -0,0 +1,139 @@
+{
+  "name": "react-native-webgpu",
+  "version": "0.5.11",
+  "description": "React Native WebGPU",
+  "main": "lib/commonjs/index",
+  "module": "lib/module/index",
+  "types": "lib/typescript/src/index.d.ts",
+  "react-native": "src/index",
+  "source": "src/index",
+  "files": [
+    "src/**",
+    "lib/**",
+    "!**/__tests__/**",
+    "android/build.gradle",
+    "android/CMakeLists.txt",
+    "android/cpp/**",
+    "android/src/**",
+    "cpp/**/*.{h,cpp}",
+    "apple/**",
+    "libs/**",
+    "*.podspec"
+  ],
+  "dawn": "chromium/7770",
+  "scripts": {
+    "test": "NODE_OPTIONS='--experimental-require-module' jest -i",
+    "test:ref": "REFERENCE=true NODE_OPTIONS='--experimental-require-module' jest -i",
+    "lint": "eslint . --ext .ts,.tsx  --max-warnings 0 --cache --fix",
+    "tsc": "tsc --noEmit",
+    "build": "bob build",
+    "build-dawn": "tsx 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",
+    "clang-format-ios": "find apple/ -iname \"*.h\" -o -iname \"*.mm\" -o -iname \"*.cpp\" | xargs clang-format -i",
+    "clang-format-android": "find android/cpp/ -iname \"*.h\" -o -iname \"*.m\" -o -iname \"*.cpp\" | xargs clang-format -i",
+    "clang-format-common": "find cpp/rnwgpu -iname \"*.h\" -o -iname \"*.m\" -o -iname \"*.cpp\" | xargs clang-format -i",
+    "cpplint": "cpplint --linelength=230 --filter=-legal/copyright,-whitespace/indent,-whitespace/comments,-whitespace/ending_newline,-build/include_order,-runtime/references,-readability/todo,-whitespace/blank_line,-whitespace/todo,-runtime/int,-build/c++11,-whitespace/parens --exclude=example --exclude=android/.cxx --exclude=cpp/webgpu --exclude=cpp/dawn --exclude=ios --exclude=android/build --exclude=node_modules --recursive .",
+    "install-dawn": "tsx scripts/install-dawn.ts",
+    "codegen": "tsx scripts/codegen/codegen.ts && yarn clang-format"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "repository": {
+    "type": "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-webgpu/issues"
+  },
+  "homepage": "https://github.com/wcandillon/react-native-webgpu#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@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",
+    "@webgpu/types": "0.1.65",
+    "baseline-browser-mapping": "^2.9.14",
+    "clang-format": "^1.8.0",
+    "del-cli": "^5.1.0",
+    "eslint": "9.35.0",
+    "eslint-config-react-native-wcandillon": "4.0.1",
+    "eslint-plugin-import": "2.32.0",
+    "eslint-plugin-jest": "^28.8.2",
+    "eslint-plugin-prettier": "^5.2.1",
+    "jest": "^29.7.0",
+    "lodash": "^4.17.21",
+    "pixelmatch": "5.3.0",
+    "pngjs": "^7.0.0",
+    "prettier": "^3.0.3",
+    "puppeteer": "24.24.1",
+    "react": "19.1.0",
+    "react-native": "0.81.4",
+    "react-native-builder-bob": "^0.23.2",
+    "react-native-reanimated": "^4.2.1",
+    "react-native-web": "^0.21.2",
+    "react-native-worklets": "^0.7.0",
+    "rimraf": "^5.0.7",
+    "seedrandom": "^3.0.5",
+    "teapot": "^1.0.0",
+    "ts-morph": "^22.0.0",
+    "tsx": "^4.20.5",
+    "typescript": "^5.2.2",
+    "wgpu-matrix": "^3.0.2",
+    "ws": "^8.18.0",
+    "yargs": "^17.7.2"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": ">=0.81.0",
+    "react-native-reanimated": ">=4.2.1",
+    "react-native-worklets": ">=0.7.2"
+  },
+  "peerDependenciesMeta": {
+    "react-native-reanimated": {
+      "optional": true
+    },
+    "react-native-worklets": {
+      "optional": true
+    }
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "codegenConfig": {
+    "name": "RNWgpuViewSpec",
+    "type": "all",
+    "jsSrcsDir": "src",
+    "android": {
+      "javaPackageName": "com.webgpu"
+    },
+    "ios": {
+      "componentProvider": {
+        "WebGPUView": "WebGPUView"
+      }
+    }
+  }
+}

package/react-native-wgpu.podspec

@@ -0,0 +1,47 @@
+require "json"
+
+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-wgpu"
+  s.version      = package["version"]
+  s.summary      = package["description"]
+  s.homepage     = package["homepage"]
+  s.license      = package["license"]
+  s.authors      = package["author"]
+
+  s.platforms    = { :ios => min_ios_version_supported, :osx => "10.15", :visionos => "1.0" }
+  s.source       = { :git => "https://github.com/wcandillon/react-native-webgpu.git", :tag => "#{s.version}" }
+
+  s.source_files = [
+    "apple/**/*.{h,c,cc,cpp,m,mm,swift}",  
+    "cpp/**/*.{h,cpp}"
+  ]
+
+  s.vendored_frameworks = 'libs/apple/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.
+  if respond_to?(:install_modules_dependencies, true)
+    install_modules_dependencies(s)
+  else
+    s.dependency "React-Core"
+    s.compiler_flags = folly_compiler_flags
+    s.pod_target_xcconfig    = {
+        "HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/boost\" \"$(PODS_TARGET_SRCROOT)/cpp\"",
+        "OTHER_CPLUSPLUSFLAGS" => "-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1",
+        "CLANG_CXX_LANGUAGE_STANDARD" => "c++20"
+    }
+    s.dependency "React-RCTFabric"
+    s.dependency "React-Codegen"
+    s.dependency "RCT-Folly"
+    s.dependency "RCTRequired"
+    s.dependency "RCTTypeSafety"
+    s.dependency "ReactCommon/turbomodule/core"
+  end
+end

package/src/Canvas.tsx

@@ -0,0 +1,91 @@
+import React, { useImperativeHandle, useRef, useState } from "react";
+import type { ViewProps } from "react-native";
+import { View } from "react-native";
+
+import WebGPUNativeView from "./WebGPUViewNativeComponent";
+
+let CONTEXT_COUNTER = 1;
+function generateContextId() {
+  return CONTEXT_COUNTER++;
+}
+
+declare global {
+  var RNWebGPU: {
+    gpu: GPU;
+    fabric: boolean;
+    getNativeSurface: (contextId: number) => NativeCanvas;
+    MakeWebGPUCanvasContext: (
+      contextId: number,
+      width: number,
+      height: number,
+    ) => RNCanvasContext;
+    DecodeToUTF8: (buffer: NodeJS.ArrayBufferView | ArrayBuffer) => string;
+    createImageBitmap: typeof createImageBitmap;
+  };
+}
+
+type SurfacePointer = bigint;
+
+export interface NativeCanvas {
+  surface: SurfacePointer;
+  width: number;
+  height: number;
+  clientWidth: number;
+  clientHeight: number;
+}
+
+export type RNCanvasContext = GPUCanvasContext & {
+  present: () => void;
+};
+
+export interface CanvasRef {
+  getContextId: () => number;
+  getContext(contextName: "webgpu"): RNCanvasContext | null;
+  getNativeSurface: () => NativeCanvas;
+}
+
+interface CanvasProps extends ViewProps {
+  transparent?: boolean;
+  ref?: React.Ref<CanvasRef>;
+}
+
+export const Canvas = ({ transparent, ref, ...props }: CanvasProps) => {
+  const viewRef = useRef(null);
+  const [contextId, _] = useState(() => generateContextId());
+  useImperativeHandle(ref, () => ({
+    getContextId: () => contextId,
+    getNativeSurface: () => {
+      return RNWebGPU.getNativeSurface(contextId);
+    },
+    getContext(contextName: "webgpu"): RNCanvasContext | null {
+      if (contextName !== "webgpu") {
+        throw new Error(`[WebGPU] Unsupported context: ${contextName}`);
+      }
+      if (!viewRef.current) {
+        throw new Error("[WebGPU] Cannot get context before mount");
+      }
+      // getBoundingClientRect became stable in RN 0.83
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const view = viewRef.current as any;
+      const size =
+        "getBoundingClientRect" in view
+          ? view.getBoundingClientRect()
+          : view.unstable_getBoundingClientRect();
+      return RNWebGPU.MakeWebGPUCanvasContext(
+        contextId,
+        size.width,
+        size.height,
+      );
+    },
+  }));
+
+  return (
+    <View collapsable={false} ref={viewRef} {...props}>
+      <WebGPUNativeView
+        style={{ flex: 1 }}
+        contextId={contextId}
+        transparent={!!transparent}
+      />
+    </View>
+  );
+};

package/src/NativeWebGPUModule.ts

@@ -0,0 +1,9 @@
+import { TurboModuleRegistry } from "react-native";
+import type { TurboModule } from "react-native";
+
+export interface Spec extends TurboModule {
+  install: () => boolean;
+}
+
+// eslint-disable-next-line import/no-default-export
+export default TurboModuleRegistry.getEnforcing<Spec>("WebGPUModule");

package/src/Offscreen.ts

@@ -0,0 +1,113 @@
+export class GPUOffscreenCanvas {
+  width: number;
+  height: number;
+
+  private context: GPUOffscreenCanvasContext;
+
+  constructor(width: number, height: number) {
+    this.width = width;
+    this.height = height;
+    this.context = new GPUOffscreenCanvasContext(this);
+  }
+
+  getContext(contextId: "webgpu"): GPUOffscreenCanvasContext | null {
+    if (contextId === "webgpu") {
+      return this.context;
+    }
+    // Implement other context types if necessary
+    return null;
+  }
+
+  getImageData() {
+    const device = this.context.getDevice();
+    const texture = this.context.getTexture();
+    const commandEncoder = device.createCommandEncoder();
+    const bytesPerRow = this.width * 4;
+    const buffer = device.createBuffer({
+      size: bytesPerRow * this.height,
+      usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ,
+    });
+    commandEncoder.copyTextureToBuffer(
+      { texture: texture },
+      { buffer: buffer, bytesPerRow },
+      [this.width, this.height],
+    );
+    device.queue.submit([commandEncoder.finish()]);
+
+    return buffer.mapAsync(GPUMapMode.READ).then(() => {
+      const arrayBuffer = buffer.getMappedRange();
+      const uint8Array = new Uint8Array(arrayBuffer);
+      const data = Array.from(uint8Array);
+      buffer.unmap();
+      return {
+        data,
+        width: this.width,
+        height: this.height,
+        format: navigator.gpu.getPreferredCanvasFormat(),
+      };
+    });
+  }
+}
+
+class GPUOffscreenCanvasContext implements GPUCanvasContext {
+  __brand = "GPUCanvasContext" as const;
+
+  private textureFormat: GPUTextureFormat;
+  private texture: GPUTexture | null = null;
+  private device: GPUDevice | null = null;
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  constructor(public readonly canvas: any) {
+    this.textureFormat = navigator.gpu.getPreferredCanvasFormat();
+  }
+  getConfiguration(): GPUCanvasConfigurationOut | null {
+    throw new Error("Method not implemented.");
+  }
+
+  present() {
+    // Do nothing
+  }
+
+  getDevice() {
+    if (!this.device) {
+      throw new Error("Device is not configured.");
+    }
+    return this.device;
+  }
+
+  getTexture() {
+    if (!this.texture) {
+      throw new Error("Texture is not configured");
+    }
+    return this.texture;
+  }
+
+  configure(config: GPUCanvasConfiguration) {
+    // Configure the canvas context with the device and format
+    this.device = config.device;
+    this.texture = config.device.createTexture({
+      size: [this.canvas.width, this.canvas.height],
+      format: this.textureFormat,
+      usage:
+        GPUTextureUsage.RENDER_ATTACHMENT |
+        GPUTextureUsage.COPY_SRC |
+        GPUTextureUsage.TEXTURE_BINDING,
+    });
+    return undefined;
+  }
+
+  unconfigure() {
+    // Unconfigure the canvas context
+    if (this.texture) {
+      this.texture.destroy();
+    }
+    return undefined;
+  }
+
+  getCurrentTexture(): GPUTexture {
+    if (!this.texture) {
+      throw new Error("Texture is not configured");
+    }
+    return this.texture;
+  }
+}

package/src/WebGPUViewNativeComponent.ts

@@ -0,0 +1,11 @@
+import { codegenNativeComponent } from "react-native";
+import type { Int32 } from "react-native/Libraries/Types/CodegenTypes";
+import type { ViewProps } from "react-native";
+
+export interface NativeProps extends ViewProps {
+  contextId: Int32;
+  transparent: boolean;
+}
+
+// eslint-disable-next-line import/no-default-export
+export default codegenNativeComponent<NativeProps>("WebGPUView");

package/src/WebGPUViewNativeComponent.web.ts

@@ -0,0 +1,113 @@
+import React, { useEffect, useRef } from "react";
+import { StyleSheet } from "react-native";
+import type { Int32 } from "react-native/Libraries/Types/CodegenTypes";
+import type { ViewProps } from "react-native";
+
+import { contextIdToId } from "./utils";
+
+export interface NativeProps extends ViewProps {
+  contextId: Int32;
+  transparent: boolean;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function debounce<T extends (...args: any[]) => void>(
+  func: T,
+  wait: number,
+  immediate = false,
+) {
+  let timeout: ReturnType<typeof setTimeout> | undefined;
+  return function debounced(
+    this: ThisParameterType<T>,
+    ...args: Parameters<T>
+  ) {
+    const context = this;
+    const callNow = immediate && !timeout;
+    if (timeout) {
+      clearTimeout(timeout);
+    }
+    timeout = setTimeout(() => {
+      timeout = undefined;
+      if (!immediate) {
+        func.apply(context, args);
+      }
+    }, wait);
+    if (callNow) {
+      func.apply(context, args);
+    }
+  };
+}
+
+function resizeCanvas(canvas: HTMLCanvasElement | null) {
+  if (!canvas) {
+    return;
+  }
+
+  const dpr = window.devicePixelRatio || 1;
+
+  const { height, width } = canvas.getBoundingClientRect();
+  canvas.setAttribute("height", (height * dpr).toString());
+  canvas.setAttribute("width", (width * dpr).toString());
+}
+
+// eslint-disable-next-line import/no-default-export
+export default function WebGPUViewNativeComponent(
+  props: NativeProps,
+): React.JSX.Element {
+  const { contextId, style, transparent, ...rest } = props;
+
+  const canvasElm = useRef<HTMLCanvasElement>();
+
+  useEffect(() => {
+    const onResize = debounce(
+      () => resizeCanvas(canvasElm.current ?? null),
+      100,
+    );
+    window.addEventListener("resize", onResize);
+    return () => {
+      window.removeEventListener("resize", onResize);
+    };
+  }, []);
+
+  return React.createElement("canvas", {
+    ...rest,
+    id: contextIdToId(contextId),
+    style: {
+      ...styles.view,
+      ...styles.flex1,
+      ...(transparent === false ? { backgroundColor: "white" } : {}),
+      ...(typeof style === "object" ? style : {}),
+    },
+    ref: (ref: HTMLCanvasElement) => {
+      canvasElm.current = ref;
+      if (ref) {
+        resizeCanvas(ref);
+      }
+    },
+  });
+}
+
+const styles = StyleSheet.create({
+  flex1: {
+    flex: 1,
+  },
+  view: {
+    alignItems: "stretch",
+    backgroundColor: "transparent",
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error
+    border: "0 solid black",
+    boxSizing: "border-box",
+    display: "flex",
+    flexBasis: "auto",
+    flexDirection: "column",
+    flexShrink: 0,
+    listStyle: "none",
+    margin: 0,
+    minHeight: 0,
+    minWidth: 0,
+    padding: 0,
+    position: "relative",
+    zIndex: 0,
+  },
+});

package/src/WebPolyfillGPUModule.ts

@@ -0,0 +1,53 @@
+import { contextIdToId } from "./utils";
+
+const fabric = true;
+
+function getNativeSurface(contextId: number) {
+  const canvas = document.getElementById(
+    contextIdToId(contextId),
+  ) as HTMLCanvasElement;
+
+  const { height, width } = canvas.getBoundingClientRect()!;
+
+  return {
+    surface: BigInt(contextId),
+    height,
+    width,
+    clientHeight: height,
+    clientWidth: width,
+  };
+}
+
+function makeWebGPUCanvasContext(
+  contextId: number,
+  width: number,
+  height: number,
+) {
+  const canvas = document.getElementById(
+    contextIdToId(contextId),
+  ) as HTMLCanvasElement;
+
+  const dpr = window.devicePixelRatio || 1;
+  const pixelWidth = (width * dpr).toString();
+  const pixelHeight = (height * dpr).toString();
+
+  if (
+    canvas.getAttribute("width") !== pixelWidth ||
+    canvas.getAttribute("height") !== pixelHeight
+  ) {
+    canvas.setAttribute("width", pixelWidth);
+    canvas.setAttribute("height", pixelHeight);
+  }
+
+  const context = canvas.getContext("webgpu")!;
+  return Object.assign(context, {
+    present: () => {},
+  });
+}
+
+// @ts-expect-error - polyfill for RNWebGPU native module
+window.RNWebGPU = {
+  getNativeSurface,
+  MakeWebGPUCanvasContext: makeWebGPUCanvasContext,
+  fabric,
+};

package/src/external/ModuleProxy.ts

@@ -0,0 +1,30 @@
+// https://github.com/mrousavy/react-native-vision-camera/blob/main/package/src/dependencies/ModuleProxy.ts
+type ImportType = ReturnType<typeof require>;
+
+/**
+ * Create a lazily-imported module proxy.
+ * This is useful for lazily requiring optional dependencies.
+ */
+export const createModuleProxy = <TModule>(
+  getModule: () => ImportType,
+): TModule => {
+  const holder: { module: TModule | undefined } = { module: undefined };
+
+  const proxy = new Proxy(holder, {
+    get: (target, property) => {
+      if (target.module == null) {
+        // lazy initialize module via require()
+        // caller needs to make sure the require() call is wrapped in a try/catch
+        target.module = getModule() as TModule;
+      }
+      return target.module[property as keyof typeof holder.module];
+    },
+  });
+  return proxy as unknown as TModule;
+};
+
+export class OptionalDependencyNotInstalledError extends Error {
+  constructor(name: string) {
+    super(`${name} is not installed!`);
+  }
+}

package/src/external/index.ts

@@ -0,0 +1 @@
+export * from "./reanimated";

package/src/external/reanimated/ReanimatedProxy.ts

@@ -0,0 +1,19 @@
+import type * as ReanimatedT from "react-native-reanimated";
+
+import {
+  OptionalDependencyNotInstalledError,
+  createModuleProxy,
+} from "../ModuleProxy";
+
+type TReanimated = typeof ReanimatedT;
+
+const Reanimated = createModuleProxy<TReanimated>(() => {
+  try {
+    return require("react-native-reanimated");
+  } catch (e) {
+    throw new OptionalDependencyNotInstalledError("react-native-reanimated");
+  }
+});
+
+// eslint-disable-next-line import/no-default-export
+export default Reanimated;

package/src/external/reanimated/index.ts

@@ -0,0 +1,2 @@
+export { registerWebGPUForReanimated } from "./registerWebGPUForReanimated";
+export { default as Reanimated } from "./ReanimatedProxy";

package/src/external/reanimated/registerWebGPUForReanimated.ts

@@ -0,0 +1,43 @@
+// Declare global WebGPU worklet helper functions (installed by native module)
+declare function __webgpuIsWebGPUObject(obj: unknown): boolean;
+declare function __webgpuBox(obj: object): {
+  unbox: () => object;
+  __boxedWebGPU: true;
+};
+
+let isRegistered = false;
+
+/**
+ * Register WebGPU objects for Worklets serialization.
+ * This allows GPUDevice, GPUCanvasContext, etc. to be passed to worklets.
+ *
+ * This is called automatically when the module loads if react-native-worklets is installed.
+ */
+export const registerWebGPUForReanimated = () => {
+  if (isRegistered) {
+    return;
+  }
+  isRegistered = true;
+
+  try {
+    const { registerCustomSerializable } = require("react-native-worklets");
+
+    registerCustomSerializable({
+      name: "WebGPU",
+      determine: (value: object): value is object => {
+        "worklet";
+        return __webgpuIsWebGPUObject(value);
+      },
+      pack: (value: object) => {
+        "worklet";
+        return __webgpuBox(value);
+      },
+      unpack: (boxed: { unbox: () => object }) => {
+        "worklet";
+        return boxed.unbox();
+      },
+    });
+  } catch {
+    // react-native-worklets not installed, skip registration
+  }
+};