Update to typegpu 0.7.0

Author: iwoplaza

apps/phoure-www/package.json

@@ -28,7 +28,7 @@
     "@radix-ui/react-tooltip": "^1.1.6",
     "@typegpu/color": "workspace:*",
     "@typegpu/common": "workspace:*",
-    "@typegpu/noise": "^0.0.9",
+    "@typegpu/noise": "^0.1.0",
     "@typegpu/sdf": "workspace:*",
     "@types/react": "^18.0.2",
     "@types/react-dom": "^18.0.2",
@@ -48,9 +48,9 @@
     "tailwindcss-animate": "^1.0.7",
     "typegpu": "catalog:",
     "unplugin-typegpu": "catalog:",
-    "wgpu-matrix": "^3.3.0"
+    "wgpu-matrix": "^3.4.0"
   },
   "devDependencies": {
-    "@webgpu/types": "^0.1.34"
+    "@webgpu/types": "^0.1.64"
   }
 }

apps/phoure-www/src/lib-phoure/menderStep.ts

@@ -28,10 +28,8 @@ type Options = {
   targetTexture: () => GPUTextureView;
 };
 
-const reluSlot = tgpu['~unstable'].slot<boolean>().$name('relu');
-const inputFromGBufferSlot = tgpu['~unstable']
-  .slot<boolean>()
-  .$name('input_from_gbuffer');
+const reluSlot = tgpu.slot<boolean>();
+const inputFromGBufferSlot = tgpu.slot<boolean>();
 const BLOCK_SIZE = 8;
 
 // const convolveLocalFn = wgsl.fn`(local: vec2u, result: ptr<function, array<f32, ${outChannelsSlot}>>) {
@@ -68,7 +66,7 @@ const ioLayout = tgpu.bindGroupLayout({
 const { weights, biases } = layerLayout.bound;
 
 const sampleGlobal = tgpu['~unstable'].derived(() => {
-  return tgpu['~unstable']
+  return tgpu
     .fn([d.i32, d.i32, d.ptrFn(d.arrayOf(d.vec4f, inChannelsQuarter.value))])(
       (x, y, result) => {
         const canvasSize = accessViewportSize.value;
@@ -77,7 +75,7 @@ const sampleGlobal = tgpu['~unstable'].derived(() => {
           d.u32(std.max(0, std.min(y, d.i32(canvasSize.y) - 1))),
         );
 
-        if (inputFromGBufferSlot) {
+        if (inputFromGBufferSlot.$) {
           const blurred = std.textureLoad(ioLayout.$.blurred_tex, coord, 0);
 
           const aux = std.textureLoad(ioLayout.$.aux_tex, coord, 0);
@@ -96,8 +94,10 @@ const sampleGlobal = tgpu['~unstable'].derived(() => {
           );
         } else {
           for (let i = d.u32(0); i < inChannelsQuarter.value; i++) {
-            const index = (coord.y * d.u32(canvasSize.x) + coord.x) *
-                inChannelsQuarter.value + i;
+            const index =
+              (coord.y * d.u32(canvasSize.x) + coord.x) *
+                inChannelsQuarter.value +
+              i;
 
             result[i] = ioLayout.$.input_buffer[index];
           }
@@ -121,56 +121,49 @@ const applyReLU = tgpu['~unstable'].derived(() => {
     .$name('apply_relu');
 });
 
-const readKernel = tgpu['~unstable']
-  .fn(
-    [d.u32],
-    d.vec4f,
-  )((idx) => weights.value[idx])
-  .$name('readKernel');
+const readKernel = tgpu.fn([d.u32], d.vec4f)((idx) => weights.value[idx]);
 
 const menderConvolveFn = convolveFn({
   sampleFiller: sampleGlobal,
   kernelReader: readKernel,
 });
 
-const entryComputeFn = tgpu['~unstable']
-  .computeFn({
-    workgroupSize: [BLOCK_SIZE, BLOCK_SIZE],
-    in: {
-      gid: d.builtin.globalInvocationId,
-    },
-  })(/* wgsl */ `{
+const entryComputeFn = tgpu['~unstable'].computeFn({
+  workgroupSize: [BLOCK_SIZE, BLOCK_SIZE],
+  in: {
+    gid: d.builtin.globalInvocationId,
+  },
+})`{
     var result: array<f32, OUT_CHANNELS>;
-    
+
     for (var i = 0; i < OUT_CHANNELS; i += 1) {
       result[i] = biases[i];
     }
 
     menderConvolveFn(in.gid.xy, &result);
-  
+
     if (reluSlot) {
       applyReLU(&result);
     }
 
     let canvasSize = accessViewportSize;
-  
+
     let output_buffer_begin =
       (in.gid.y * u32(canvasSize.x) +
       in.gid.x) * OUT_CHANNELS;
-  
+
     for (var i: u32 = 0; i < OUT_CHANNELS; i++) {
       output_buffer[output_buffer_begin + i] = result[i];
     }
-  }`)
-  .$uses({
-    menderConvolveFn,
-    reluSlot,
-    applyReLU,
-    biases,
-    accessViewportSize,
-    output_buffer: ioLayout.bound.output_buffer,
-    OUT_CHANNELS: outChannelsSlot,
-  });
+  }`.$uses({
+  menderConvolveFn,
+  reluSlot,
+  applyReLU,
+  biases,
+  accessViewportSize,
+  output_buffer: ioLayout.bound.output_buffer,
+  OUT_CHANNELS: outChannelsSlot,
+});
 
 export const MenderStep = ({ root, gBuffer, targetTexture }: Options) => {
   // Resource locators

apps/phoure-www/src/lib/GameEngine/convolve.ts

@@ -12,28 +12,18 @@ import {
 } from 'typegpu/data';
 
 export type SampleFiller = TgpuFn<
-  [x: I32, y: I32, outSamplerPtr: Ptr<'function', WgslArray<Vec4f>>]
+  (x: I32, y: I32, outSamplerPtr: Ptr<'function', WgslArray<Vec4f>>) => void
 >;
-export type KernelReader = TgpuFn<[idx: U32], Vec4f>;
+export type KernelReader = TgpuFn<(idx: U32) => Vec4f>;
 
 /**
  * Has to be divisible by 4
  */
-export const inChannelsSlot = tgpu['~unstable']
-  .slot<number>()
-  .$name('in_channels');
-export const outChannelsSlot = tgpu['~unstable']
-  .slot<number>()
-  .$name('out_channels');
-export const kernelRadiusSlot = tgpu['~unstable']
-  .slot<number>()
-  .$name('kernel_radius');
-const sampleFillerSlot = tgpu['~unstable']
-  .slot<SampleFiller>()
-  .$name('sample_filler');
-const kernelReaderSlot = tgpu['~unstable']
-  .slot<KernelReader>()
-  .$name('kernel_reader');
+export const inChannelsSlot = tgpu.slot<number>().$name('in_channels');
+export const outChannelsSlot = tgpu.slot<number>().$name('out_channels');
+export const kernelRadiusSlot = tgpu.slot<number>().$name('kernel_radius');
+const sampleFillerSlot = tgpu.slot<SampleFiller>().$name('sample_filler');
+const kernelReaderSlot = tgpu.slot<KernelReader>().$name('kernel_reader');
 
 export const inChannelsQuarter = tgpu['~unstable'].derived(() => {
   if (inChannelsSlot.value % 4 !== 0) {
@@ -43,7 +33,7 @@ export const inChannelsQuarter = tgpu['~unstable'].derived(() => {
 });
 
 const _convolveFn = tgpu['~unstable'].derived(() => {
-  return tgpu['~unstable']
+  return tgpu
     .fn([vec2u, ptrFn(arrayOf(f32, outChannelsSlot.value))])(
       /* wgsl */ `(coord: vec2u, result: ptr<function, array<f32, outChannels>>) {
         var sample = array<vec4f, inChannelsQuarter>();

packages/typegpu-common/package.json

@@ -15,7 +15,11 @@
       "require": "./dist/index.cjs"
     }
   },
-  "files": ["README.md", "package.json", "dist"],
+  "files": [
+    "README.md",
+    "package.json",
+    "dist"
+  ],
   "scripts": {
     "build": "rollup -c",
     "dev:build": "rollup -c",
@@ -32,6 +36,6 @@
     "typegpu": "catalog:"
   },
   "peerDependencies": {
-    "typegpu": "^0.3.0"
+    "typegpu": "^0.7.0"
   }
 }

packages/typegpu-common/src/viewport.ts

@@ -1,6 +1,4 @@
 import tgpu from 'typegpu';
 import { vec2f } from 'typegpu/data';
 
-export const accessViewportSize = tgpu['~unstable']
-  .accessor(vec2f)
-  .$name('accessViewportSize');
+export const accessViewportSize = tgpu['~unstable'].accessor(vec2f);