react-native-webgpu 0.5.11

package/src/hooks.tsx

@@ -0,0 +1,93 @@
+import React, {
+  createContext,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
+import type { ReactNode } from "react";
+
+import type { CanvasRef, NativeCanvas } from "./Canvas";
+
+export const warnIfNotHardwareAccelerated = (adapter: GPUAdapter) => {
+  // Check if adapter is a fallback adapter using the new GPUAdapterInfo API
+  // Note: isFallbackAdapter was moved from GPUAdapter to GPUAdapterInfo in Chrome 140
+  if (adapter.info && adapter.info.isFallbackAdapter) {
+    console.warn(
+      "GPUAdapter is not hardware accelerated. This is common on Android emulators. Rendering will be slow. Some features may be unavailable.",
+    );
+  }
+};
+
+interface DeviceContext {
+  device: GPUDevice | null;
+  adapter: GPUAdapter | null;
+}
+
+const DeviceContext = createContext<DeviceContext | null>(null);
+
+interface DeviceProviderProps {
+  children?: ReactNode | ReactNode[];
+  adapterOptions?: GPURequestAdapterOptions;
+  deviceDescriptor?: GPUDeviceDescriptor;
+}
+
+export const GPUDeviceProvider = ({
+  children,
+  adapterOptions,
+  deviceDescriptor,
+}: DeviceProviderProps) => {
+  const state = useDevice(adapterOptions, deviceDescriptor);
+  if (!state.device) {
+    return null;
+  }
+  return (
+    <DeviceContext.Provider value={state}>{children}</DeviceContext.Provider>
+  );
+};
+
+export const useSurface = () => {
+  const ref = useRef<CanvasRef>(null);
+  const [surface, setSurface] = useState<NativeCanvas | null>(null);
+  useLayoutEffect(() => {
+    const sur = ref.current!.getNativeSurface();
+    setSurface(sur);
+  }, []);
+  return { ref, surface };
+};
+
+export const useMainDevice = () => {
+  const ctx = useContext(DeviceContext);
+  if (!ctx) {
+    throw new Error("No DeviceContext found.");
+  }
+  return ctx;
+};
+
+export const useCanvasRef = () => useRef<CanvasRef>(null);
+
+export const useDevice = (
+  adapterOptions?: GPURequestAdapterOptions,
+  deviceDescriptor?: GPUDeviceDescriptor,
+) => {
+  const [state, setState] = useState<DeviceContext | null>(null);
+  useEffect(() => {
+    (async () => {
+      if (!state) {
+        const adapter = await navigator.gpu.requestAdapter(adapterOptions);
+        if (!adapter) {
+          throw new Error("No appropriate GPUAdapter found.");
+        }
+        warnIfNotHardwareAccelerated(adapter);
+        const device = await adapter.requestDevice(deviceDescriptor);
+        if (!device) {
+          throw new Error("No appropriate GPUDevice found.");
+        }
+        setState({ adapter, device });
+        return;
+      }
+    })();
+  }, [adapterOptions, deviceDescriptor, state]);
+  return { adapter: state?.adapter ?? null, device: state?.device ?? null };
+};

package/src/index.tsx

@@ -0,0 +1,31 @@
+/// <reference types="@webgpu/types" />
+
+import type { NativeCanvas, RNCanvasContext } from "./types";
+
+export * from "./main";
+
+declare global {
+  interface Navigator {
+    gpu: GPU;
+  }
+
+  var navigator: Navigator;
+
+  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;
+  };
+
+  // Extend createImageBitmap to accept ArrayBuffer/TypedArray (encoded image bytes)
+  function createImageBitmap(
+    image: ArrayBuffer | ArrayBufferView,
+  ): Promise<ImageBitmap>;
+}

package/src/main/index.tsx

@@ -0,0 +1,40 @@
+import { registerWebGPUForReanimated } from "../external";
+import WebGPUModule from "../NativeWebGPUModule";
+
+export * from "../Canvas";
+export * from "../Offscreen";
+export * from "../WebGPUViewNativeComponent";
+export * from "../hooks";
+
+export { default as WebGPUModule } from "../NativeWebGPUModule";
+
+const _installOk = WebGPUModule.install();
+
+registerWebGPUForReanimated();
+
+if (typeof RNWebGPU !== "undefined") {
+  if (!navigator) {
+    // @ts-expect-error Navigation object is more complex than this, setting it to an empty object to add gpu property
+    navigator = {
+      gpu: RNWebGPU.gpu,
+      userAgent: "react-native",
+    };
+  } else {
+    navigator.gpu = RNWebGPU.gpu;
+    if (typeof navigator.userAgent !== "string") {
+      try {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore - Hermes navigator may not include a userAgent, align with the polyfill if needed
+        navigator.userAgent = "react-native";
+      } catch {
+        // navigator.userAgent can be read-only; ignore if assignment fails
+      }
+    }
+  }
+  global.createImageBitmap =
+    global.createImageBitmap ?? RNWebGPU.createImageBitmap.bind(RNWebGPU);
+} else {
+  console.warn(
+    `[react-native-wgpu] install() returned ${_installOk} but RNWebGPU global is not available`,
+  );
+}

package/src/main/index.web.tsx

@@ -0,0 +1,8 @@
+import "../WebPolyfillGPUModule";
+
+export * from "../Canvas";
+export * from "../Offscreen";
+export * from "../WebGPUViewNativeComponent";
+export * from "../hooks";
+
+// We don't need to set all global properties on web, webgpu is already available globally

package/src/types.ts

@@ -0,0 +1,20 @@
+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;
+  whenReady: (callback: () => void) => void;
+}

package/src/utils.ts

@@ -0,0 +1,4 @@
+// Only used on the web
+export function contextIdToId(contextId: number) {
+  return "rnwgpu-canvas-" + contextId;
+}