react-native-wgpu 0.5.13 → 0.5.14

package/src/WebPolyfillGPUModule.ts

@@ -1,53 +0,0 @@
-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

@@ -1,30 +0,0 @@
-// 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

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

package/src/external/reanimated/ReanimatedProxy.ts

@@ -1,19 +0,0 @@
-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

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

package/src/external/reanimated/registerWebGPUForReanimated.ts

@@ -1,43 +0,0 @@
-// 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
-  }
-};

package/src/hooks.tsx

@@ -1,93 +0,0 @@
-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

@@ -1,91 +0,0 @@
-/// <reference types="@webgpu/types" />
-import type {
-  GPUDawnTogglesDescriptor,
-  GPUSharedTextureMemory,
-  GPUSharedTextureMemoryDescriptor,
-  NativeCanvas,
-  RNCanvasContext,
-  VideoPlayer,
-  NativeVideoFrame,
-  NativeVideoPixelFormat,
-} from "./types";
-
-export * from "./main";
-export type {
-  NativeVideoFrame,
-  VideoPlayer,
-  NativeVideoPixelFormat,
-  CreateVideoPlayerOptions,
-  GPUSharedTextureMemory,
-  GPUSharedTextureMemoryDescriptor,
-  GPUDawnTogglesDescriptor,
-} from "./types";
-
-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;
-    loadVideoFrame: (path: string) => NativeVideoFrame;
-    createTestVideoFrame: (width: number, height: number) => NativeVideoFrame;
-    // Wrap a NativeBuffer.pointer (CVPixelBufferRef on iOS / AHardwareBuffer*
-    // on Android) into a NativeVideoFrame. Matches the shape used by libraries
-    // that emit NativeBuffer (e.g. react-native-vision-camera).
-    createVideoFrameFromNativeBuffer: (pointer: bigint) => NativeVideoFrame;
-    createVideoPlayer: (
-      path: string,
-      pixelFormat?: NativeVideoPixelFormat,
-    ) => VideoPlayer;
-    writeTestVideoFile: () => string;
-  };
-
-  interface GPUDevice {
-    importSharedTextureMemory(
-      descriptor: GPUSharedTextureMemoryDescriptor,
-    ): GPUSharedTextureMemory;
-  }
-
-  // Non-standard, Dawn-only. Lets callers set Dawn device-stage toggles at
-  // device creation: adapter.requestDevice({ dawnToggles: { ... } }).
-  interface GPUDeviceDescriptor {
-    dawnToggles?: GPUDawnTogglesDescriptor;
-  }
-  // Non-spec extension: camera frames arrive in the sensor's native
-  // orientation, which differs between iOS and Android. `rotation` (degrees,
-  // one of 0/90/180/270) and `mirrored` (horizontal flip) are baked into the
-  // sampling transform by Dawn, so the shader sees an upright frame. Maps
-  // directly onto VisionCamera's `frame.orientation` / `frame.isMirrored`.
-  interface GPUExternalTextureDescriptor {
-    rotation?: 0 | 90 | 180 | 270;
-    mirrored?: boolean;
-  }
-
-  // Non-spec extension: a GPUExternalTexture imported from a native surface
-  // holds an open shared-memory access window on that surface until this
-  // wrapper is destroyed. Call destroy() right after the queue.submit() that
-  // sampled it (never before) to release the surface back to its producer
-  // immediately, instead of waiting for garbage collection. Forgetting to call
-  // it is not fatal (GC still cleans up), but it can starve a producer's buffer
-  // pool (e.g. a camera/video player) and pile up GPU resources.
-  interface GPUExternalTexture {
-    destroy(): void;
-  }
-
-  // Extend createImageBitmap to accept ArrayBuffer/TypedArray (encoded image bytes)
-  function createImageBitmap(
-    image: ArrayBuffer | ArrayBufferView,
-  ): Promise<ImageBitmap>;
-}

package/src/main/index.tsx

@@ -1,40 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,102 +0,0 @@
-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;
-}
-
-// Pixel layout of a NativeVideoFrame. NOT the WebCodecs `VideoPixelFormat`
-// enum — these are the two native surface layouts we support, lower-cased to
-// avoid being mistaken for the spec values ("NV12", "BGRA", …).
-export type NativeVideoPixelFormat = "bgra8" | "nv12";
-
-// A native, GPU-shareable handle to a single video frame.
-//
-// NOT the WebCodecs `VideoFrame`: there is no `close()`/`format`/`timestamp`,
-// the surface is referenced by a raw native pointer, and disposal is
-// `release()`. Named with a `Native` prefix so it doesn't shadow the global
-// WebCodecs type or imply spec semantics it doesn't have.
-//
-//   - handle is the raw pointer (IOSurfaceRef on Apple, AHardwareBuffer* on
-//     Android) encoded as a BigInt. Pass it to
-//     GPUDevice.importSharedTextureMemory.
-//   - pixelFormat describes the surface layout: 'bgra8' for a sampled
-//     GPUTexture; 'nv12' (biplanar Y + CbCr) for the importExternalTexture
-//     path.
-//   - release() drops the underlying backing object (a CVPixelBuffer on Apple).
-//     The frame is also released when the JS wrapper is garbage-collected; call
-//     release() eagerly when you know you're done.
-export interface NativeVideoFrame {
-  readonly handle: bigint;
-  readonly width: number;
-  readonly height: number;
-  readonly pixelFormat: NativeVideoPixelFormat;
-  release(): void;
-}
-
-// A handle to a decoded video stream. Poll copyLatestFrame() each render tick
-// to obtain the most recently decoded frame as an IOSurface/AHardwareBuffer
-// (returns null between frames so callers can skip the import work).
-export interface VideoPlayer {
-  copyLatestFrame(): NativeVideoFrame | null;
-  play(): void;
-  pause(): void;
-  release(): void;
-}
-
-export interface CreateVideoPlayerOptions {
-  // 'bgra8' (default): emit a single-plane BGRA surface, suitable for
-  // SharedTextureMemory and a regular sampled GPUTexture.
-  // 'nv12': emit biplanar Y + CbCr surfaces, suitable for
-  // GPUDevice.importExternalTexture.
-  pixelFormat?: NativeVideoPixelFormat;
-}
-
-export interface GPUSharedTextureMemoryDescriptor {
-  // Raw native handle (IOSurfaceRef on Apple, AHardwareBuffer* on Android),
-  // encoded as a BigInt. The caller is responsible for keeping the underlying
-  // object alive for as long as the shared memory (and any textures derived
-  // from it) are in use. Using NativeVideoFrame.handle handles this
-  // automatically.
-  handle: bigint;
-  label?: string;
-}
-
-// Non-standard, Dawn-only device toggles. Mirrors Dawn's DawnTogglesDescriptor
-// and is chained onto the native device descriptor at requestDevice time.
-// Pass it via the (augmented) GPUDeviceDescriptor: adapter.requestDevice({
-// dawnToggles: { enabledToggles: ["dump_shaders"] } }). Toggle names are open
-// strings (see Dawn's Toggles.cpp); these flags are Dawn-specific and
-// non-portable.
-export interface GPUDawnTogglesDescriptor {
-  enabledToggles?: string[];
-  disabledToggles?: string[];
-}
-
-// A piece of shared GPU memory backed by a native surface. Use createTexture()
-// to obtain a regular GPUTexture that aliases the surface's pixels. The
-// returned texture must be bracketed by beginAccess/endAccess around any
-// command-buffer submission that uses it.
-export interface GPUSharedTextureMemory {
-  readonly __brand: "GPUSharedTextureMemory";
-  label: string;
-  createTexture(descriptor?: GPUTextureDescriptor): GPUTexture;
-  // `initialized` declares whether the surface already holds meaningful pixels
-  // (true for an incoming video/camera frame, false if the next pass will fully
-  // overwrite it).
-  beginAccess(texture: GPUTexture, initialized: boolean): boolean;
-  endAccess(texture: GPUTexture): boolean;
-}

package/src/utils.ts

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