Merge branch 'main' into macos

.gitignore

@@ -1,3 +1,4 @@
+!packages/webgpu/scripts/build
 # Yarn
 .package/.yarn/*
 .yarn/*

README.md

@@ -259,7 +259,7 @@ yarn test:ref
 
 To run the e2e test, open the example app on the e2e screen.  
 By default, it will try to connect to a localhost test server.  
-If you want to run the test suite on a physical device, you can modify the address [here](/package/example/src/useClient.ts#L4).
+If you want to run the test suite on a physical device, you can modify the address [here](/apps/example/src/useClient.ts#L4).
 
 ```
 yarn test

apps/example/package.json

@@ -30,7 +30,7 @@
     "react-native-wgpu": "*",
     "teapot": "^1.0.0",
     "three": "0.168.0",
-    "typegpu": "^0.1.2",
+    "typegpu": "^0.2.0",
     "wgpu-matrix": "^3.0.2"
   },
   "devDependencies": {

apps/example/src/ComputeBoids/ComputeBoids.tsx

@@ -18,6 +18,33 @@ type BoidsOptions = {
   cohesionStrength: number;
 };
 
+const Parameters = struct({
+  separationDistance: f32,
+  separationStrength: f32,
+  alignmentDistance: f32,
+  alignmentStrength: f32,
+  cohesionDistance: f32,
+  cohesionStrength: f32,
+});
+
+const TriangleData = struct({
+  position: vec2f,
+  velocity: vec2f,
+});
+
+const TriangleDataArray = (n: number) => arrayOf(TriangleData, n);
+
+const renderBindGroupLayout = tgpu.bindGroupLayout({
+  trianglePos: { storage: TriangleDataArray },
+  colorPalette: { uniform: vec3f },
+});
+
+const computeBindGroupLayout = tgpu.bindGroupLayout({
+  currentTrianglePos: { storage: TriangleDataArray },
+  nextTrianglePos: { storage: TriangleDataArray, access: 'mutable' },
+  params: { uniform: Parameters },
+});
+
 const colorPresets = {
   plumTree: vec3f(1.0, 2.0, 1.0),
   jeans: vec3f(2.0, 1.5, 1.0),
@@ -69,28 +96,20 @@ export function ComputeBoids() {
   );
 
   const ref = useWebGPU(({ context, device, presentationFormat }) => {
+    const root = tgpu.initFromDevice({ device });
+
     context.configure({
       device,
       format: presentationFormat,
       alphaMode: "premultiplied",
     });
 
-    const params = struct({
-      separationDistance: f32,
-      separationStrength: f32,
-      alignmentDistance: f32,
-      alignmentStrength: f32,
-      cohesionDistance: f32,
-      cohesionStrength: f32,
-    });
-
-    const paramsBuffer = tgpu
-      .createBuffer(params, presets.default)
-      .$device(device)
-      .$usage(tgpu.Storage);
+    const paramsBuffer = root
+      .createBuffer(Parameters, presets.default)
+      .$usage("uniform");
 
     const triangleSize = 0.03;
-    const triangleVertexBuffer = tgpu
+    const triangleVertexBuffer = root
       .createBuffer(arrayOf(f32, 6), [
         0.0,
         triangleSize,
@@ -99,42 +118,33 @@ export function ComputeBoids() {
         triangleSize / 2,
         -triangleSize / 2,
       ])
-      .$device(device)
-      .$usage(tgpu.Vertex);
+      .$usage("vertex");
 
     const triangleAmount = 1000;
-    const triangleInfoStruct = struct({
-      position: vec2f,
-      velocity: vec2f,
-    });
     const trianglePosBuffers = Array.from({ length: 2 }, () =>
-      tgpu
-        .createBuffer(arrayOf(triangleInfoStruct, triangleAmount))
-        .$device(device)
-        .$usage(tgpu.Storage, tgpu.Uniform),
+      root.createBuffer(TriangleDataArray(triangleAmount)).$usage("storage")
     );
 
     randomizePositions.current = () => {
       const positions = Array.from({ length: triangleAmount }, () => ({
         position: vec2f(Math.random() * 2 - 1, Math.random() * 2 - 1),
         velocity: vec2f(Math.random() * 0.1 - 0.05, Math.random() * 0.1 - 0.05),
       }));
-      tgpu.write(trianglePosBuffers[0], positions);
-      tgpu.write(trianglePosBuffers[1], positions);
+      trianglePosBuffers[0].write(positions);
+      trianglePosBuffers[1].write(positions);
     };
     randomizePositions.current();
 
-    const colorPaletteBuffer = tgpu
+    const colorPaletteBuffer = root
       .createBuffer(vec3f, colorPresets.plumTree)
-      .$device(device)
-      .$usage(tgpu.Uniform);
+      .$usage("uniform");
 
     updateColorPreset.current = (newColorPreset: ColorPresets) => {
-      tgpu.write(colorPaletteBuffer, colorPresets[newColorPreset]);
+      colorPaletteBuffer.write(colorPresets[newColorPreset]);
     };
 
     updateParams.current = (newOptions: BoidsOptions) => {
-      tgpu.write(paramsBuffer, newOptions);
+      paramsBuffer.write(newOptions);
     };
 
     const renderModule = device.createShaderModule({
@@ -146,7 +156,9 @@ export function ComputeBoids() {
     });
 
     const pipeline = device.createRenderPipeline({
-      layout: "auto",
+      layout: device.createPipelineLayout({
+        bindGroupLayouts: [root.unwrap(renderBindGroupLayout)],
+      }),
       vertex: {
         module: renderModule,
         buffers: [
@@ -176,55 +188,26 @@ export function ComputeBoids() {
     });
 
     const computePipeline = device.createComputePipeline({
-      layout: "auto",
+      layout: device.createPipelineLayout({
+        bindGroupLayouts: [root.unwrap(computeBindGroupLayout)],
+      }),
       compute: {
         module: computeModule,
       },
     });
 
     const renderBindGroups = [0, 1].map((idx) =>
-      device.createBindGroup({
-        layout: pipeline.getBindGroupLayout(0),
-        entries: [
-          {
-            binding: 0,
-            resource: {
-              buffer: trianglePosBuffers[idx].buffer,
-            },
-          },
-          {
-            binding: 1,
-            resource: {
-              buffer: colorPaletteBuffer.buffer,
-            },
-          },
-        ],
+      renderBindGroupLayout.populate({
+        trianglePos: trianglePosBuffers[idx],
+        colorPalette: colorPaletteBuffer,
       }),
     );
 
     const computeBindGroups = [0, 1].map((idx) =>
-      device.createBindGroup({
-        layout: computePipeline.getBindGroupLayout(0),
-        entries: [
-          {
-            binding: 0,
-            resource: {
-              buffer: trianglePosBuffers[idx].buffer,
-            },
-          },
-          {
-            binding: 1,
-            resource: {
-              buffer: trianglePosBuffers[1 - idx].buffer,
-            },
-          },
-          {
-            binding: 2,
-            resource: {
-              buffer: paramsBuffer.buffer,
-            },
-          },
-        ],
+      computeBindGroupLayout.populate({
+        currentTrianglePos: trianglePosBuffers[idx],
+        nextTrianglePos: trianglePosBuffers[1 - idx],
+        params: paramsBuffer,
       }),
     );
 
@@ -251,7 +234,7 @@ export function ComputeBoids() {
       computePass.setPipeline(computePipeline);
       computePass.setBindGroup(
         0,
-        even ? computeBindGroups[0] : computeBindGroups[1],
+        root.unwrap(even ? computeBindGroups[0] : computeBindGroups[1])
       );
       computePass.dispatchWorkgroups(triangleAmount);
       computePass.end();
@@ -261,7 +244,7 @@ export function ComputeBoids() {
       passEncoder.setVertexBuffer(0, triangleVertexBuffer.buffer);
       passEncoder.setBindGroup(
         0,
-        even ? renderBindGroups[1] : renderBindGroups[0],
+        root.unwrap(even ? renderBindGroups[1] : renderBindGroups[0])
       );
       passEncoder.draw(3, triangleAmount);
       passEncoder.end();

apps/example/src/ComputeBoids/Shaders.ts

@@ -1,4 +1,3 @@
-const triangleAmount = 1000;
 const triangleSize = 0.03;
 
 export const renderCode = /* wgsl */ `
@@ -24,7 +23,7 @@ export const renderCode = /* wgsl */ `
     @location(1) color : vec4f,
   };
 
-  @binding(0) @group(0) var<uniform> trianglePos : array<TriangleData, ${triangleAmount}>;
+  @binding(0) @group(0) var<storage> trianglePos : array<TriangleData>;
   @binding(1) @group(0) var<uniform> colorPalette : vec3f;
 
   @vertex
@@ -67,9 +66,9 @@ export const computeCode = /* wgsl */ `
     cohesion_strength : f32,
   };
 
-  @binding(0) @group(0) var<uniform> currentTrianglePos : array<TriangleData, ${triangleAmount}>;
+  @binding(0) @group(0) var<storage> currentTrianglePos : array<TriangleData>;
   @binding(1) @group(0) var<storage, read_write> nextTrianglePos : array<TriangleData>;
-  @binding(2) @group(0) var<storage> params : Parameters;
+  @binding(2) @group(0) var<uniform> params : Parameters;
 
   @compute @workgroup_size(1)
   fn mainCompute(@builtin(global_invocation_id) gid: vec3u) {
@@ -80,7 +79,7 @@ export const computeCode = /* wgsl */ `
     var alignmentCount = 0u;
     var cohesion = vec2(0.0, 0.0);
     var cohesionCount = 0u;
-    for (var i = 0u; i < ${triangleAmount}; i = i + 1) {
+    for (var i = 0u; i < arrayLength(&currentTrianglePos); i = i + 1) {
       if (i == index) {
         continue;
       }