react-native-wgpu 0.1.4 → 0.1.6

package/src/__tests__/components/cube.ts

@@ -0,0 +1,51 @@
+export const cubeVertexSize = 4 * 10; // Byte size of one cube vertex.
+export const cubePositionOffset = 0;
+export const cubeColorOffset = 4 * 4; // Byte offset of cube vertex color attribute.
+export const cubeUVOffset = 4 * 8;
+export const cubeVertexCount = 36;
+
+// prettier-ignore
+export const cubeVertexArray = new Float32Array([
+  // float4 position, float4 color, float2 uv,
+  1, -1, 1, 1,   1, 0, 1, 1,  0, 1,
+  -1, -1, 1, 1,  0, 0, 1, 1,  1, 1,
+  -1, -1, -1, 1, 0, 0, 0, 1,  1, 0,
+  1, -1, -1, 1,  1, 0, 0, 1,  0, 0,
+  1, -1, 1, 1,   1, 0, 1, 1,  0, 1,
+  -1, -1, -1, 1, 0, 0, 0, 1,  1, 0,
+
+  1, 1, 1, 1,    1, 1, 1, 1,  0, 1,
+  1, -1, 1, 1,   1, 0, 1, 1,  1, 1,
+  1, -1, -1, 1,  1, 0, 0, 1,  1, 0,
+  1, 1, -1, 1,   1, 1, 0, 1,  0, 0,
+  1, 1, 1, 1,    1, 1, 1, 1,  0, 1,
+  1, -1, -1, 1,  1, 0, 0, 1,  1, 0,
+
+  -1, 1, 1, 1,   0, 1, 1, 1,  0, 1,
+  1, 1, 1, 1,    1, 1, 1, 1,  1, 1,
+  1, 1, -1, 1,   1, 1, 0, 1,  1, 0,
+  -1, 1, -1, 1,  0, 1, 0, 1,  0, 0,
+  -1, 1, 1, 1,   0, 1, 1, 1,  0, 1,
+  1, 1, -1, 1,   1, 1, 0, 1,  1, 0,
+
+  -1, -1, 1, 1,  0, 0, 1, 1,  0, 1,
+  -1, 1, 1, 1,   0, 1, 1, 1,  1, 1,
+  -1, 1, -1, 1,  0, 1, 0, 1,  1, 0,
+  -1, -1, -1, 1, 0, 0, 0, 1,  0, 0,
+  -1, -1, 1, 1,  0, 0, 1, 1,  0, 1,
+  -1, 1, -1, 1,  0, 1, 0, 1,  1, 0,
+
+  1, 1, 1, 1,    1, 1, 1, 1,  0, 1,
+  -1, 1, 1, 1,   0, 1, 1, 1,  1, 1,
+  -1, -1, 1, 1,  0, 0, 1, 1,  1, 0,
+  -1, -1, 1, 1,  0, 0, 1, 1,  1, 0,
+  1, -1, 1, 1,   1, 0, 1, 1,  0, 0,
+  1, 1, 1, 1,    1, 1, 1, 1,  0, 1,
+
+  1, -1, -1, 1,  1, 0, 0, 1,  0, 1,
+  -1, -1, -1, 1, 0, 0, 0, 1,  1, 1,
+  -1, 1, -1, 1,  0, 1, 0, 1,  1, 0,
+  1, 1, -1, 1,   1, 1, 0, 1,  0, 0,
+  1, -1, -1, 1,  1, 0, 0, 1,  0, 1,
+  -1, 1, -1, 1,  0, 1, 0, 1,  1, 0,
+]);

package/src/__tests__/components/meshes/mesh.ts

@@ -0,0 +1,96 @@
+import { vec3, vec2 } from "wgpu-matrix";
+
+// Defines what to pass to pipeline to render mesh
+export interface Renderable {
+  vertexBuffer: GPUBuffer;
+  indexBuffer: GPUBuffer;
+  indexCount: number;
+  bindGroup?: GPUBindGroup;
+}
+
+export interface Mesh {
+  vertices: Float32Array;
+  indices: Uint16Array | Uint32Array;
+  vertexStride: number;
+}
+
+/**
+ * @param {GPUDevice} device - A valid GPUDevice.
+ * @param {Mesh} mesh - An indexed triangle-list mesh, containing its vertices, indices, and vertexStride (number of elements per vertex).
+ * @param {boolean} storeVertices - A boolean flag indicating whether the vertexBuffer should be available to use as a storage buffer.
+ * @returns {boolean} An object containing an array of bindGroups and the bindGroupLayout they implement.
+ */
+export const createMeshRenderable = (
+  device: GPUDevice,
+  mesh: Mesh,
+  storeVertices = false,
+  storeIndices = false,
+): Renderable => {
+  // Define buffer usage
+  const vertexBufferUsage = storeVertices
+    ? GPUBufferUsage.VERTEX | GPUBufferUsage.STORAGE
+    : GPUBufferUsage.VERTEX;
+  const indexBufferUsage = storeIndices
+    ? GPUBufferUsage.INDEX | GPUBufferUsage.STORAGE
+    : GPUBufferUsage.INDEX;
+
+  // Create vertex and index buffers
+  const vertexBuffer = device.createBuffer({
+    size: mesh.vertices.byteLength,
+    usage: vertexBufferUsage,
+    mappedAtCreation: true,
+  });
+  new Float32Array(vertexBuffer.getMappedRange()).set(mesh.vertices);
+  vertexBuffer.unmap();
+
+  const indexBuffer = device.createBuffer({
+    size: mesh.indices.byteLength,
+    usage: indexBufferUsage,
+    mappedAtCreation: true,
+  });
+
+  // Determine whether index buffer is indices are in uint16 or uint32 format
+  if (
+    mesh.indices.byteLength ===
+    mesh.indices.length * Uint16Array.BYTES_PER_ELEMENT
+  ) {
+    new Uint16Array(indexBuffer.getMappedRange()).set(mesh.indices);
+  } else {
+    new Uint32Array(indexBuffer.getMappedRange()).set(mesh.indices);
+  }
+
+  indexBuffer.unmap();
+
+  return {
+    vertexBuffer,
+    indexBuffer,
+    indexCount: mesh.indices.length,
+  };
+};
+
+export const getMeshPosAtIndex = (mesh: Mesh, index: number) => {
+  const arr = new Float32Array(
+    mesh.vertices.buffer,
+    index * mesh.vertexStride + 0,
+    3,
+  );
+  return vec3.fromValues(arr[0], arr[1], arr[2]);
+};
+
+export const getMeshNormalAtIndex = (mesh: Mesh, index: number) => {
+  const arr = new Float32Array(
+    mesh.vertices.buffer,
+    index * mesh.vertexStride + 3 * Float32Array.BYTES_PER_ELEMENT,
+    3,
+  );
+  return vec3.fromValues(arr[0], arr[1], arr[2]);
+};
+
+export const getMeshUVAtIndex = (mesh: Mesh, index: number) => {
+  const arr = new Float32Array(
+    mesh.vertices.buffer,
+    index * mesh.vertexStride + 6 * Float32Array.BYTES_PER_ELEMENT,
+    2,
+  );
+  return vec2.fromValues(arr[0], arr[1]);
+};

package/src/__tests__/components/meshes/sphere.ts

@@ -0,0 +1,103 @@
+import { vec3 } from "wgpu-matrix";
+
+export interface SphereMesh {
+  vertices: Float32Array;
+  indices: Uint16Array;
+}
+
+export const SphereLayout = {
+  vertexStride: 8 * 4,
+  positionsOffset: 0,
+  normalOffset: 3 * 4,
+  uvOffset: 6 * 4,
+};
+
+// Borrowed and simplified from https://github.com/mrdoob/three.js/blob/master/src/geometries/SphereGeometry.js
+export function createSphereMesh(
+  radius: number,
+  widthSegments = 32,
+  heightSegments = 16,
+  randomness = 0,
+): SphereMesh {
+  const vertices = [];
+  const indices = [];
+
+  widthSegments = Math.max(3, Math.floor(widthSegments));
+  heightSegments = Math.max(2, Math.floor(heightSegments));
+
+  const firstVertex = vec3.create();
+  const vertex = vec3.create();
+  const normal = vec3.create();
+
+  let index = 0;
+  const grid = [];
+
+  // generate vertices, normals and uvs
+  for (let iy = 0; iy <= heightSegments; iy++) {
+    const verticesRow = [];
+    const v = iy / heightSegments;
+
+    // special case for the poles
+    let uOffset = 0;
+    if (iy === 0) {
+      uOffset = 0.5 / widthSegments;
+    } else if (iy === heightSegments) {
+      uOffset = -0.5 / widthSegments;
+    }
+
+    for (let ix = 0; ix <= widthSegments; ix++) {
+      const u = ix / widthSegments;
+
+      // Poles should just use the same position all the way around.
+      if (ix == widthSegments) {
+        vec3.copy(firstVertex, vertex);
+      } else if (ix == 0 || (iy != 0 && iy !== heightSegments)) {
+        const rr = radius + (Math.random() - 0.5) * 2 * randomness * radius;
+
+        // vertex
+        vertex[0] = -rr * Math.cos(u * Math.PI * 2) * Math.sin(v * Math.PI);
+        vertex[1] = rr * Math.cos(v * Math.PI);
+        vertex[2] = rr * Math.sin(u * Math.PI * 2) * Math.sin(v * Math.PI);
+
+        if (ix == 0) {
+          vec3.copy(vertex, firstVertex);
+        }
+      }
+
+      vertices.push(...vertex);
+
+      // normal
+      vec3.copy(vertex, normal);
+      vec3.normalize(normal, normal);
+      vertices.push(...normal);
+
+      // uv
+      vertices.push(u + uOffset, 1 - v);
+      verticesRow.push(index++);
+    }
+
+    grid.push(verticesRow);
+  }
+
+  // indices
+  for (let iy = 0; iy < heightSegments; iy++) {
+    for (let ix = 0; ix < widthSegments; ix++) {
+      const a = grid[iy][ix + 1];
+      const b = grid[iy][ix];
+      const c = grid[iy + 1][ix];
+      const d = grid[iy + 1][ix + 1];
+
+      if (iy !== 0) {
+        indices.push(a, b, d);
+      }
+      if (iy !== heightSegments - 1) {
+        indices.push(b, c, d);
+      }
+    }
+  }
+
+  return {
+    vertices: new Float32Array(vertices),
+    indices: new Uint16Array(indices),
+  };
+}

package/src/__tests__/components/meshes/stanfordDragon.ts

@@ -0,0 +1,44 @@
+import dragonRawData from './stanfordDragonData';
+import { computeProjectedPlaneUVs, generateNormals } from './utils';
+
+const { positions, normals, triangles } = generateNormals(
+  Math.PI,
+  dragonRawData.positions as [number, number, number][],
+  dragonRawData.cells as [number, number, number][]
+);
+
+const uvs = computeProjectedPlaneUVs(positions, 'xy');
+
+// Push indices for an additional ground plane
+triangles.push(
+  [positions.length, positions.length + 2, positions.length + 1],
+  [positions.length, positions.length + 1, positions.length + 3]
+);
+
+// Push vertex attributes for an additional ground plane
+// prettier-ignore
+positions.push(
+  [-100, 20, -100], //
+  [ 100, 20,  100], //
+  [-100, 20,  100], //
+  [ 100, 20, -100]
+);
+normals.push(
+  [0, 1, 0], //
+  [0, 1, 0], //
+  [0, 1, 0], //
+  [0, 1, 0]
+);
+uvs.push(
+  [0, 0], //
+  [1, 1], //
+  [0, 1], //
+  [1, 0]
+);
+
+export const mesh = {
+  positions,
+  triangles,
+  normals,
+  uvs,
+};