react-native-wgpu 0.2.10 → 0.3.0

package/src/__tests__/Shaders.spec.ts

@@ -1,232 +0,0 @@
-import { client } from "./setup";
-
-describe("Triangle", () => {
-  it("creates a shader module (1)", async () => {
-    const result = await client.eval(
-      ({ device, shaders: { triangleVertWGSL } }) => {
-        const mod = device.createShaderModule({
-          code: triangleVertWGSL,
-          label: "triangleVertWGSL",
-        });
-        return mod.label;
-      },
-    );
-    expect(result).toBe("triangleVertWGSL");
-  });
-  it("creates a shader module (2)", async () => {
-    const result = await client.eval(({ device, shaders: { redFragWGSL } }) => {
-      const mod = device.createShaderModule({
-        code: redFragWGSL,
-        label: "redFragWGSL",
-      });
-      return mod.label;
-    });
-    expect(result).toBe("redFragWGSL");
-  });
-  it("creates a shader module (3)", async () => {
-    const result = await client.eval(({ device, shaders: { redFragWGSL } }) => {
-      const mod = device.createShaderModule({
-        code: redFragWGSL,
-        label: "redFragWGSL",
-      });
-      return mod.getCompilationInfo().then((info) => info.messages.length);
-    });
-    // On Chrome the message property is undefined if no errors are present
-    expect(result).toBe(0);
-  });
-  // it("creates a shader module (4)", async () => {
-  //   const result = await client.eval(({ device, shaders: { redFragWGSL } }) => {
-  //     const mod = device.createShaderModule({
-  //       code: redFragWGSL + "  ++++ ",
-  //       label: "redFragWGSL",
-  //     });
-  //     return mod.getCompilationInfo().then((info) => {
-  //       const msg1 = info.messages[0];
-  //       const msg2 = info.messages[1];
-  //       return {
-  //         messages: [
-  //           { type: msg1.type, message: msg1.message },
-  //           { type: msg2.type, message: msg2.message },
-  //         ],
-  //       };
-  //     });
-  //   });
-  //   expect(result).toEqual({
-  //     messages: [
-  //       { type: "error", message: "unexpected token" },
-  //       { type: "error", message: "unexpected token" },
-  //     ],
-  //   });
-  // });
-  it("create the pipeline", async () => {
-    const result = await client.eval(
-      ({ device, shaders: { triangleVertWGSL, redFragWGSL } }) => {
-        const pipeline = device.createRenderPipeline({
-          layout: "auto",
-          vertex: {
-            module: device.createShaderModule({
-              code: triangleVertWGSL,
-            }),
-          },
-          fragment: {
-            module: device.createShaderModule({
-              code: redFragWGSL,
-            }),
-            targets: [
-              {
-                format: navigator.gpu.getPreferredCanvasFormat(),
-              },
-            ],
-          },
-          primitive: {
-            topology: "triangle-list",
-          },
-          label: "trianglePipeline",
-        });
-        return pipeline.label;
-      },
-    );
-    expect(result).toBe("trianglePipeline");
-  });
-  it("create the pipeline and sample it", async () => {
-    const result = await client.eval(
-      ({ device, shaders: { triangleVertWGSL, redFragWGSL }, gpu }) => {
-        // Create a texture to render to
-        const textureSize = 512;
-        const texture = device.createTexture({
-          size: [textureSize, textureSize],
-          format: gpu.getPreferredCanvasFormat(),
-          usage:
-            GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING,
-        });
-
-        // Create a pipeline for rendering to the texture
-        const texturePipeline = device.createRenderPipeline({
-          layout: "auto",
-          vertex: {
-            module: device.createShaderModule({
-              code: triangleVertWGSL,
-            }),
-            entryPoint: "main",
-          },
-          fragment: {
-            module: device.createShaderModule({
-              code: redFragWGSL,
-            }),
-            entryPoint: "main",
-            targets: [{ format: gpu.getPreferredCanvasFormat() }],
-          },
-          primitive: {
-            topology: "triangle-list",
-          },
-        });
-
-        // Create a pipeline for displaying the texture
-        const displayPipeline = device.createRenderPipeline({
-          layout: "auto",
-          vertex: {
-            module: device.createShaderModule({
-              code: `struct VertexOutput {
-      @builtin(position) position: vec4<f32>,
-      @location(0) texCoord: vec2<f32>,
-  };
-
-  @vertex
-  fn main(@builtin(vertex_index) vertexIndex: u32) -> VertexOutput {
-      var output: VertexOutput;
-      let x = f32(vertexIndex & 1u) * 2.0 - 1.0;
-      let y = f32(vertexIndex & 2u) - 1.0;
-      output.position = vec4<f32>(x, y, 0.0, 1.0);
-      output.texCoord = vec2<f32>((x + 1.0) * 0.5, (1.0 - y) * 0.5);
-      return output;
-  }`,
-            }),
-            entryPoint: "main",
-          },
-          fragment: {
-            module: device.createShaderModule({
-              code: `@group(0) @binding(0) var texSampler: sampler;
-  @group(0) @binding(1) var tex: texture_2d<f32>;
-
-  @fragment
-  fn main(@location(0) texCoord: vec2<f32>) -> @location(0) vec4<f32> {
-      return textureSample(tex, texSampler, texCoord);
-  }`,
-            }),
-            entryPoint: "main",
-            targets: [{ format: gpu.getPreferredCanvasFormat() }],
-          },
-          primitive: {
-            topology: "triangle-list",
-          },
-        });
-        // Create a bind group for the texture
-        const sampler = device.createSampler({
-          magFilter: "linear",
-          minFilter: "linear",
-        });
-
-        const bindGroup = device.createBindGroup({
-          layout: displayPipeline.getBindGroupLayout(0),
-          entries: [
-            {
-              binding: 0,
-              resource: sampler,
-            },
-            {
-              binding: 1,
-              resource: texture.createView(),
-            },
-          ],
-        });
-
-        // // Render the triangle to the texture
-        const commandEncoder = device.createCommandEncoder();
-        const textureView = texture.createView();
-
-        const renderPassDescriptor: GPURenderPassDescriptor = {
-          colorAttachments: [
-            {
-              view: textureView,
-              clearValue: [0, 0, 0, 1],
-              loadOp: "clear",
-              storeOp: "store",
-            },
-          ],
-        };
-
-        const passEncoder =
-          commandEncoder.beginRenderPass(renderPassDescriptor);
-        passEncoder.setPipeline(texturePipeline);
-        passEncoder.draw(3);
-        passEncoder.end();
-
-        device.queue.submit([commandEncoder.finish()]);
-
-        // // // Function to display the texture on the screen
-        const cmdEncoder = device.createCommandEncoder();
-
-        const renderPD: GPURenderPassDescriptor = {
-          colorAttachments: [
-            {
-              view: textureView,
-              clearValue: [0.5, 0.5, 0.5, 1],
-              loadOp: "clear",
-              storeOp: "store",
-            },
-          ],
-        };
-
-        const encoder = cmdEncoder.beginRenderPass(renderPD);
-        encoder.setPipeline(displayPipeline);
-        encoder.setBindGroup(0, bindGroup);
-        encoder.draw(6);
-        encoder.end();
-
-        //device.queue.submit([cmdEncoder.finish()]);
-        return true;
-      },
-    );
-    expect(result).toBe(true);
-  });
-});

package/src/__tests__/Texture.spec.ts

@@ -1,197 +0,0 @@
-import { checkImage, client, encodeImage } from "./setup";
-
-describe("Texture", () => {
-  it("Check usage", async () => {
-    const result = await client.eval(() => {
-      return (
-        GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING
-      );
-    });
-    expect(result).toBe(20);
-  });
-  it("create texture (1)", async () => {
-    const result = await client.eval(({ device }) => {
-      const textureSize = 512;
-      const texture = device.createTexture({
-        size: [textureSize, textureSize],
-        format: "rgba8unorm",
-        usage:
-          GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING,
-        label: "texture",
-      });
-      return [
-        texture.label,
-        texture.width,
-        texture.height,
-        texture.depthOrArrayLayers,
-        texture.mipLevelCount,
-        texture.sampleCount,
-        texture.dimension,
-        texture.format,
-        texture.usage,
-      ];
-    });
-    expect(result).toEqual([
-      "texture",
-      512,
-      512,
-      1,
-      1,
-      1,
-      "2d",
-      "rgba8unorm",
-      20,
-    ]);
-  });
-  it("Write to texture", async () => {
-    const result = await client.eval(
-      ({ device, shaders: { triangleVertWGSL, redFragWGSL } }) => {
-        // Define the size of the off-screen texture
-        const textureWidth = 800;
-        const textureHeight = 600;
-
-        // Calculate bytesPerRow to be a multiple of 256
-        const bytesPerRow = Math.ceil((textureWidth * 4) / 256) * 256;
-
-        // Calculate the required buffer size
-        const bufferSize = bytesPerRow * textureHeight;
-
-        // Create the off-screen texture
-        const texture = device.createTexture({
-          size: [textureWidth, textureHeight],
-          format: "rgba8unorm",
-          usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_SRC,
-        });
-
-        const pipeline = device.createRenderPipeline({
-          layout: "auto",
-          vertex: {
-            module: device.createShaderModule({
-              code: triangleVertWGSL,
-            }),
-            entryPoint: "main",
-          },
-          fragment: {
-            module: device.createShaderModule({
-              code: redFragWGSL,
-            }),
-            entryPoint: "main",
-            targets: [
-              {
-                format: "rgba8unorm",
-              },
-            ],
-          },
-          primitive: {
-            topology: "triangle-list",
-          },
-        });
-
-        // Create a buffer to store the rendered image
-        const outputBuffer = device.createBuffer({
-          size: bufferSize,
-          usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ,
-        });
-
-        const commandEncoder = device.createCommandEncoder();
-        const textureView = texture.createView();
-
-        const renderPassDescriptor: GPURenderPassDescriptor = {
-          colorAttachments: [
-            {
-              view: textureView,
-              clearValue: [0, 0, 0, 1],
-              loadOp: "clear",
-              storeOp: "store",
-            },
-          ],
-        };
-
-        const passEncoder =
-          commandEncoder.beginRenderPass(renderPassDescriptor);
-        passEncoder.setPipeline(pipeline);
-        passEncoder.draw(3);
-        passEncoder.end();
-
-        // Copy the rendered texture to the output buffer
-        commandEncoder.copyTextureToBuffer(
-          { texture },
-          { buffer: outputBuffer, bytesPerRow: bytesPerRow },
-          [textureWidth, textureHeight],
-        );
-
-        device.queue.submit([commandEncoder.finish()]);
-        return [
-          texture.label,
-          texture.width,
-          texture.height,
-          texture.depthOrArrayLayers,
-          texture.mipLevelCount,
-          texture.sampleCount,
-          texture.dimension,
-          texture.format,
-          texture.usage,
-        ];
-      },
-    );
-    expect(result).toEqual(["", 800, 600, 1, 1, 1, "2d", "rgba8unorm", 17]);
-  });
-  it("Create texture and reads it", 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, 0, 0, 0],
-              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/texture.png");
-  });
-});

package/src/__tests__/components/Wireframe/Shaders.ts

@@ -1,138 +0,0 @@
-export const solidColorLitWGSL = /*wgsl*/ `struct Uniforms {
-  worldViewProjectionMatrix: mat4x4f,
-  worldMatrix: mat4x4f,
-  color: vec4f,
-};
-
-struct Vertex {
-  @location(0) position: vec4f,
-  @location(1) normal: vec3f,
-};
-
-struct VSOut {
-  @builtin(position) position: vec4f,
-  @location(0) normal: vec3f,
-};
-
-@group(0) @binding(0) var<uniform> uni: Uniforms;
-
-@vertex fn vs(vin: Vertex) -> VSOut {
-  var vOut: VSOut;
-  vOut.position = uni.worldViewProjectionMatrix * vin.position;
-  vOut.normal = (uni.worldMatrix * vec4f(vin.normal, 0)).xyz;
-  return vOut;
-}
-
-@fragment fn fs(vin: VSOut) -> @location(0) vec4f {
-  let lightDirection = normalize(vec3f(4, 10, 6));
-  let light = dot(normalize(vin.normal), lightDirection) * 0.5 + 0.5;
-  return vec4f(uni.color.rgb * light, uni.color.a);
-}`;
-
-export const wireframeWGSL = /*wgsl*/ `struct Uniforms {
-  worldViewProjectionMatrix: mat4x4f,
-  worldMatrix: mat4x4f,
-  color: vec4f,
-};
-
-struct LineUniforms {
-  stride: u32,
-  thickness: f32,
-  alphaThreshold: f32,
-};
-
-struct VSOut {
-  @builtin(position) position: vec4f,
-};
-
-@group(0) @binding(0) var<uniform> uni: Uniforms;
-@group(0) @binding(1) var<storage, read> positions: array<f32>;
-@group(0) @binding(2) var<storage, read> indices: array<u32>;
-@group(0) @binding(3) var<uniform> line: LineUniforms;
-
-@vertex fn vsIndexedU32(@builtin(vertex_index) vNdx: u32) -> VSOut {
-  // indices make a triangle so for every 3 indices we need to output
-  // 6 values
-  let triNdx = vNdx / 6;
-  // 0 1 0 1 0 1  0 1 0 1 0 1  vNdx % 2
-  // 0 0 1 1 2 2  3 3 4 4 5 5  vNdx / 2
-  // 0 1 1 2 2 3  3 4 4 5 5 6  vNdx % 2 + vNdx / 2
-  // 0 1 1 2 2 0  0 1 1 2 2 0  (vNdx % 2 + vNdx / 2) % 3
-  let vertNdx = (vNdx % 2 + vNdx / 2) % 3;
-  let index = indices[triNdx * 3 + vertNdx];
-
-  // note:
-  //
-  // * if your indices are U16 you could use this
-  //
-  //    let indexNdx = triNdx * 3 + vertNdx;
-  //    let twoIndices = indices[indexNdx / 2];  // indices is u32 but we want u16
-  //    let index = (twoIndices >> ((indexNdx & 1) * 16)) & 0xFFFF;
-  //
-  // * if you're not using indices you could use this
-  //
-  //    let index = triNdx * 3 + vertNdx;
-
-  let pNdx = index * line.stride;
-  let position = vec4f(positions[pNdx], positions[pNdx + 1], positions[pNdx + 2], 1);
-
-  var vOut: VSOut;
-  vOut.position = uni.worldViewProjectionMatrix * position;
-  return vOut;
-}
-
-@fragment fn fs() -> @location(0) vec4f {
-  return uni.color + vec4f(0.5);
-}
-
-struct BarycentricCoordinateBasedVSOutput {
-  @builtin(position) position: vec4f,
-  @location(0) barycenticCoord: vec3f,
-};
-
-@vertex fn vsIndexedU32BarycentricCoordinateBasedLines(
-  @builtin(vertex_index) vNdx: u32
-) -> BarycentricCoordinateBasedVSOutput {
-  let vertNdx = vNdx % 3;
-  let index = indices[vNdx];
-
-  // note:
-  //
-  // * if your indices are U16 you could use this
-  //
-  //    let twoIndices = indices[vNdx / 2];  // indices is u32 but we want u16
-  //    let index = (twoIndices >> ((vNdx & 1) * 16)) & 0xFFFF;
-  //
-  // * if you're not using indices you could use this
-  //
-  //    let index = vNdx;
-
-  let pNdx = index * line.stride;
-  let position = vec4f(positions[pNdx], positions[pNdx + 1], positions[pNdx + 2], 1);
-
-  var vsOut: BarycentricCoordinateBasedVSOutput;
-  vsOut.position = uni.worldViewProjectionMatrix * position;
-
-  // emit a barycentric coordinate
-  vsOut.barycenticCoord = vec3f(0);
-  vsOut.barycenticCoord[vertNdx] = 1.0;
-  return vsOut;
-}
-
-fn edgeFactor(bary: vec3f) -> f32 {
-  let d = fwidth(bary);
-  let a3 = smoothstep(vec3f(0.0), d * line.thickness, bary);
-  return min(min(a3.x, a3.y), a3.z);
-}
-
-@fragment fn fsBarycentricCoordinateBasedLines(
-  v: BarycentricCoordinateBasedVSOutput
-) -> @location(0) vec4f {
-  let a = 1.0 - edgeFactor(v.barycenticCoord);
-  if (a < line.alphaThreshold) {
-    discard;
-  }
-
-  return vec4((uni.color.rgb + 0.5) * a, a);
-}
-`;

package/src/__tests__/components/Wireframe/models.ts

@@ -1,113 +0,0 @@
-// Ideally all the models would be the same format
-// and we'd determine that format at build time or before
-// but, we want to reuse the model data in this repo
-// so we'll normalize it here
-
-import { vec3 } from "wgpu-matrix";
-
-import { mesh as teapot } from "../meshes/teapot";
-import { createSphereMesh } from "../meshes/sphere";
-
-type Mesh = {
-  positions: [number, number, number][];
-  triangles: [number, number, number][];
-  normals: [number, number, number][];
-};
-
-export function convertMeshToTypedArrays(
-  mesh: Mesh,
-  scale: number,
-  offset = [0, 0, 0],
-) {
-  const { positions, normals, triangles } = mesh;
-  const scaledPositions = positions.map((p) =>
-    p.map((v, i) => v * scale + offset[i % 3]),
-  );
-  const vertices = new Float32Array(scaledPositions.length * 6);
-  for (let i = 0; i < scaledPositions.length; ++i) {
-    vertices.set(scaledPositions[i], 6 * i);
-    vertices.set(normals[i], 6 * i + 3);
-  }
-  const indices = new Uint32Array(triangles.length * 3);
-  for (let i = 0; i < triangles.length; ++i) {
-    indices.set(triangles[i], 3 * i);
-  }
-
-  return {
-    vertices,
-    indices,
-  };
-}
-
-function createSphereTypedArrays(
-  radius: number,
-  widthSegments = 32,
-  heightSegments = 16,
-  randomness = 0,
-) {
-  const { vertices: verticesWithUVs, indices } = createSphereMesh(
-    radius,
-    widthSegments,
-    heightSegments,
-    randomness,
-  );
-  const numVertices = verticesWithUVs.length / 8;
-  const vertices = new Float32Array(numVertices * 6);
-  for (let i = 0; i < numVertices; ++i) {
-    const srcNdx = i * 8;
-    const dstNdx = i * 6;
-    vertices.set(verticesWithUVs.subarray(srcNdx, srcNdx + 6), dstNdx);
-  }
-  return {
-    vertices,
-    indices: new Uint32Array(indices),
-  };
-}
-
-function flattenNormals({
-  vertices,
-  indices,
-}: {
-  vertices: Float32Array;
-  indices: Uint32Array;
-}) {
-  const newVertices = new Float32Array(indices.length * 6);
-  const newIndices = new Uint32Array(indices.length);
-  for (let i = 0; i < indices.length; i += 3) {
-    const positions = [];
-    for (let j = 0; j < 3; ++j) {
-      const ndx = indices[i + j];
-      const srcNdx = ndx * 6;
-      const dstNdx = (i + j) * 6;
-      // copy position
-      const pos = vertices.subarray(srcNdx, srcNdx + 3);
-      newVertices.set(pos, dstNdx);
-      positions.push(pos);
-      newIndices[i + j] = i + j;
-    }
-
-    const normal = vec3.normalize(
-      vec3.cross(
-        vec3.normalize(vec3.subtract(positions[1], positions[0])),
-        vec3.normalize(vec3.subtract(positions[2], positions[1])),
-      ),
-    );
-
-    for (let j = 0; j < 3; ++j) {
-      const dstNdx = (i + j) * 6;
-      newVertices.set(normal, dstNdx + 3);
-    }
-  }
-
-  return {
-    vertices: newVertices,
-    indices: newIndices,
-  };
-}
-
-export const modelData = {
-  teapot: convertMeshToTypedArrays(teapot, 1.5),
-  sphere: createSphereTypedArrays(20),
-  jewel: flattenNormals(createSphereTypedArrays(20, 5, 3)),
-  rock: flattenNormals(createSphereTypedArrays(20, 32, 16, 0.1)),
-};

package/src/__tests__/components/Wireframe/utils.ts

@@ -1,22 +0,0 @@
-export function rand(min?: number, max?: number) {
-  if (min === undefined) {
-    max = 1;
-    min = 0;
-  } else if (max === undefined) {
-    max = min;
-    min = 0;
-  }
-  return Math.random() * (max - min) + min;
-}
-
-export function randInt(min: number, max?: number) {
-  return Math.floor(rand(min, max));
-}
-
-export function randColor() {
-  return [rand(), rand(), rand(), 1];
-}
-
-export function randElement<T>(arr: T[]): T {
-  return arr[randInt(arr.length)];
-}