react-native-wgpu 0.1.6 → 0.1.8

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

@@ -4,6 +4,36 @@
 <dict>
 	<key>AvailableLibraries</key>
 	<array>
+		<dict>
+			<key>BinaryPath</key>
+			<string>libwebgpu_dawn.a</string>
+			<key>LibraryIdentifier</key>
+			<string>xros-arm64</string>
+			<key>LibraryPath</key>
+			<string>libwebgpu_dawn.a</string>
+			<key>SupportedArchitectures</key>
+			<array>
+				<string>arm64</string>
+			</array>
+			<key>SupportedPlatform</key>
+			<string>xros</string>
+		</dict>
+		<dict>
+			<key>BinaryPath</key>
+			<string>libwebgpu_dawn.a</string>
+			<key>LibraryIdentifier</key>
+			<string>xros-arm64-simulator</string>
+			<key>LibraryPath</key>
+			<string>libwebgpu_dawn.a</string>
+			<key>SupportedArchitectures</key>
+			<array>
+				<string>arm64</string>
+			</array>
+			<key>SupportedPlatform</key>
+			<string>xros</string>
+			<key>SupportedPlatformVariant</key>
+			<string>simulator</string>
+		</dict>
 		<dict>
 			<key>BinaryPath</key>
 			<string>libwebgpu_dawn.a</string>
@@ -35,6 +65,21 @@
 			<key>SupportedPlatform</key>
 			<string>ios</string>
 		</dict>
+		<dict>
+			<key>BinaryPath</key>
+			<string>libwebgpu_dawn.a</string>
+			<key>LibraryIdentifier</key>
+			<string>macos-arm64_x86_64</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>macos</string>
+		</dict>
 	</array>
 	<key>CFBundlePackageType</key>
 	<string>XFWK</string>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-wgpu",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "description": "React Native WebGPU",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -16,7 +16,8 @@
     "android/src/**",
     "cpp/**/*.{h,cpp}",
     "ios/**",
-    "libs/**"
+    "libs/**",
+    "*.podspec"
   ],
   "scripts": {
     "test": "jest -i",

package/react-native-wgpu.podspec

@@ -0,0 +1,51 @@
+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, :visionos => "1.0" }
+  s.source       = { :git => "https://github.com/wcandillon/react-native-webgpu.git", :tag => "#{s.version}" }
+
+  s.source_files = [
+    "ios/**/*.{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"
+
+    # Don't install the dependencies when we run `pod install` in the old architecture.
+    if ENV['RCT_NEW_ARCH_ENABLED'] == '1' then
+      s.compiler_flags = folly_compiler_flags + " -DRCT_NEW_ARCH_ENABLED=1"
+      s.pod_target_xcconfig    = {
+          "HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/boost\"",
+          "OTHER_CPLUSPLUSFLAGS" => "-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1",
+          "CLANG_CXX_LANGUAGE_STANDARD" => "c++17"
+      }
+      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
+end

package/src/Canvas.tsx

@@ -15,7 +15,7 @@ declare global {
   // eslint-disable-next-line no-var
   var RNWebGPU: {
     gpu: GPU;
-    MakeWebGPUCanvasContext: (nativeCanvas: NativeCanvas) => CanvasContext;
+    MakeWebGPUCanvasContext: (nativeCanvas: NativeCanvas) => RNCanvasContext;
     DecodeToUTF8: (buffer: NodeJS.ArrayBufferView | ArrayBuffer) => string;
     createImageBitmap: typeof createImageBitmap;
   };
@@ -34,12 +34,12 @@ export interface NativeCanvas {
 global.__WebGPUContextRegistry = {};
 const WebGPUContextRegistry = global.__WebGPUContextRegistry;
 
-type CanvasContext = GPUCanvasContext & {
+export type RNCanvasContext = GPUCanvasContext & {
   present: () => void;
 };
 
 export interface CanvasRef {
-  getContext(contextName: "webgpu"): CanvasContext | null;
+  getContext(contextName: "webgpu"): RNCanvasContext | null;
   getNativeSurface: () => NativeCanvas;
 }
 
@@ -51,7 +51,7 @@ export const Canvas = forwardRef<CanvasRef, ViewProps>((props, ref) => {
       WebGPUNativeModule.createSurfaceContext(contextId);
       return WebGPUContextRegistry[contextId];
     },
-    getContext(contextName: "webgpu"): CanvasContext | null {
+    getContext(contextName: "webgpu"): RNCanvasContext | null {
       if (contextName !== "webgpu") {
         throw new Error(`[WebGPU] Unsupported context: ${contextName}`);
       }

package/src/Offscreen.ts

@@ -0,0 +1,160 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export class GPUOffscreenCanvas implements OffscreenCanvas {
+  width: number;
+  height: number;
+  oncontextlost: ((this: OffscreenCanvas, ev: Event) => any) | null = null;
+  oncontextrestored: ((this: OffscreenCanvas, ev: Event) => any) | null = null;
+
+  private context: GPUOffscreenCanvasContext;
+
+  constructor(width: number, height: number) {
+    this.width = width;
+    this.height = height;
+    this.context = new GPUOffscreenCanvasContext(this);
+  }
+
+  convertToBlob(_options?: ImageEncodeOptions): Promise<Blob> {
+    // Implementation for converting the canvas content to a Blob
+    throw new Error("Method not implemented.");
+  }
+
+  // Overloaded method signatures
+  getContext(
+    contextId: "2d",
+    options?: any,
+  ): OffscreenCanvasRenderingContext2D | null;
+  getContext(
+    contextId: "bitmaprenderer",
+    options?: any,
+  ): ImageBitmapRenderingContext | null;
+  getContext(contextId: "webgl", options?: any): WebGLRenderingContext | null;
+  getContext(contextId: "webgl2", options?: any): WebGL2RenderingContext | null;
+  getContext(
+    contextId: OffscreenRenderingContextId,
+    options?: any,
+  ): OffscreenRenderingContext | null;
+  getContext(contextId: "webgpu"): GPUCanvasContext | null;
+  getContext(
+    contextId: unknown,
+    _options?: any,
+  ): OffscreenRenderingContext | GPUCanvasContext | null {
+    if (contextId === "webgpu") {
+      return this.context;
+    }
+    // Implement other context types if necessary
+    return null;
+  }
+
+  transferToImageBitmap(): ImageBitmap {
+    // Implementation for transferring the canvas content to an ImageBitmap
+    throw new Error("Method not implemented.");
+  }
+
+  addEventListener<K extends keyof OffscreenCanvasEventMap>(
+    _type: K,
+    _listener: (this: OffscreenCanvas, ev: OffscreenCanvasEventMap[K]) => any,
+    _options?: boolean | AddEventListenerOptions,
+  ): void {
+    // Event listener implementation
+    throw new Error("Method not implemented.");
+  }
+
+  removeEventListener<K extends keyof OffscreenCanvasEventMap>(
+    _type: K,
+    _listener: (this: OffscreenCanvas, ev: OffscreenCanvasEventMap[K]) => any,
+    _options?: boolean | EventListenerOptions,
+  ): void {
+    // Remove event listener implementation
+    throw new Error("Method not implemented.");
+  }
+
+  dispatchEvent(_event: Event): boolean {
+    // Event dispatch implementation
+    throw new Error("Method not implemented.");
+  }
+
+  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;
+
+  constructor(public readonly canvas: OffscreenCanvas) {
+    this.textureFormat = navigator.gpu.getPreferredCanvasFormat();
+  }
+
+  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/__tests__/ExternalTexture.spec.ts

@@ -3,7 +3,7 @@ import { checkImage, client, encodeImage } from "./setup";
 describe("External Textures", () => {
   it("Simple (1)", async () => {
     const result = await client.eval(
-      ({ gpu, device, ctx, urls: { fTexture } }) => {
+      ({ gpu, device, ctx, canvas, urls: { fTexture } }) => {
         const module = device.createShaderModule({
           label: "our hardcoded textured quad shaders",
           code: /* wgsl */ `
@@ -131,7 +131,7 @@ describe("External Textures", () => {
                 device.queue.submit([commandBuffer]);
               }
               render();
-              return ctx.getImageData();
+              return canvas.getImageData();
             });
           });
         });
@@ -143,7 +143,7 @@ describe("External Textures", () => {
   });
   it("Simple (2)", async () => {
     const result = await client.eval(
-      ({ gpu, device, ctx, urls: { fTexture } }) => {
+      ({ gpu, device, ctx, canvas, urls: { fTexture } }) => {
         const module = device.createShaderModule({
           label: "our hardcoded textured quad shaders",
           code: /* wgsl */ `
@@ -271,7 +271,7 @@ describe("External Textures", () => {
                 device.queue.submit([commandBuffer]);
               }
               render();
-              return ctx.getImageData();
+              return canvas.getImageData();
             });
           });
         });

package/src/__tests__/Texture.spec.ts

@@ -138,7 +138,13 @@ describe("Texture", () => {
   });
   it("Create texture and reads it", async () => {
     const result = await client.eval(
-      ({ device, shaders: { triangleVertWGSL, redFragWGSL }, gpu, ctx }) => {
+      ({
+        device,
+        shaders: { triangleVertWGSL, redFragWGSL },
+        gpu,
+        ctx,
+        canvas,
+      }) => {
         const pipeline = device.createRenderPipeline({
           layout: "auto",
           vertex: {
@@ -182,7 +188,7 @@ describe("Texture", () => {
         passEncoder.end();
 
         device.queue.submit([commandEncoder.finish()]);
-        return ctx.getImageData();
+        return canvas.getImageData();
       },
     );
     const image = encodeImage(result);

package/src/__tests__/demos/ABuffer.spec.ts

@@ -248,6 +248,7 @@ describe("A Buffer", () => {
         translucentWGSL,
         mat4,
         vec3,
+        canvas,
       }) => {
         const presentationFormat = gpu.getPreferredCanvasFormat();
         const settings = {
@@ -579,7 +580,7 @@ describe("A Buffer", () => {
           }
 
           const depthTexture = device.createTexture({
-            size: [ctx.width, ctx.height],
+            size: [ctx.canvas.width, ctx.canvas.height],
             format: "depth24plus",
             usage:
               GPUTextureUsage.RENDER_ATTACHMENT |
@@ -605,12 +606,12 @@ describe("A Buffer", () => {
           // We want to keep the linked-list buffer size under the maxStorageBufferBindingSize.
           // Split the frame into enough slices to meet that constraint.
           const bytesPerline =
-            ctx.width * averageLayersPerFragment * linkedListElementSize;
+            ctx.canvas.width * averageLayersPerFragment * linkedListElementSize;
           const maxLinesSupported = Math.floor(
             device.limits.maxStorageBufferBindingSize / bytesPerline,
           );
-          const numSlices = Math.ceil(ctx.height / maxLinesSupported);
-          const sliceHeight = Math.ceil(ctx.height / numSlices);
+          const numSlices = Math.ceil(ctx.canvas.height / maxLinesSupported);
+          const sliceHeight = Math.ceil(ctx.canvas.height / numSlices);
           const linkedListBufferSize = sliceHeight * bytesPerline;
 
           const linkedListBuffer = device.createBuffer({
@@ -645,13 +646,17 @@ describe("A Buffer", () => {
           // * numFragments : u32
           // * data : array<u32>
           const headsBuffer = device.createBuffer({
-            size: (1 + ctx.width * sliceHeight) * Uint32Array.BYTES_PER_ELEMENT,
+            size:
+              (1 + ctx.canvas.width * sliceHeight) *
+              Uint32Array.BYTES_PER_ELEMENT,
             usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
             label: "headsBuffer",
           });
 
           const headsInitBuffer = device.createBuffer({
-            size: (1 + ctx.width * sliceHeight) * Uint32Array.BYTES_PER_ELEMENT,
+            size:
+              (1 + ctx.canvas.width * sliceHeight) *
+              Uint32Array.BYTES_PER_ELEMENT,
             usage: GPUBufferUsage.COPY_SRC,
             mappedAtCreation: true,
             label: "headsInitBuffer",
@@ -745,7 +750,7 @@ describe("A Buffer", () => {
 
           // Rotates the camera around the origin based on time.
           function getCameraViewProjMatrix() {
-            const aspect = ctx.width / ctx.height;
+            const aspect = ctx.canvas.width / ctx.canvas.height;
 
             const projectionMatrix = mat4.perspective(
               (2 * Math.PI) / 5,
@@ -776,8 +781,8 @@ describe("A Buffer", () => {
 
               new Float32Array(buffer).set(getCameraViewProjMatrix());
               new Uint32Array(buffer, 16 * Float32Array.BYTES_PER_ELEMENT).set([
-                averageLayersPerFragment * ctx.width * sliceHeight,
-                ctx.width,
+                averageLayersPerFragment * ctx.canvas.width * sliceHeight,
+                ctx.canvas.width,
               ]);
 
               device.queue.writeBuffer(uniformBuffer, 0, buffer);
@@ -810,9 +815,9 @@ describe("A Buffer", () => {
 
               const scissorX = 0;
               const scissorY = slice * sliceHeight;
-              const scissorWidth = ctx.width;
+              const scissorWidth = ctx.canvas.width;
               const scissorHeight =
-                Math.min((slice + 1) * sliceHeight, ctx.height) -
+                Math.min((slice + 1) * sliceHeight, ctx.canvas.height) -
                 slice * sliceHeight;
 
               // Draw the translucent objects
@@ -870,7 +875,7 @@ describe("A Buffer", () => {
 
         doDraw();
 
-        return ctx.getImageData();
+        return canvas.getImageData();
       },
       {
         mesh: teapotMesh,

package/src/__tests__/demos/Blur.spec.ts

@@ -133,6 +133,7 @@ describe("Blur", () => {
         assets: { di3D: imageBitmap },
         fullscreenTexturedQuadWGSL,
         blurWGSL,
+        canvas,
       }) => {
         const tileDim = 128;
         const batch = [4, 4];
@@ -387,7 +388,7 @@ describe("Blur", () => {
           device.queue.submit([commandEncoder.finish()]);
         }
         frame();
-        return ctx.getImageData();
+        return canvas.getImageData();
       },
       { blurWGSL: blur, fullscreenTexturedQuadWGSL: fullscreenTexturedQuad },
     );

package/src/__tests__/demos/Cube.spec.ts

@@ -84,6 +84,7 @@ describe("Cube", () => {
         vec3,
         basicVertWGSL,
         vertexPositionColorWGSL,
+        canvas,
       }) => {
         const cubeVertexSize = 4 * 10; // Byte size of one cube vertex.
         const cubePositionOffset = 0;
@@ -156,7 +157,7 @@ describe("Cube", () => {
         });
 
         const depthTexture = device.createTexture({
-          size: [ctx.width, ctx.height],
+          size: [ctx.canvas.width, ctx.canvas.height],
           format: "depth24plus",
           usage: GPUTextureUsage.RENDER_ATTACHMENT,
         });
@@ -196,7 +197,7 @@ describe("Cube", () => {
           },
         };
 
-        const aspect = ctx.width / ctx.height;
+        const aspect = ctx.canvas.width / ctx.canvas.height;
         const projectionMatrix = mat4.perspective(
           (2 * Math.PI) / 5,
           aspect,
@@ -243,7 +244,7 @@ describe("Cube", () => {
         passEncoder.draw(cubeVertexCount);
         passEncoder.end();
         device.queue.submit([commandEncoder.finish()]);
-        return ctx.getImageData();
+        return canvas.getImageData();
       },
       {
         basicVertWGSL: basicVert,
@@ -264,6 +265,7 @@ describe("Cube", () => {
         vec3,
         basicVertWGSL,
         vertexPositionColorWGSL,
+        canvas,
       }) => {
         const cubeVertexSize = 4 * 10; // Byte size of one cube vertex.
         const cubePositionOffset = 0;
@@ -334,7 +336,7 @@ describe("Cube", () => {
         });
 
         const depthTexture = device.createTexture({
-          size: [ctx.width, ctx.height],
+          size: [ctx.canvas.width, ctx.canvas.height],
           format: "depth24plus",
           usage: GPUTextureUsage.RENDER_ATTACHMENT,
         });
@@ -395,7 +397,7 @@ describe("Cube", () => {
           },
         };
 
-        const aspect = ctx.width / ctx.height;
+        const aspect = ctx.canvas.width / ctx.canvas.height;
         const projectionMatrix = mat4.perspective(
           (2 * Math.PI) / 5,
           aspect,
@@ -475,7 +477,7 @@ describe("Cube", () => {
         passEncoder.end();
         device.queue.submit([commandEncoder.finish()]);
 
-        return ctx.getImageData();
+        return canvas.getImageData();
       },
       {
         basicVertWGSL: basicVert,
@@ -496,6 +498,7 @@ describe("Cube", () => {
         vec3,
         basicVertWGSL,
         sampleTextureMixColorWGSL,
+        canvas,
       }) => {
         const cubeVertexSize = 4 * 10; // Byte size of one cube vertex.
         const cubePositionOffset = 0;
@@ -567,7 +570,7 @@ describe("Cube", () => {
         });
 
         const depthTexture = device.createTexture({
-          size: [ctx.width, ctx.height],
+          size: [ctx.canvas.width, ctx.canvas.height],
           format: "depth24plus",
           usage: GPUTextureUsage.RENDER_ATTACHMENT,
         });
@@ -638,7 +641,7 @@ describe("Cube", () => {
           },
         };
 
-        const aspect = ctx.width / ctx.height;
+        const aspect = ctx.canvas.width / ctx.canvas.height;
         const projectionMatrix = mat4.perspective(
           (2 * Math.PI) / 5,
           aspect,
@@ -686,7 +689,7 @@ describe("Cube", () => {
         passEncoder.end();
         device.queue.submit([commandEncoder.finish()]);
 
-        return ctx.getImageData();
+        return canvas.getImageData();
       },
       {
         basicVertWGSL: basicVert,
@@ -708,6 +711,7 @@ describe("Cube", () => {
         vec3,
         vertexPositionColorWGSL,
         instancedVertWGSL,
+        canvas,
       }) => {
         const cubeVertexSize = 4 * 10; // Byte size of one cube vertex.
         const cubePositionOffset = 0;
@@ -778,7 +782,7 @@ describe("Cube", () => {
         });
 
         const depthTexture = device.createTexture({
-          size: [ctx.width, ctx.height],
+          size: [ctx.canvas.width, ctx.canvas.height],
           format: "depth24plus",
           usage: GPUTextureUsage.RENDER_ATTACHMENT,
         });
@@ -809,7 +813,7 @@ describe("Cube", () => {
           ],
         });
 
-        const aspect = ctx.width / ctx.height;
+        const aspect = ctx.canvas.width / ctx.canvas.height;
         const projectionMatrix = mat4.perspective(
           (2 * Math.PI) / 5,
           aspect,
@@ -912,7 +916,7 @@ describe("Cube", () => {
         passEncoder.draw(cubeVertexCount, numInstances, 0, 0);
         passEncoder.end();
         device.queue.submit([commandEncoder.finish()]);
-        return ctx.getImageData();
+        return canvas.getImageData();
       },
       {
         vertexPositionColorWGSL: vertexPositionColor,