react-native-wgpu 0.2.10 → 0.3.0

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

@@ -1,266 +0,0 @@
-import { checkImage, client, encodeImage } from "../setup";
-
-describe("Triangle", () => {
-  it("Simple Triangle", async () => {
-    const result = await client.eval(
-      ({
-        device,
-        shaders: { triangleVertWGSL, redFragWGSL },
-        gpu,
-        ctx,
-        canvas,
-      }) => {
-        const pipeline = device.createRenderPipeline({
-          layout: "auto",
-          vertex: {
-            module: device.createShaderModule({
-              code: triangleVertWGSL,
-            }),
-          },
-          fragment: {
-            module: device.createShaderModule({
-              code: redFragWGSL,
-            }),
-            targets: [
-              {
-                format: gpu.getPreferredCanvasFormat(),
-              },
-            ],
-          },
-          primitive: {
-            topology: "triangle-list",
-          },
-        });
-
-        const commandEncoder = device.createCommandEncoder();
-        const textureView = ctx.getCurrentTexture().createView();
-
-        const renderPassDescriptor: GPURenderPassDescriptor = {
-          colorAttachments: [
-            {
-              view: textureView,
-              clearValue: [0.3, 0.6, 1, 1],
-              loadOp: "clear",
-              storeOp: "store",
-            },
-          ],
-        };
-
-        const passEncoder =
-          commandEncoder.beginRenderPass(renderPassDescriptor);
-        passEncoder.setPipeline(pipeline);
-        passEncoder.draw(3);
-        passEncoder.end();
-        device.queue.submit([commandEncoder.finish()]);
-        return canvas.getImageData();
-      },
-    );
-    const image = encodeImage(result);
-    checkImage(image, "snapshots/triangle.png");
-  });
-  it("Async Simple Triangle", async () => {
-    const result = await client.eval(
-      ({
-        device,
-        shaders: { triangleVertWGSL, redFragWGSL },
-        gpu,
-        ctx,
-        canvas,
-      }) => {
-        return device
-          .createRenderPipelineAsync({
-            layout: "auto",
-            vertex: {
-              module: device.createShaderModule({
-                code: triangleVertWGSL,
-              }),
-            },
-            fragment: {
-              module: device.createShaderModule({
-                code: redFragWGSL,
-              }),
-              targets: [
-                {
-                  format: gpu.getPreferredCanvasFormat(),
-                },
-              ],
-            },
-            primitive: {
-              topology: "triangle-list",
-            },
-          })
-          .then((pipeline) => {
-            const commandEncoder = device.createCommandEncoder();
-            const textureView = ctx.getCurrentTexture().createView();
-
-            const renderPassDescriptor: GPURenderPassDescriptor = {
-              colorAttachments: [
-                {
-                  view: textureView,
-                  clearValue: [0.3, 0.6, 1, 1],
-                  loadOp: "clear",
-                  storeOp: "store",
-                },
-              ],
-            };
-
-            const passEncoder =
-              commandEncoder.beginRenderPass(renderPassDescriptor);
-            passEncoder.setPipeline(pipeline);
-            passEncoder.draw(3);
-            passEncoder.end();
-            device.queue.submit([commandEncoder.finish()]);
-            return canvas.getImageData();
-          });
-      },
-    );
-    const image = encodeImage(result);
-    checkImage(image, "snapshots/triangle.png");
-  });
-  it("Triangle MSAA", async () => {
-    const result = await client.eval(
-      ({
-        device,
-        shaders: { triangleVertWGSL, redFragWGSL },
-        gpu,
-        ctx,
-        canvas,
-      }) => {
-        const sampleCount = 4;
-        const presentationFormat = gpu.getPreferredCanvasFormat();
-        const pipeline = device.createRenderPipeline({
-          layout: "auto",
-          vertex: {
-            module: device.createShaderModule({
-              code: triangleVertWGSL,
-            }),
-          },
-          fragment: {
-            module: device.createShaderModule({
-              code: redFragWGSL,
-            }),
-            targets: [
-              {
-                format: presentationFormat,
-              },
-            ],
-          },
-          primitive: {
-            topology: "triangle-list",
-          },
-          multisample: {
-            count: sampleCount,
-          },
-        });
-
-        const texture = device.createTexture({
-          size: [ctx.canvas.width, ctx.canvas.height],
-          sampleCount,
-          format: presentationFormat,
-          usage: GPUTextureUsage.RENDER_ATTACHMENT,
-        });
-        const view = texture.createView();
-
-        const commandEncoder = device.createCommandEncoder();
-
-        const renderPassDescriptor: GPURenderPassDescriptor = {
-          colorAttachments: [
-            {
-              view,
-              resolveTarget: ctx.getCurrentTexture().createView(),
-              clearValue: [0, 0, 0, 1],
-              loadOp: "clear",
-              storeOp: "discard",
-            },
-          ],
-        };
-
-        const passEncoder =
-          commandEncoder.beginRenderPass(renderPassDescriptor);
-        passEncoder.setPipeline(pipeline);
-        passEncoder.draw(3);
-        passEncoder.end();
-        device.queue.submit([commandEncoder.finish()]);
-        return canvas.getImageData();
-      },
-    );
-    const image = encodeImage(result);
-    checkImage(image, "snapshots/triangle-msaa.png");
-  });
-  it("Triangle with constants", async () => {
-    const result = await client.eval(
-      ({ device, shaders: { triangleVertWGSL }, gpu, ctx, canvas }) => {
-        const pipeline = device.createRenderPipeline({
-          layout: "auto",
-          vertex: {
-            module: device.createShaderModule({
-              code: triangleVertWGSL,
-            }),
-          },
-          fragment: {
-            module: device.createShaderModule({
-              code: `
-      @vertex fn vs(
-        @builtin(vertex_index) vertexIndex : u32
-      ) -> @builtin(position) vec4f {
-        let pos = array(
-          vec2f( 0.0,  0.5),  // top center
-          vec2f(-0.5, -0.5),  // bottom left
-          vec2f( 0.5, -0.5)   // bottom right
-        );
-
-        return vec4f(pos[vertexIndex], 0.0, 1.0);
-      }
-
-      override red = 0.0;
-      override green = 0.0;
-      override blue = 0.0;
-
-      @fragment fn fs() -> @location(0) vec4f {
-        return vec4f(red, green, blue, 1.0);
-      }
-    `,
-            }),
-            targets: [
-              {
-                format: gpu.getPreferredCanvasFormat(),
-              },
-            ],
-            constants: {
-              red: 1,
-              green: 0.5,
-              blue: 1,
-            },
-          },
-          primitive: {
-            topology: "triangle-list",
-          },
-        });
-
-        const commandEncoder = device.createCommandEncoder();
-        const textureView = ctx.getCurrentTexture().createView();
-
-        const renderPassDescriptor: GPURenderPassDescriptor = {
-          colorAttachments: [
-            {
-              view: textureView,
-              clearValue: [0.3, 0.6, 1, 1],
-              loadOp: "clear",
-              storeOp: "store",
-            },
-          ],
-        };
-
-        const passEncoder =
-          commandEncoder.beginRenderPass(renderPassDescriptor);
-        passEncoder.setPipeline(pipeline);
-        passEncoder.draw(3);
-        passEncoder.end();
-        device.queue.submit([commandEncoder.finish()]);
-        return canvas.getImageData();
-      },
-    );
-    const image = encodeImage(result);
-    checkImage(image, "snapshots/constant-triangle.png");
-  });
-});

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

@@ -1,188 +0,0 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-import { modelData as model } from "../components/Wireframe/models";
-import {
-  solidColorLitWGSL as solidColorLit,
-  wireframeWGSL as wireframe,
-} from "../components/Wireframe/Shaders";
-import { client } from "../setup";
-
-type Model = {
-  vertexBuffer: GPUBuffer;
-  indexBuffer: GPUBuffer;
-  indexFormat: GPUIndexFormat;
-  vertexCount: number;
-};
-
-type ModelData = Record<
-  string,
-  { vertices: Float32Array; indices: Uint32Array }
->;
-
-type SerializedModelData = Record<
-  string,
-  { vertices: number[]; indices: number[] }
->;
-
-const serializeModelData = (m: ModelData): SerializedModelData => {
-  const serialized: SerializedModelData = {};
-  for (const [key, value] of Object.entries(m)) {
-    serialized[key] = {
-      vertices: Array.from(value.vertices),
-      indices: Array.from(value.indices),
-    };
-  }
-  return serialized;
-};
-
-describe("Wireframe", () => {
-  it("draw scene", async () => {
-    const result = await client.eval(
-      ({ device, gpu, serializedData, solidColorLitWGSL, wireframeWGSL }) => {
-        const parseModelData = (m: SerializedModelData): ModelData => {
-          const parsed: ModelData = {};
-          for (const entry of Object.entries(m)) {
-            parsed[entry[0]] = {
-              vertices: new Float32Array(entry[1].vertices),
-              indices: new Uint32Array(entry[1].indices),
-            };
-          }
-          return parsed;
-        };
-
-        const modelData = parseModelData(serializedData);
-        const settings = {
-          barycentricCoordinatesBased: false,
-          thickness: 2,
-          alphaThreshold: 0.5,
-          animate: true,
-          lines: true,
-          depthBias: 1,
-          depthBiasSlopeScale: 0.5,
-          models: true,
-        };
-        function createBufferWithData(
-          // eslint-disable-next-line @typescript-eslint/no-shadow
-          device: GPUDevice,
-          data: Float32Array<ArrayBufferLike> | Uint32Array<ArrayBufferLike>,
-          usage: GPUBufferUsageFlags,
-        ) {
-          const buffer = device.createBuffer({
-            size: data.byteLength,
-            usage,
-          });
-          device.queue.writeBuffer(buffer, 0, data.buffer);
-          return buffer;
-        }
-
-        function createVertexAndIndexBuffer(
-          // eslint-disable-next-line @typescript-eslint/no-shadow
-          device: GPUDevice,
-          {
-            vertices,
-            indices,
-          }: { vertices: Float32Array; indices: Uint32Array },
-        ): Model {
-          const vertexBuffer = createBufferWithData(
-            device,
-            vertices,
-            GPUBufferUsage.VERTEX |
-              GPUBufferUsage.STORAGE |
-              GPUBufferUsage.COPY_DST,
-          );
-          const indexBuffer = createBufferWithData(
-            device,
-            indices,
-            GPUBufferUsage.INDEX |
-              GPUBufferUsage.STORAGE |
-              GPUBufferUsage.COPY_DST,
-          );
-          return {
-            vertexBuffer,
-            indexBuffer,
-            indexFormat: "uint32",
-            vertexCount: indices.length,
-          };
-        }
-
-        const presentationFormat = gpu.getPreferredCanvasFormat();
-        const depthFormat = "depth24plus";
-        // @ts-ignore
-        const models = Object.values(modelData).map((data) =>
-          createVertexAndIndexBuffer(device, data),
-        );
-        const litModule = device.createShaderModule({
-          code: solidColorLitWGSL,
-        });
-        // @ts-ignore
-        const wireframeModule = device.createShaderModule({
-          code: wireframeWGSL,
-        });
-        const litBindGroupLayout = device.createBindGroupLayout({
-          label: "lit bind group layout",
-          entries: [
-            {
-              binding: 0,
-              visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
-              buffer: {},
-            },
-          ],
-        });
-        const litPipeline = device.createRenderPipeline({
-          label: "lit pipeline",
-          layout: device.createPipelineLayout({
-            bindGroupLayouts: [litBindGroupLayout],
-          }),
-          vertex: {
-            module: litModule,
-            buffers: [
-              {
-                arrayStride: 6 * 4, // position, normal
-                attributes: [
-                  {
-                    // position
-                    shaderLocation: 0,
-                    offset: 0,
-                    format: "float32x3",
-                  },
-                  {
-                    // normal
-                    shaderLocation: 1,
-                    offset: 3 * 4,
-                    format: "float32x3",
-                  },
-                ],
-              },
-            ],
-          },
-          fragment: {
-            module: litModule,
-            targets: [{ format: presentationFormat }],
-          },
-          primitive: {
-            cullMode: "back",
-          },
-          depthStencil: {
-            depthWriteEnabled: true,
-            depthCompare: "less",
-            // Applying a depth bias can prevent aliasing from z-fighting with the
-            // wireframe lines. The depth bias has to be applied to the lit meshes
-            // rather that the wireframe because depthBias isn't considered when
-            // drawing line or point primitives.
-            depthBias: settings.depthBias,
-            depthBiasSlopeScale: settings.depthBiasSlopeScale,
-            format: depthFormat,
-          },
-        });
-        return litPipeline.label;
-      },
-      {
-        serializedData: serializeModelData(model),
-        solidColorLitWGSL: solidColorLit,
-        wireframeWGSL: wireframe,
-      },
-    );
-    expect(result).toBe("lit pipeline");
-    // const image = encodeImage(result);
-    // checkImage(image, "snapshots/wireframe.png");
-  });
-});

package/src/__tests__/globalSetup.ts

@@ -1,45 +0,0 @@
-import { WebSocketServer } from "ws";
-
-import { REFERENCE } from "./config";
-
-const isOS = (os: string): os is "android" | "ios" | "web" => {
-  return ["ios", "android", "web"].indexOf(os) !== -1;
-};
-
-const isArch = (arc: string): arc is "paper" | "fabric" => {
-  return ["paper", "fabric"].indexOf(arc) !== -1;
-};
-
-const globalSetup = () => {
-  return new Promise<void>((resolve) => {
-    if (REFERENCE) {
-      resolve();
-      return;
-    }
-    const port = 4242;
-    global.testServer = new WebSocketServer({ port });
-    console.log(
-      `\n\nTest server listening on port ${port} (waiting for the example app to open on E2E tests screen)`,
-    );
-    global.testServer.on("connection", (client) => {
-      global.testClient = client;
-      client.once("message", (msg) => {
-        const obj = JSON.parse(msg.toString("utf8"));
-        const { OS, arch } = obj;
-        if (!isOS(OS)) {
-          throw new Error("Unknown testing platform: " + OS);
-        }
-        if (!isArch(arch)) {
-          throw new Error("Unknown testing architecture: " + arch);
-        }
-        global.testOS = OS;
-        global.testArch = arch;
-        console.log(`${OS} device connected (${arch})`);
-        resolve();
-      });
-    });
-  });
-};
-
-// eslint-disable-next-line import/no-default-export
-export default globalSetup;

package/src/__tests__/globalTeardown.ts

@@ -1,11 +0,0 @@
-const globalTeardown = () => {
-  if (global.testClient) {
-    global.testClient.close();
-  }
-  if (global.testServer) {
-    global.testServer.close();
-  }
-};
-
-// eslint-disable-next-line import/no-default-export
-export default globalTeardown;