react-native-wgpu 0.2.9 → 0.3.0

package/src/__tests__/ExternalTexture.spec.ts

@@ -1,284 +0,0 @@
-import { checkImage, client, encodeImage } from "./setup";
-
-describe("External Textures", () => {
-  it("Simple (1)", async () => {
-    const result = await client.eval(
-      ({ gpu, device, ctx, canvas, 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 canvas.getImageData();
-            });
-          });
-        });
-      },
-      {},
-    );
-    const image = encodeImage(result);
-    checkImage(image, "snapshots/f.png");
-  });
-  it("Simple (2)", async () => {
-    const result = await client.eval(
-      ({ gpu, device, ctx, canvas, 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 canvas.getImageData();
-            });
-          });
-        });
-      },
-      {},
-    );
-    const image = encodeImage(result);
-    checkImage(image, "snapshots/f2.png");
-  });
-});

package/src/__tests__/GPU.spec.ts

@@ -1,272 +0,0 @@
-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("requestAdapter (6)", async () => {
-    const result = await client.eval(({ gpu }) => {
-      return gpu.requestAdapter().then((adapter) => {
-        if (!adapter) {
-          return null;
-        }
-        return {
-          vendor: adapter.info.vendor,
-          architecture: adapter.info.architecture,
-          device: adapter.info.device,
-          description: adapter.info.description,
-        };
-      });
-    });
-    expect(result).toBeDefined();
-    expect(result!.vendor).toBeDefined();
-    expect(result!.architecture).toBeDefined();
-    expect(result!.device).toBeDefined();
-    expect(result!.description).toBeDefined();
-  });
-  it("isFallback", async () => {
-    const result = await client.eval(({ gpu }) => {
-      return gpu
-        .requestAdapter()
-        .then((adapter) => adapter && adapter.info.isFallbackAdapter);
-    });
-    expect(result).toBe(false);
-  });
-  it("features", async () => {
-    const result = await client.eval(({ gpu }) => {
-      return gpu
-        .requestAdapter()
-        .then((adapter) => 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(({ gpu }) => {
-      return gpu.requestAdapter().then((adapter) =>
-        adapter!
-          .requestDevice({
-            requiredLimits: {
-              maxBufferSize: 1024 * 1024 * 4,
-            },
-          })
-          .then((device) => !!device),
-      );
-    });
-    expect(result).toBe(true);
-  });
-  it("request device with timestamp queries", async () => {
-    const result = await client.eval(({ gpu }) => {
-      return gpu.requestAdapter().then((adapter) => {
-        if (adapter!.features.has("timestamp-query")) {
-          return adapter!
-            .requestDevice({
-              requiredFeatures: ["timestamp-query"],
-            })
-            .then((device) => device.features.has("timestamp-query"));
-        }
-        return true;
-      });
-    });
-    expect(result).toBe(true);
-  });
-  it("request device faulty input", async () => {
-    const result = await client.eval(({ gpu }) => {
-      return gpu.requestAdapter().then((adapter) =>
-        adapter!
-          .requestDevice({
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-expect-error
-            requiredFeatures: [["bgra8unorm-storage"]],
-            requiredLimits: {
-              maxComputeWorkgroupStorageSize: 16352,
-              maxComputeWorkgroupsPerDimension: 65535,
-              maxStorageBufferBindingSize: 268435456,
-              maxBufferSize: 268435456,
-              maxComputeWorkgroupSizeX: 512,
-              maxComputeInvocationsPerWorkgroup: 512,
-            },
-          })
-          .then((device) => !!device),
-      );
-    });
-    expect(result).toBe(true);
-  });
-  // it("request device with unknown feature", async () => {
-  //   const result = await client.eval(({ adapter }) => {
-  //     return adapter
-  //       .requestDevice({
-  //         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  //         // @ts-expect-error
-  //         requiredFeatures: ["foobar"],
-  //       })
-  //       .catch(() => true);
-  //   });
-  //   expect(result).toBe(true);
-  // });
-  it("limits", async () => {
-    const result = await client.eval(({ gpu }) => {
-      return gpu.requestAdapter().then((adapter) => {
-        const {
-          maxTextureDimension1D,
-          maxTextureDimension2D,
-          maxTextureDimension3D,
-          maxTextureArrayLayers,
-          maxBindGroups,
-          maxBindGroupsPlusVertexBuffers,
-          maxBindingsPerBindGroup,
-          maxDynamicUniformBuffersPerPipelineLayout,
-          maxDynamicStorageBuffersPerPipelineLayout,
-          maxSampledTexturesPerShaderStage,
-          maxSamplersPerShaderStage,
-          maxStorageBuffersPerShaderStage,
-          maxStorageTexturesPerShaderStage,
-          maxUniformBuffersPerShaderStage,
-          maxUniformBufferBindingSize,
-          maxStorageBufferBindingSize,
-          minUniformBufferOffsetAlignment,
-          minStorageBufferOffsetAlignment,
-          maxVertexBuffers,
-          maxBufferSize,
-          maxVertexAttributes,
-          maxVertexBufferArrayStride,
-          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,
-          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("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

@@ -1,26 +0,0 @@
-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");
-  });
-});