react-native-wgpu 0.3.1 → 0.4.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/index.tsx

@@ -1,197 +1,26 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import WebGPUNativeModule from "./NativeWebGPUModule";
-
-export * from "./Canvas";
-export * from "./Offscreen";
-export * from "./WebGPUViewNativeComponent";
-export * from "./hooks";
-export { default as WebGPUModule } from "./NativeWebGPUModule";
-
-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();
-
-if (!navigator) {
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-expect-error
-  navigator = {};
+/// <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;
+  };
 }
-// 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-ignore
-navigator.userAgent = "react-native";
-
-global.createImageBitmap =
-  global.createImageBitmap ??
-  ((...params: Parameters<typeof createImageBitmap>) =>
-    new Promise((resolve) => resolve(RNWebGPU.createImageBitmap(...params))));

package/src/main/index.tsx

@@ -0,0 +1,204 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import WebGPUModule from "../NativeWebGPUModule";
+
+export * from "../Canvas";
+export * from "../Offscreen";
+export * from "../WebGPUViewNativeComponent";
+export * from "../hooks";
+
+export { default as WebGPUModule } from "../NativeWebGPUModule";
+
+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;
+
+WebGPUModule.install();
+
+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 ??
+  ((...params: Parameters<typeof createImageBitmap>) =>
+    new Promise((resolve) => resolve(RNWebGPU.createImageBitmap(...params))));

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;
+}