react-native-wgpu 0.1.5 → 0.1.7

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

@@ -0,0 +1,248 @@
+import { checkImage, client, encodeImage } from "../setup";
+
+describe("Triangle", () => {
+  it("Simple Triangle", async () => {
+    const result = await client.eval(
+      ({ device, shaders: { triangleVertWGSL, redFragWGSL }, gpu, ctx }) => {
+        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 ctx.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 }) => {
+        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 ctx.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 }) => {
+        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.width, ctx.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 ctx.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 }) => {
+        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 ctx.getImageData();
+      },
+    );
+    const image = encodeImage(result);
+    checkImage(image, "snapshots/constant-triangle.png");
+  });
+});

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

@@ -0,0 +1,190 @@
+/* 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 TypedArrayView = Float32Array | Uint32Array;
+
+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: TypedArrayView,
+          usage: GPUBufferUsageFlags,
+        ) {
+          const buffer = device.createBuffer({
+            size: data.byteLength,
+            usage,
+          });
+          device.queue.writeBuffer(buffer, 0, data);
+          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

@@ -0,0 +1,54 @@
+/* eslint-disable no-var */
+import type { Server, WebSocket } from "ws";
+import { WebSocketServer } from "ws";
+
+import { REFERENCE } from "./config";
+
+declare global {
+  var testServer: Server;
+  var testClient: WebSocket;
+  var testOS: "ios" | "android" | "web" | "node";
+  var testArch: "paper" | "fabric";
+}
+
+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

@@ -0,0 +1,11 @@
+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;