react-native-wgpu 0.1.5 → 0.1.7

package/src/__tests__/ExternalTexture.spec.ts

@@ -0,0 +1,284 @@
+import { checkImage, client, encodeImage } from "./setup";
+
+describe("External Textures", () => {
+  it("Simple (1)", async () => {
+    const result = await client.eval(
+      ({ gpu, device, ctx, urls: { fTexture } }) => {
+        const module = device.createShaderModule({
+          label: "our hardcoded textured quad shaders",
+          code: /* wgsl */ `
+          struct OurVertexShaderOutput {
+            @builtin(position) position: vec4f,
+            @location(0) texcoord: vec2f,
+          };
+    
+          @vertex fn vs(
+            @builtin(vertex_index) vertexIndex : u32
+          ) -> OurVertexShaderOutput {
+            let pos = array(
+              // 1st triangle
+              vec2f( 0.0,  0.0),  // center
+              vec2f( 1.0,  0.0),  // right, center
+              vec2f( 0.0,  1.0),  // center, top
+    
+              // 2st triangle
+              vec2f( 0.0,  1.0),  // center, top
+              vec2f( 1.0,  0.0),  // right, center
+              vec2f( 1.0,  1.0),  // right, top
+            );
+    
+            var vsOutput: OurVertexShaderOutput;
+            let xy = pos[vertexIndex];
+            vsOutput.position = vec4f(xy, 0.0, 1.0);
+            vsOutput.texcoord = xy;
+            return vsOutput;
+          }
+    
+          @group(0) @binding(0) var ourSampler: sampler;
+          @group(0) @binding(1) var ourTexture: texture_2d<f32>;
+    
+          @fragment fn fs(fsInput: OurVertexShaderOutput) -> @location(0) vec4f {
+            return textureSample(ourTexture, ourSampler, fsInput.texcoord);
+          }
+        `,
+        });
+
+        const presentationFormat = gpu.getPreferredCanvasFormat();
+        const pipeline = device.createRenderPipeline({
+          label: "hardcoded textured quad pipeline",
+          layout: "auto",
+          vertex: {
+            module,
+          },
+          fragment: {
+            module,
+            targets: [{ format: presentationFormat }],
+          },
+        });
+
+        return fetch(fTexture).then((res) => {
+          return res.blob().then((blob) => {
+            return createImageBitmap(blob, {
+              colorSpaceConversion: "none",
+            }).then((source) => {
+              const texture = device.createTexture({
+                label: fTexture,
+                format: "rgba8unorm",
+                size: [source.width, source.height],
+                usage:
+                  GPUTextureUsage.TEXTURE_BINDING |
+                  GPUTextureUsage.COPY_DST |
+                  GPUTextureUsage.RENDER_ATTACHMENT,
+              });
+              device.queue.copyExternalImageToTexture(
+                { source, flipY: true },
+                { texture },
+                { width: source.width, height: source.height },
+              );
+              const bindGroups: GPUBindGroup[] = [];
+              for (let i = 0; i < 8; ++i) {
+                const sampler = device.createSampler({
+                  addressModeU: i & 1 ? "repeat" : "clamp-to-edge",
+                  addressModeV: i & 2 ? "repeat" : "clamp-to-edge",
+                  magFilter: i & 4 ? "linear" : "nearest",
+                });
+
+                const bindGroup = device.createBindGroup({
+                  layout: pipeline.getBindGroupLayout(0),
+                  entries: [
+                    { binding: 0, resource: sampler },
+                    { binding: 1, resource: texture.createView() },
+                  ],
+                });
+                bindGroups.push(bindGroup);
+              }
+
+              const renderPassDescriptor: GPURenderPassDescriptor = {
+                label: "our basic canvas renderPass",
+                colorAttachments: [
+                  {
+                    view: ctx.getCurrentTexture().createView(), // Assigned later
+                    clearValue: [0.3, 0.3, 0.3, 1],
+                    loadOp: "clear",
+                    storeOp: "store",
+                  },
+                ],
+              };
+
+              const settings = {
+                addressModeU: "repeat",
+                addressModeV: "repeat",
+                magFilter: "linear",
+              };
+
+              function render() {
+                const ndx =
+                  (settings.addressModeU === "repeat" ? 1 : 0) +
+                  (settings.addressModeV === "repeat" ? 2 : 0) +
+                  (settings.magFilter === "linear" ? 4 : 0);
+                const bindGroup = bindGroups[ndx];
+
+                const encoder = device.createCommandEncoder({
+                  label: "render quad encoder",
+                });
+                const pass = encoder.beginRenderPass(renderPassDescriptor);
+                pass.setPipeline(pipeline);
+                pass.setBindGroup(0, bindGroup);
+                pass.draw(6); // call our vertex shader 6 times
+                pass.end();
+
+                const commandBuffer = encoder.finish();
+                device.queue.submit([commandBuffer]);
+              }
+              render();
+              return ctx.getImageData();
+            });
+          });
+        });
+      },
+      {},
+    );
+    const image = encodeImage(result);
+    checkImage(image, "snapshots/f.png");
+  });
+  it("Simple (2)", async () => {
+    const result = await client.eval(
+      ({ gpu, device, ctx, urls: { fTexture } }) => {
+        const module = device.createShaderModule({
+          label: "our hardcoded textured quad shaders",
+          code: /* wgsl */ `
+          struct OurVertexShaderOutput {
+            @builtin(position) position: vec4f,
+            @location(0) texcoord: vec2f,
+          };
+    
+          @vertex fn vs(
+            @builtin(vertex_index) vertexIndex : u32
+          ) -> OurVertexShaderOutput {
+            let pos = array(
+              // 1st triangle
+              vec2f( 0.0,  0.0),  // center
+              vec2f( 1.0,  0.0),  // right, center
+              vec2f( 0.0,  1.0),  // center, top
+    
+              // 2st triangle
+              vec2f( 0.0,  1.0),  // center, top
+              vec2f( 1.0,  0.0),  // right, center
+              vec2f( 1.0,  1.0),  // right, top
+            );
+    
+            var vsOutput: OurVertexShaderOutput;
+            let xy = pos[vertexIndex];
+            vsOutput.position = vec4f(xy, 0.0, 1.0);
+            vsOutput.texcoord = xy;
+            return vsOutput;
+          }
+    
+          @group(0) @binding(0) var ourSampler: sampler;
+          @group(0) @binding(1) var ourTexture: texture_2d<f32>;
+    
+          @fragment fn fs(fsInput: OurVertexShaderOutput) -> @location(0) vec4f {
+            return textureSample(ourTexture, ourSampler, fsInput.texcoord);
+          }
+        `,
+        });
+
+        const presentationFormat = gpu.getPreferredCanvasFormat();
+        const pipeline = device.createRenderPipeline({
+          label: "hardcoded textured quad pipeline",
+          layout: "auto",
+          vertex: {
+            module,
+          },
+          fragment: {
+            module,
+            targets: [{ format: presentationFormat }],
+          },
+        });
+
+        return fetch(fTexture).then((res) => {
+          return res.blob().then((blob) => {
+            return createImageBitmap(blob, {
+              colorSpaceConversion: "none",
+            }).then((source) => {
+              const texture = device.createTexture({
+                label: fTexture,
+                format: "rgba8unorm",
+                size: [source.width, source.height],
+                usage:
+                  GPUTextureUsage.TEXTURE_BINDING |
+                  GPUTextureUsage.COPY_DST |
+                  GPUTextureUsage.RENDER_ATTACHMENT,
+              });
+              device.queue.copyExternalImageToTexture(
+                { source },
+                { texture },
+                { width: source.width, height: source.height },
+              );
+              const bindGroups: GPUBindGroup[] = [];
+              for (let i = 0; i < 8; ++i) {
+                const sampler = device.createSampler({
+                  addressModeU: i & 1 ? "repeat" : "clamp-to-edge",
+                  addressModeV: i & 2 ? "repeat" : "clamp-to-edge",
+                  magFilter: i & 4 ? "linear" : "nearest",
+                });
+
+                const bindGroup = device.createBindGroup({
+                  layout: pipeline.getBindGroupLayout(0),
+                  entries: [
+                    { binding: 0, resource: sampler },
+                    { binding: 1, resource: texture.createView() },
+                  ],
+                });
+                bindGroups.push(bindGroup);
+              }
+
+              const renderPassDescriptor: GPURenderPassDescriptor = {
+                label: "our basic canvas renderPass",
+                colorAttachments: [
+                  {
+                    view: ctx.getCurrentTexture().createView(), // Assigned later
+                    clearValue: [0.3, 0.3, 0.3, 1],
+                    loadOp: "clear",
+                    storeOp: "store",
+                  },
+                ],
+              };
+
+              const settings = {
+                addressModeU: "repeat",
+                addressModeV: "repeat",
+                magFilter: "linear",
+              };
+
+              function render() {
+                const ndx =
+                  (settings.addressModeU === "repeat" ? 1 : 0) +
+                  (settings.addressModeV === "repeat" ? 2 : 0) +
+                  (settings.magFilter === "linear" ? 4 : 0);
+                const bindGroup = bindGroups[ndx];
+
+                const encoder = device.createCommandEncoder({
+                  label: "render quad encoder",
+                });
+                const pass = encoder.beginRenderPass(renderPassDescriptor);
+                pass.setPipeline(pipeline);
+                pass.setBindGroup(0, bindGroup);
+                pass.draw(6); // call our vertex shader 6 times
+                pass.end();
+
+                const commandBuffer = encoder.finish();
+                device.queue.submit([commandBuffer]);
+              }
+              render();
+              return ctx.getImageData();
+            });
+          });
+        });
+      },
+      {},
+    );
+    const image = encodeImage(result);
+    checkImage(image, "snapshots/f2.png");
+  });
+});

package/src/__tests__/GPU.spec.ts

@@ -0,0 +1,229 @@
+import { client } from "./setup";
+
+describe("Adapter", () => {
+  it("executes a simple function", async () => {
+    const result = await client.eval(() => 1 + 1);
+    expect(result).toBe(2);
+  });
+  it("executes a simple function from context", async () => {
+    const result = await client.eval(({ a, b, c }) => a + b + c, {
+      a: 1,
+      b: 2,
+      c: 3,
+    });
+    expect(result).toBe(6);
+  });
+  it("execute a simple async function (1)", async () => {
+    const result = await client.eval(
+      () =>
+        new Promise<number>((resolve) => setTimeout(() => resolve(1 + 1), 100)),
+    );
+    expect(result).toBe(2);
+  });
+  it("requestAdapter (1)", async () => {
+    const result = await client.eval(({ gpu }) => {
+      return gpu.requestAdapter().then((adapter) => adapter != null);
+    });
+    expect(result).toBe(true);
+  });
+  it("requestAdapter (2)", async () => {
+    const result = await client.eval(({ gpu }) => {
+      return gpu.requestAdapter(undefined).then((adapter) => adapter != null);
+    });
+    expect(result).toBe(true);
+  });
+  it("requestAdapter (3)", async () => {
+    const result = await client.eval(({ gpu }) => {
+      return gpu.requestAdapter(undefined).then((adapter) => adapter != null);
+    });
+    expect(result).toBe(true);
+  });
+  it("requestAdapter (4)", async () => {
+    const result = await client.eval(({ gpu }) => {
+      return gpu.requestAdapter({}).then((adapter) => adapter != null);
+    });
+    expect(result).toBe(true);
+  });
+  it("requestAdapter (5)", async () => {
+    const result = await client.eval(({ gpu }) => {
+      return gpu
+        .requestAdapter({ powerPreference: "low-power" })
+        .then((adapter) => adapter != null);
+    });
+    expect(result).toBe(true);
+  });
+  it("isFallback", async () => {
+    const result = await client.eval(({ adapter }) => {
+      return adapter.isFallbackAdapter;
+    });
+    expect(result).toBe(false);
+  });
+  it("features", async () => {
+    const result = await client.eval(({ adapter }) => {
+      return Array.from(adapter.features);
+    });
+    expect(result.includes("depth-clip-control")).toBe(true);
+    expect(result.includes("rg11b10ufloat-renderable")).toBe(true);
+    expect(result.includes("texture-compression-etc2")).toBe(true);
+  });
+  // it("requiredLimits", async () => {
+  //   const result = await client.eval(({ adapter }) => {
+  //     return adapter
+  //       .requestDevice({
+  //         requiredLimits: {
+  //           maxBufferSize: 1024 * 1024 * 4,
+  //         },
+  //       })
+  //       .then((device) => device.limits.maxBufferSize);
+  //   });
+  //   expect(result).toBe(1024 * 1024 * 4);
+  // });
+  // TODO: re-enable
+  // it("timestamp", async () => {
+  //   const result = await client.eval(({ adapter }) => {
+  //     return adapter.features.has("timestamp-query");
+  //   });
+  //   expect(result).toBe(true);
+  // });
+  // it("request device with timestamp queries", async () => {
+  //   const result = await client.eval(({ adapter }) => {
+  //     return adapter
+  //       .requestDevice({
+  //         requiredFeatures: ["timestamp-query"],
+  //       })
+  //       .then((device) => device.features.has("timestamp-query"));
+  //   });
+  //   expect(result).toBe(true);
+  // });
+  it("limits", async () => {
+    const result = await client.eval(({ adapter }) => {
+      const {
+        maxTextureDimension1D,
+        maxTextureDimension2D,
+        maxTextureDimension3D,
+        maxTextureArrayLayers,
+        maxBindGroups,
+        maxBindGroupsPlusVertexBuffers,
+        maxBindingsPerBindGroup,
+        maxDynamicUniformBuffersPerPipelineLayout,
+        maxDynamicStorageBuffersPerPipelineLayout,
+        maxSampledTexturesPerShaderStage,
+        maxSamplersPerShaderStage,
+        maxStorageBuffersPerShaderStage,
+        maxStorageTexturesPerShaderStage,
+        maxUniformBuffersPerShaderStage,
+        maxUniformBufferBindingSize,
+        maxStorageBufferBindingSize,
+        minUniformBufferOffsetAlignment,
+        minStorageBufferOffsetAlignment,
+        maxVertexBuffers,
+        maxBufferSize,
+        maxVertexAttributes,
+        maxVertexBufferArrayStride,
+        maxInterStageShaderComponents,
+        maxInterStageShaderVariables,
+        maxColorAttachments,
+        maxColorAttachmentBytesPerSample,
+        maxComputeWorkgroupStorageSize,
+        maxComputeInvocationsPerWorkgroup,
+        maxComputeWorkgroupSizeX,
+        maxComputeWorkgroupSizeY,
+        maxComputeWorkgroupSizeZ,
+        maxComputeWorkgroupsPerDimension,
+      } = adapter.limits;
+      return {
+        __brand: adapter.limits.__brand,
+        maxTextureDimension1D,
+        maxTextureDimension2D,
+        maxTextureDimension3D,
+        maxTextureArrayLayers,
+        maxBindGroups,
+        maxBindGroupsPlusVertexBuffers,
+        maxBindingsPerBindGroup,
+        maxDynamicUniformBuffersPerPipelineLayout,
+        maxDynamicStorageBuffersPerPipelineLayout,
+        maxSampledTexturesPerShaderStage,
+        maxSamplersPerShaderStage,
+        maxStorageBuffersPerShaderStage,
+        maxStorageTexturesPerShaderStage,
+        maxUniformBuffersPerShaderStage,
+        maxUniformBufferBindingSize,
+        maxStorageBufferBindingSize,
+        minUniformBufferOffsetAlignment,
+        minStorageBufferOffsetAlignment,
+        maxVertexBuffers,
+        maxBufferSize,
+        maxVertexAttributes,
+        maxVertexBufferArrayStride,
+        maxInterStageShaderComponents,
+        maxInterStageShaderVariables,
+        maxColorAttachments,
+        maxColorAttachmentBytesPerSample,
+        maxComputeWorkgroupStorageSize,
+        maxComputeInvocationsPerWorkgroup,
+        maxComputeWorkgroupSizeX,
+        maxComputeWorkgroupSizeY,
+        maxComputeWorkgroupSizeZ,
+        maxComputeWorkgroupsPerDimension,
+      };
+    });
+    if (result.__brand) {
+      expect(result.__brand).toBe("GPUSupportedLimits");
+    }
+    expect(result.maxBindGroups).toBeGreaterThan(0);
+    expect(result.maxBindGroupsPlusVertexBuffers).toBeGreaterThan(
+      result.maxBindGroups,
+    );
+    expect(result.maxBindingsPerBindGroup).toBeGreaterThan(0);
+    expect(result.maxBufferSize).toBeGreaterThan(0);
+    expect(result.maxColorAttachmentBytesPerSample).toBeGreaterThan(0);
+    expect(result.maxColorAttachments).toBeGreaterThan(0);
+    expect(result.maxComputeInvocationsPerWorkgroup).toBeGreaterThan(0);
+    expect(result.maxComputeWorkgroupSizeX).toBeGreaterThan(0);
+    expect(result.maxComputeWorkgroupSizeY).toBeGreaterThan(0);
+    expect(result.maxComputeWorkgroupSizeZ).toBeGreaterThan(0);
+    expect(result.maxComputeWorkgroupStorageSize).toBeGreaterThan(0);
+    expect(result.maxComputeWorkgroupsPerDimension).toBeGreaterThan(0);
+
+    // For alignment values, check if they're powers of 2
+    expect(Math.log2(result.minStorageBufferOffsetAlignment) % 1).toBe(0);
+    expect(Math.log2(result.minUniformBufferOffsetAlignment) % 1).toBe(0);
+
+    // For maximum dimensions, you might want to set a reasonable lower bound
+    expect(result.maxTextureDimension1D).toBeGreaterThanOrEqual(2048);
+    expect(result.maxTextureDimension2D).toBeGreaterThanOrEqual(2048);
+    expect(result.maxTextureDimension3D).toBeGreaterThanOrEqual(256);
+  });
+  // it("adapter info", async () => {
+  //   const result = await client.eval(({ adapter }) => {
+  //     return {
+  //       __brand: adapter.info.__brand,
+  //       description: adapter.info.description,
+  //       architecture: adapter.info.architecture,
+  //       device: adapter.info.device,
+  //       vendor: adapter.info.vendor,
+  //     };
+  //   });
+  //   expect(result.description).toBeTruthy();
+  //   expect(result.architecture).toBeTruthy();
+  //   expect(result.device).toBeTruthy();
+  //   expect(result.vendor).toBeTruthy();
+  // });
+  it("getPreferredCanvasFormat", async () => {
+    const result = await client.eval(({ gpu }) => {
+      return gpu.getPreferredCanvasFormat();
+    });
+    expect(result).toBe(client.OS === "android" ? "rgba8unorm" : "bgra8unorm");
+  });
+  it("wgslLanguageFeatures", async () => {
+    const result = await client.eval(({ gpu }) => {
+      return Array.from(gpu.wgslLanguageFeatures);
+    });
+    expect(result.includes("readonly_and_readwrite_storage_textures")).toBe(
+      true,
+    );
+    expect(result.includes("packed_4x8_integer_dot_product")).toBe(true);
+    expect(result.includes("unrestricted_pointer_parameters")).toBe(true);
+    expect(result.includes("pointer_composite_access")).toBe(true);
+  });
+});

package/src/__tests__/ImageData.spec.ts

@@ -0,0 +1,26 @@
+import path from "path";
+
+import { checkImage, client, encodeImage, decodeImage } from "./setup";
+
+describe("Image Bitmap", () => {
+  it("createImageBitmap (1)", async () => {
+    const bitmap = await decodeImage(
+      path.join(__dirname, "./assets/Di-3d.png"),
+    );
+    const image = encodeImage(bitmap);
+    checkImage(image, "snapshots/ref.png");
+  });
+  it("createImageBitmap (2)", async () => {
+    const bitmap = await decodeImage(
+      path.join(__dirname, "./assets/Di-3d.png"),
+    );
+    const result = await client.eval(
+      ({ bitmap: bmp }) => {
+        return bmp;
+      },
+      { bitmap },
+    );
+    const image = encodeImage(result);
+    checkImage(image, "snapshots/ref.png");
+  });
+});