react-native-wgpu 0.1.7 → 0.1.9

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,

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

@@ -28,6 +28,7 @@ describe("Fractal Cube", () => {
         vec3,
         sampleSelfWGSL,
         basicVertWGSL,
+        canvas,
       }) => {
         const cubeVertexSize = 4 * 10; // Byte size of one cube vertex.
         const cubePositionOffset = 0;
@@ -98,7 +99,7 @@ describe("Fractal Cube", () => {
         });
 
         const depthTexture = device.createTexture({
-          size: [ctx.width, ctx.height],
+          size: [ctx.canvas.width, ctx.canvas.height],
           format: "depth24plus",
           usage: GPUTextureUsage.RENDER_ATTACHMENT,
         });
@@ -112,7 +113,7 @@ describe("Fractal Cube", () => {
         // We will copy the frame's rendering results into this texture and
         // sample it on the next frame.
         const cubeTexture = device.createTexture({
-          size: [ctx.width, ctx.height],
+          size: [ctx.canvas.width, ctx.canvas.height],
           format: presentationFormat,
           usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST,
         });
@@ -163,7 +164,7 @@ describe("Fractal Cube", () => {
           },
         };
 
-        const aspect = ctx.width / ctx.height;
+        const aspect = ctx.canvas.width / ctx.canvas.height;
         const projectionMatrix = mat4.perspective(
           (2 * Math.PI) / 5,
           aspect,
@@ -217,7 +218,7 @@ describe("Fractal Cube", () => {
             {
               texture: cubeTexture,
             },
-            [ctx.width, ctx.height],
+            [ctx.canvas.width, ctx.canvas.height],
           );
 
           device.queue.submit([commandEncoder.finish()]);
@@ -226,7 +227,7 @@ describe("Fractal Cube", () => {
         for (let i = 0; i < 10; i++) {
           frame(now + i * 16);
         }
-        return ctx.getImageData();
+        return canvas.getImageData();
       },
       {
         basicVertWGSL: basicVert,

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

@@ -56,7 +56,7 @@ export type TypedArrayConstructor =
 describe("OcclusionQuery", () => {
   it("occlusionQuery", async () => {
     const result = await client.eval(
-      ({ device, ctx, gpu, solidColorLitWGSL, mat4 }) => {
+      ({ device, ctx, gpu, solidColorLitWGSL, mat4, canvas }) => {
         const depthFormat = "depth24plus";
         const presentationFormat = gpu.getPreferredCanvasFormat();
         const animate = true;
@@ -262,7 +262,7 @@ describe("OcclusionQuery", () => {
 
           const projection = mat4.perspective(
             (30 * Math.PI) / 180,
-            ctx.width / ctx.height,
+            ctx.canvas.width / ctx.canvas.height,
             0.5,
             100,
           );
@@ -365,7 +365,7 @@ describe("OcclusionQuery", () => {
           }
         }
         render(1721766068905 + 150 * 16);
-        return ctx.getImageData().then((image) => ({ image, visible }));
+        return canvas.getImageData().then((image) => ({ image, visible }));
       },
       { solidColorLitWGSL: solidColorLit },
     );

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

@@ -75,6 +75,7 @@ describe("Render Bundles", () => {
         vec3,
         assets: { saturn, moon },
         vals,
+        canvas,
       }) => {
         interface SphereMesh {
           vertices: Float32Array;
@@ -255,7 +256,7 @@ describe("Render Bundles", () => {
         });
 
         const depthTexture = device.createTexture({
-          size: [ctx.width, ctx.height],
+          size: [ctx.canvas.width, ctx.canvas.height],
           format: "depth24plus",
           usage: GPUTextureUsage.RENDER_ATTACHMENT,
         });
@@ -447,7 +448,7 @@ describe("Render Bundles", () => {
           },
         };
 
-        const aspect = ctx.width / ctx.height;
+        const aspect = ctx.canvas.width / ctx.canvas.height;
         const projectionMatrix = mat4.perspective(
           (2 * Math.PI) / 5,
           aspect,
@@ -569,7 +570,7 @@ describe("Render Bundles", () => {
           device.queue.submit([commandEncoder.finish()]);
         }
         frame();
-        return ctx.getImageData();
+        return canvas.getImageData();
       },
       { meshWGSL: mesh, vals: randomValues },
     );

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

@@ -3,7 +3,13 @@ import { checkImage, client, encodeImage } from "../setup";
 describe("Triangle", () => {
   it("Simple Triangle", 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: {
@@ -46,7 +52,7 @@ describe("Triangle", () => {
         passEncoder.draw(3);
         passEncoder.end();
         device.queue.submit([commandEncoder.finish()]);
-        return ctx.getImageData();
+        return canvas.getImageData();
       },
     );
     const image = encodeImage(result);
@@ -54,7 +60,13 @@ describe("Triangle", () => {
   });
   it("Async Simple Triangle", async () => {
     const result = await client.eval(
-      ({ device, shaders: { triangleVertWGSL, redFragWGSL }, gpu, ctx }) => {
+      ({
+        device,
+        shaders: { triangleVertWGSL, redFragWGSL },
+        gpu,
+        ctx,
+        canvas,
+      }) => {
         return device
           .createRenderPipelineAsync({
             layout: "auto",
@@ -98,7 +110,7 @@ describe("Triangle", () => {
             passEncoder.draw(3);
             passEncoder.end();
             device.queue.submit([commandEncoder.finish()]);
-            return ctx.getImageData();
+            return canvas.getImageData();
           });
       },
     );
@@ -107,7 +119,13 @@ describe("Triangle", () => {
   });
   it("Triangle MSAA", async () => {
     const result = await client.eval(
-      ({ device, shaders: { triangleVertWGSL, redFragWGSL }, gpu, ctx }) => {
+      ({
+        device,
+        shaders: { triangleVertWGSL, redFragWGSL },
+        gpu,
+        ctx,
+        canvas,
+      }) => {
         const sampleCount = 4;
         const presentationFormat = gpu.getPreferredCanvasFormat();
         const pipeline = device.createRenderPipeline({
@@ -136,7 +154,7 @@ describe("Triangle", () => {
         });
 
         const texture = device.createTexture({
-          size: [ctx.width, ctx.height],
+          size: [ctx.canvas.width, ctx.canvas.height],
           sampleCount,
           format: presentationFormat,
           usage: GPUTextureUsage.RENDER_ATTACHMENT,
@@ -163,7 +181,7 @@ describe("Triangle", () => {
         passEncoder.draw(3);
         passEncoder.end();
         device.queue.submit([commandEncoder.finish()]);
-        return ctx.getImageData();
+        return canvas.getImageData();
       },
     );
     const image = encodeImage(result);
@@ -171,7 +189,7 @@ describe("Triangle", () => {
   });
   it("Triangle with constants", async () => {
     const result = await client.eval(
-      ({ device, shaders: { triangleVertWGSL }, gpu, ctx }) => {
+      ({ device, shaders: { triangleVertWGSL }, gpu, ctx, canvas }) => {
         const pipeline = device.createRenderPipeline({
           layout: "auto",
           vertex: {
@@ -239,7 +257,7 @@ describe("Triangle", () => {
         passEncoder.draw(3);
         passEncoder.end();
         device.queue.submit([commandEncoder.finish()]);
-        return ctx.getImageData();
+        return canvas.getImageData();
       },
     );
     const image = encodeImage(result);

package/src/__tests__/setup.ts

@@ -11,7 +11,8 @@ import type { mat4, vec3, mat3 } from "wgpu-matrix";
 import type { Server, WebSocket } from "ws";
 import type { Browser, Page } from "puppeteer";
 
-import type { DrawingContext } from "./components/DrawingContext";
+import type { GPUOffscreenCanvas } from "../Offscreen";
+
 import { cubeVertexArray } from "./components/cube";
 import { redFragWGSL, triangleVertWGSL } from "./components/triangle";
 import { DEBUG, REFERENCE } from "./config";
@@ -26,7 +27,7 @@ declare global {
   var testOS: TestOS;
 }
 
-interface GPUContext {
+interface GPUTestingContext {
   gpu: GPU;
   adapter: GPUAdapter;
   device: GPUDevice;
@@ -43,7 +44,8 @@ interface GPUContext {
     moon: ImageData;
     saturn: ImageData;
   };
-  ctx: DrawingContext;
+  ctx: GPUCanvasContext;
+  canvas: GPUOffscreenCanvas;
   mat4: typeof mat4;
   vec3: typeof vec3;
   mat3: typeof mat3;
@@ -61,7 +63,7 @@ type JSONValue =
 
 interface TestingClient {
   eval<C = Ctx, R = JSONValue>(
-    fn: (ctx: GPUContext & C) => R | Promise<R>,
+    fn: (ctx: GPUTestingContext & C) => R | Promise<R>,
     ctx?: C,
   ): Promise<R>;
   OS: TestOS;
@@ -86,7 +88,7 @@ class RemoteTestingClient implements TestingClient {
   readonly arch = global.testArch;
 
   eval<C = Ctx, R = JSONValue>(
-    fn: (ctx: GPUContext & C) => R | Promise<R>,
+    fn: (ctx: GPUTestingContext & C) => R | Promise<R>,
     context?: C,
   ): Promise<R> {
     const ctx = this.prepareContext(context ?? {});
@@ -131,7 +133,7 @@ class ReferenceTestingClient implements TestingClient {
   private page: Page | null = null;
 
   async eval<C = Ctx, R = JSONValue>(
-    fn: (ctx: GPUContext & C) => R | Promise<R>,
+    fn: (ctx: GPUTestingContext & C) => R | Promise<R>,
     ctx?: C,
   ): Promise<R> {
     if (!this.page) {
@@ -139,7 +141,7 @@ class ReferenceTestingClient implements TestingClient {
     }
     const fTexturePath = path.join(
       __dirname,
-      "../../../../apps/paper/src/assets/f.png",
+      "../../../../apps/example/src/assets/f.png",
     );
     const fTextureData = fs.readFileSync(fTexturePath);
     const fTextureBase64 = `data:image/png;base64,${fTextureData.toString("base64")}`;
@@ -168,6 +170,14 @@ class ReferenceTestingClient implements TestingClient {
         getCurrentTexture() {
             return this.texture;
         }
+
+        get canvas() {
+          return {
+            width: this.width,
+            height: this.height,
+          };
+        }
+
         getImageData() {
             const commandEncoder = this.device.createCommandEncoder();
             const bytesPerRow = this.width * 4;
@@ -206,6 +216,11 @@ class ReferenceTestingClient implements TestingClient {
           redFragWGSL,
         },
         ctx,
+        canvas: {
+          getImageData: ctx.getImageData.bind(ctx),
+          width: ctx.width,
+          height: ctx.height,
+        },
         mat4,
         vec3,
         mat3,
@@ -234,13 +249,13 @@ class ReferenceTestingClient implements TestingClient {
       .catch((e) => console.log(e));
     await page.waitForNetworkIdle();
     const di3D = decodeImage(
-      path.join(__dirname, "../../../../apps/paper/src/assets/Di-3d.png"),
+      path.join(__dirname, "../../../../apps/example/src/assets/Di-3d.png"),
     );
     const moon = decodeImage(
-      path.join(__dirname, "../../../../apps/paper/src/assets/moon.png"),
+      path.join(__dirname, "../../../../apps/example/src/assets/moon.png"),
     );
     const saturn = decodeImage(
-      path.join(__dirname, "../../../../apps/paper/src/assets/saturn.png"),
+      path.join(__dirname, "../../../../apps/example/src/assets/saturn.png"),
     );
     await page.evaluate(
       `

package/src/index.tsx

@@ -2,6 +2,7 @@
 import WebGPUNativeModule from "./NativeWebGPUModule";
 
 export * from "./Canvas";
+export * from "./Offscreen";
 export * from "./WebGPUViewNativeComponent";
 export * from "./utils";
 export { default as WebGPUModule } from "./NativeWebGPUModule";

package/src/utils.ts

@@ -1,7 +1,6 @@
-import type { DependencyList } from "react";
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 
-import type { CanvasRef } from "./Canvas";
+import type { RNCanvasContext, CanvasRef } from "./Canvas";
 
 type Unsubscribe = () => void;
 
@@ -13,30 +12,41 @@ export const warnIfNotHardwareAccelerated = (adapter: GPUAdapter) => {
   }
 };
 
+export const useGPUContext = () => {
+  const [context, setContext] = useState<RNCanvasContext | null>(null);
+  const ref = useCanvasEffect(() => {
+    const ctx = ref.current!.getContext("webgpu")!;
+    setContext(ctx);
+  });
+  return { ref, context };
+};
+
 export const useCanvasEffect = (
-  effect: () => void | Unsubscribe | Promise<void | Unsubscribe>,
-  deps: DependencyList = [],
+  effect: () =>
+    | void
+    | Unsubscribe
+    | Promise<Unsubscribe | void>
+    | Promise<void>,
 ) => {
+  const unsub = useRef<Unsubscribe | null | Promise<Unsubscribe | void>>(null);
   const ref = useRef<CanvasRef>(null);
-  const unsubscribe = useRef<Unsubscribe>();
   useEffect(() => {
-    requestAnimationFrame(async () => {
-      // const adapter = await navigator.gpu.requestAdapter();
-      // if (!adapter) {
-      //   return;
-      // }
-      // const device = await adapter.requestDevice();
-      const unsub = await effect();
-      if (unsub) {
-        unsubscribe.current = unsub;
+    ref.current!.whenReady(async () => {
+      const sub = effect();
+      if (sub) {
+        unsub.current = sub;
       }
     });
     return () => {
-      if (unsubscribe.current) {
-        unsubscribe.current();
+      if (unsub.current) {
+        if (unsub.current instanceof Promise) {
+          unsub.current.then((sub) => sub && sub());
+        } else {
+          unsub.current();
+        }
       }
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, deps);
+  }, []);
   return ref;
 };

package/lib/typescript/src/__tests__/components/DrawingContext.d.ts

@@ -1,12 +0,0 @@
-export interface DrawingContext {
-    width: number;
-    height: number;
-    getCurrentTexture(): GPUTexture;
-    getImageData(): Promise<{
-        data: number[];
-        width: number;
-        height: number;
-        format: string;
-    }>;
-}
-//# sourceMappingURL=DrawingContext.d.ts.map

package/lib/typescript/src/__tests__/components/DrawingContext.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DrawingContext.d.ts","sourceRoot":"","sources":["../../../../../src/__tests__/components/DrawingContext.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,iBAAiB,IAAI,UAAU,CAAC;IAChC,YAAY,IAAI,OAAO,CAAC;QACtB,IAAI,EAAE,MAAM,EAAE,CAAC;QACf,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;QACf,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC,CAAC;CACJ"}

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

@@ -1,28 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
-<plist version="1.0">
-<dict>
-	<key>AvailableLibraries</key>
-	<array>
-		<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>
-	<key>XCFrameworkFormatVersion</key>
-	<string>1.0</string>
-</dict>
-</plist>

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

@@ -1,44 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
-<plist version="1.0">
-<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_visionos.a</string>
-			<key>LibraryIdentifier</key>
-			<string>xros-arm64_x86_64-simulator</string>
-			<key>LibraryPath</key>
-			<string>libwebgpu_dawn_visionos.a</string>
-			<key>SupportedArchitectures</key>
-			<array>
-				<string>arm64</string>
-				<string>x86_64</string>
-			</array>
-			<key>SupportedPlatform</key>
-			<string>xros</string>
-			<key>SupportedPlatformVariant</key>
-			<string>simulator</string>
-		</dict>
-	</array>
-	<key>CFBundlePackageType</key>
-	<string>XFWK</string>
-	<key>XCFrameworkFormatVersion</key>
-	<string>1.0</string>
-</dict>
-</plist>

package/src/__tests__/components/DrawingContext.ts

@@ -1,11 +0,0 @@
-export interface DrawingContext {
-  width: number;
-  height: number;
-  getCurrentTexture(): GPUTexture;
-  getImageData(): Promise<{
-    data: number[];
-    width: number;
-    height: number;
-    format: string;
-  }>;
-}