Merge pull request #3 from iwoplaza/chore/typegpu-0.4.5

Updating to typegpu 0.4.6

Author: iwoplaza

apps/phoure-www/astro.config.mjs

@@ -3,7 +3,7 @@ import starlight from '@astrojs/starlight';
 import tailwind from '@astrojs/tailwind';
 // @ts-check
 import { defineConfig } from 'astro/config';
-import typegpu from 'rollup-plugin-typegpu';
+import typegpu from 'unplugin-typegpu/vite';
 
 // https://astro.build/config
 export default defineConfig({

apps/phoure-www/package.json

@@ -42,12 +42,12 @@
     "phoure": "workspace:*",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "rollup-plugin-typegpu": "^0.0.1",
     "sharp": "^0.33.5",
     "tailwind-merge": "^2.5.2",
     "tailwindcss": "^3.4.17",
     "tailwindcss-animate": "^1.0.7",
     "typegpu": "catalog:",
+    "unplugin-typegpu": "catalog:",
     "wgpu-matrix": "^3.3.0"
   },
   "devDependencies": {

apps/phoure-www/src/lib-filter/bicubicFilter.ts

@@ -12,17 +12,17 @@ const layout = tgpu
   .$name('Resample - external bind group layout');
 
 const fullScreenQuadVertexFn = tgpu['~unstable']
-  .vertexFn(
-    { idx: builtin.vertexIndex },
-    {
+  .vertexFn({
+    in: { idx: builtin.vertexIndex },
+    out: {
       pos: builtin.position,
       uv: vec2f,
       texelSizeX: vec2f,
       texelSizeY: vec2f,
       coordHG: vec2f,
     },
-  )
-  .does(/* wgsl */ `(@builtin(vertex_index) idx: u32) -> VertexOutput {
+  })
+  .does(/* wgsl */ `(input: VertexInput) -> VertexOutput {
     const SCREEN_RECT = array<vec2f, 6>(
       vec2f(-1.0, -1.0),
       vec2f(1.0, -1.0),
@@ -46,13 +46,13 @@ const fullScreenQuadVertexFn = tgpu['~unstable']
     let viewport_size = vec2f(textureDimensions(texture));
 
     var output: VertexOutput;
-    output.pos = vec4f(SCREEN_RECT[idx], 0.0, 1.0);
-    output.uv = UVS[idx];
+    output.pos = vec4f(SCREEN_RECT[input.idx], 0.0, 1.0);
+    output.uv = UVS[input.idx];
     output.texelSizeX = vec2f(1. / f32(viewport_size.x), 0);
     output.texelSizeY = vec2f(0, 1. / f32(viewport_size.y));
 
     // calc filter texture coordinates where [0,1] is a single texel
-    output.coordHG = UVS[idx] * viewport_size - vec2f(0.5f, 0.5f);      // fetch offsets and weights from filter texture
+    output.coordHG = UVS[input.idx] * viewport_size - vec2f(0.5f, 0.5f);      // fetch offsets and weights from filter texture
 
     return output;
   }`)
@@ -63,25 +63,25 @@ const fullScreenQuadVertexFn = tgpu['~unstable']
  * https://developer.nvidia.com/gpugems/gpugems2/part-iii-high-quality-rendering/chapter-20-fast-third-order-texture-filtering
  */
 const resampleCubic = tgpu['~unstable']
-  .fragmentFn(
-    {
+  .fragmentFn({
+    in: {
       pos: builtin.position,
       uv: vec2f,
       texelSizeX: vec2f,
       texelSizeY: vec2f,
       coordHG: vec2f,
     },
-    vec4f,
-  )
-  .does(/* wgsl */ `(@location(0) uv: vec2f, @location(1) texelSizeX: vec2f, @location(2) texelSizeY: vec2f, @location(3) coord_hg: vec2f) -> @location(0) vec4f {
-    var hg_x = textureSample(hgLookup, wrappingSampler, coord_hg.x).xyz;
-    var hg_y = textureSample(hgLookup, wrappingSampler, coord_hg.y).xyz;      // determine linear sampling coordinates
-    var coord_source10 = uv + hg_x.x * texelSizeX;
-    var coord_source00 = uv - hg_x.y * texelSizeX;
-    var coord_source11 = coord_source10 + hg_y.x * texelSizeY;
-    var coord_source01 = coord_source00 + hg_y.x * texelSizeY;
-    coord_source10 = coord_source10 - hg_y.y * texelSizeY;
-    coord_source00 = coord_source00 - hg_y.y * texelSizeY;      // fetch four linearly interpolated inputs
+    out: vec4f,
+  })
+  .does(/* wgsl */ `(input: FragmentInput) -> @location(0) vec4f {
+    var hg_x = textureSample(hgLookup, wrappingSampler, input.coordHG.x).xyz;
+    var hg_y = textureSample(hgLookup, wrappingSampler, input.coordHG.y).xyz;      // determine linear sampling coordinates
+    var coord_source10 = input.uv + hg_x.x * input.texelSizeX;
+    var coord_source00 = input.uv - hg_x.y * input.texelSizeX;
+    var coord_source11 = coord_source10 + hg_y.x * input.texelSizeY;
+    var coord_source01 = coord_source00 + hg_y.x * input.texelSizeY;
+    coord_source10 = coord_source10 - hg_y.y * input.texelSizeY;
+    coord_source00 = coord_source00 - hg_y.y * input.texelSizeY;      // fetch four linearly interpolated inputs
     var tex_source00 = textureSample(texture, clampingSampler, coord_source00);
     var tex_source10 = textureSample(texture, clampingSampler, coord_source10);
     var tex_source01 = textureSample(texture, clampingSampler, coord_source01);

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

@@ -6,16 +6,19 @@ import * as d from 'typegpu/data';
 export const combinationLayout = tgpu
   .bindGroupLayout({
     blurredTexture: { texture: 'float' },
-    mendedBuffer: { storage: (n) => d.arrayOf(d.f32, n) },
+    mendedBuffer: { storage: (n: number) => d.arrayOf(d.f32, n) },
   })
   .$name('combinationLayout');
 
 const { blurredTexture, mendedBuffer } = combinationLayout.bound;
 
 export const combinationEntryFn = tgpu['~unstable']
-  .fragmentFn({ pos: d.builtin.position, uv: d.vec2f }, d.vec4f)
-  .does(/* wgsl */ `(@builtin(position) coord_f: vec4f) -> @location(0) vec4f {
-    let coord = vec2u(floor(coord_f.xy));
+  .fragmentFn({
+    in: { coord_f: d.builtin.position, uv: d.vec2f },
+    out: d.vec4f,
+  })
+  .does(/* wgsl */ `(input: FragmentInput) -> @location(0) vec4f {
+    let coord = vec2u(floor(input.coord_f.xy));
 
     let blurred = textureLoad(
       blurredTexture,

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

@@ -1,6 +1,6 @@
 import { convertRgbToY } from '@typegpu/color';
 import { accessViewportSize } from '@typegpu/common';
-import tgpu, { unstable_asUniform, type TgpuRoot } from 'typegpu';
+import tgpu, { type TgpuRoot } from 'typegpu';
 import * as d from 'typegpu/data';
 
 import {
@@ -55,8 +55,11 @@ const BLOCK_SIZE = 8;
 // }`;
 
 const ioLayout = tgpu.bindGroupLayout({
-  output_buffer: { storage: (n) => d.arrayOf(d.f32, n), access: 'mutable' },
-  input_buffer: { storage: (n) => d.arrayOf(d.vec4f, n) },
+  output_buffer: {
+    storage: (n: number) => d.arrayOf(d.f32, n),
+    access: 'mutable',
+  },
+  input_buffer: { storage: (n: number) => d.arrayOf(d.vec4f, n) },
   blurred_tex: { texture: 'unfilterable-float' },
   aux_tex: { texture: 'unfilterable-float' },
 });
@@ -147,14 +150,19 @@ const menderConvolveFn = convolveFn({
 });
 
 const entryComputeFn = tgpu['~unstable']
-  .computeFn([], { workgroupSize: [BLOCK_SIZE, BLOCK_SIZE] })
-  .does(/* wgsl */ `(@builtin(global_invocation_id) gid: vec3u) {
+  .computeFn({
+    workgroupSize: [BLOCK_SIZE, BLOCK_SIZE],
+    in: {
+      gid: d.builtin.globalInvocationId,
+    },
+  })
+  .does(/* wgsl */ `(input: Input) {
     var result: array<f32, OUT_CHANNELS>;
     for (var i = 0; i < OUT_CHANNELS; i += 1) {
       result[i] = biases[i];
     }
 
-    menderConvolveFn(gid.xy, &result);
+    menderConvolveFn(input.gid.xy, &result);
   
     if (reluSlot) {
       applyReLU(&result);
@@ -163,8 +171,8 @@ const entryComputeFn = tgpu['~unstable']
     let canvasSize = accessViewportSize;
   
     let output_buffer_begin =
-      (gid.y * u32(canvasSize.x) +
-      gid.x) * OUT_CHANNELS;
+      (input.gid.y * u32(canvasSize.x) +
+      input.gid.x) * OUT_CHANNELS;
   
     for (var i: u32 = 0; i < OUT_CHANNELS; i++) {
       output_buffer[output_buffer_begin + i] = result[i];
@@ -232,7 +240,7 @@ export const MenderStep = ({ root, gBuffer, targetTexture }: Options) => {
         .with(outChannelsSlot, options.outChannels)
         .with(reluSlot, options.relu)
         .with(inputFromGBufferSlot, options.inputFromGBuffer)
-        .with(accessViewportSize, unstable_asUniform(viewportSizeBuffer))
+        .with(accessViewportSize, viewportSizeBuffer.as('uniform'))
         // ---
         .withCompute(entryComputeFn)
         .createPipeline()
@@ -296,7 +304,7 @@ export const MenderStep = ({ root, gBuffer, targetTexture }: Options) => {
   // ---
 
   const combinationPipeline = root['~unstable']
-    .with(accessViewportSize, unstable_asUniform(viewportSizeBuffer))
+    .with(accessViewportSize, viewportSizeBuffer.as('uniform'))
     .withVertex(fullScreenQuadVertexFn, {})
     .withFragment(combinationEntryFn, { format: 'rgba8unorm' })
     .createPipeline();

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

@@ -10,9 +10,9 @@ type Options = {
 };
 
 const fragFn = tgpu['~unstable']
-  .fragmentFn({ coordFloat: d.builtin.position }, d.vec4f)
-  .does(`(@builtin(position) coordFloat: vec4f) -> @location(0) vec4f {
-    var coord = vec2u(floor(coordFloat.xy));
+  .fragmentFn({ in: { coordFloat: d.builtin.position }, out: d.vec4f })
+  .does(`(input: FragmentInput) -> @location(0) vec4f {
+    var coord = vec2u(floor(input.coordFloat.xy));
 
     let color_a = textureLoad(
       texture_a,
@@ -27,8 +27,7 @@ const fragFn = tgpu['~unstable']
     );
 
     return vec4f(abs(color_a.rgb - color_b.rgb), 1.0);
-  }`)
-  .$uses({});
+  }`);
 
 export const BlipDifferenceStep = ({
   root,

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

@@ -19,9 +19,12 @@ const layout = tgpu.bindGroupLayout({
 });
 
 const mainFragFn = tgpu['~unstable']
-  .fragmentFn({ pos: d.builtin.position, uv: d.vec2f }, d.vec4f)
-  .does(/* wgsl */ `(@builtin(position) coord_f: vec4f, @location(0) uv: vec2f) -> @location(0) vec4f {
-    let coord = vec2<i32>(floor(coord_f.xy));
+  .fragmentFn({
+    in: { coord_f: d.builtin.position, uv: d.vec2f },
+    out: d.vec4f,
+  })
+  .does(/* wgsl */ `(input: FragmentInput) -> @location(0) vec4f {
+    let coord = vec2<i32>(floor(input.coord_f.xy));
     let channel_mode = getChannelModeSlot();
 
     let blurred = textureLoad(
@@ -45,7 +48,7 @@ const mainFragFn = tgpu['~unstable']
 
     var result: vec4<f32>;
 
-    let c = uv;
+    let c = input.uv;
     if (channel_mode == CHANNEL_SPLIT) {
       if (c.x < 0.33) {
         // NORMALS

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

@@ -18,9 +18,12 @@ const layout = tgpu
   .$name('Post Processing - Bind Group Layout');
 
 const mainFragFn = tgpu['~unstable']
-  .fragmentFn({ pos: d.builtin.position, uv: d.vec2f }, d.vec4f)
-  .does(`(@builtin(position) coord_f: vec4f) -> @location(0) vec4f {
-    var coord = vec2u(floor(coord_f.xy));
+  .fragmentFn({
+    in: { coord_f: d.builtin.position, uv: d.vec2f },
+    out: d.vec4f,
+  })
+  .does(`(input: FragmentInput) -> @location(0) vec4f {
+    var coord = vec2u(floor(input.coord_f.xy));
 
     let color = textureLoad(
       sourceTexture,

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

@@ -182,12 +182,15 @@ const mainLayout = tgpu.bindGroupLayout({
 });
 
 const mainComputeFn = tgpu['~unstable']
-  .computeFn([], { workgroupSize: [BlockSize, BlockSize] })
-  .does(/* wgsl */ `(@builtin(global_invocation_id) gid: vec3u) {
-    setupRandomSeed(vec2f(gid.xy) * ${Math.random()} + getRandomSeedPrimer * ${Math.random()});
+  .computeFn({
+    workgroupSize: [BlockSize, BlockSize],
+    in: { gid: d.builtin.globalInvocationId },
+  })
+  .does(/* wgsl */ `(input: Input) {
+    setupRandomSeed(vec2f(input.gid.xy) * ${Math.random()} + getRandomSeedPrimer * ${Math.random()});
 
     let prev_layers = getAccumulatedLayers;
-    let prev_render = textureLoad(previousRender, gid.xy, 0);
+    let prev_render = textureLoad(previousRender, input.gid.xy, 0);
   
     var acc = vec3f(0., 0., 0.);
     for (var sx = 0u; sx < SUPER_SAMPLES; sx++) {
@@ -197,7 +200,7 @@ const mainComputeFn = tgpu['~unstable']
           (f32(sy) + 0.5) * ONE_OVER_SUPER_SAMPLES,
         );
   
-        acc += renderSubPixel(vec2f(gid.xy) + offset);
+        acc += renderSubPixel(vec2f(input.gid.xy) + offset);
       }
     }
   
@@ -212,7 +215,7 @@ const mainComputeFn = tgpu['~unstable']
       new_render = (prev_render * prev_layers + vec4(acc, 1.0)) / (prev_layers + 1);
     }
   
-    textureStore(mainOutput, gid.xy, new_render);
+    textureStore(mainOutput, input.gid.xy, new_render);
   }`)
   .$uses({
     SUPER_SAMPLES,
@@ -232,8 +235,11 @@ const auxLayout = tgpu
   .$name('SDF Renderer: Aux Bind Group Layout');
 
 const auxComputeFn = tgpu['~unstable']
-  .computeFn([], { workgroupSize: [BlockSize, BlockSize] })
-  .does(/* wgsl */ `(@builtin(global_invocation_id) GlobalInvocationID: vec3<u32>) {
+  .computeFn({
+    workgroupSize: [BlockSize, BlockSize],
+    in: { gid: d.builtin.globalInvocationId },
+  })
+  .does(/* wgsl */ `(input: Input) {
     let offset = vec2f(
       0.5,
       0.5,
@@ -243,7 +249,7 @@ const auxComputeFn = tgpu['~unstable']
     var shape_ctx: ShapeContext;
     shape_ctx.rayPos = constructRayPos();
     shape_ctx.rayDir = constructRayDir(
-      vec2f(GlobalInvocationID.xy) + offset
+      vec2f(input.gid.xy) + offset
     );
     shape_ctx.rayDistance = 0.;
   
@@ -282,7 +288,7 @@ const auxComputeFn = tgpu['~unstable']
   
     // TODO: maybe apply gamma correction to the albedo luminance parameter??
   
-    textureStore(auxOutput, GlobalInvocationID.xy, aux);
+    textureStore(auxOutput, input.gid.xy, aux);
   }`)
   .$uses({
     MAX_STEPS: MarchParams.maxSteps,

apps/phoure-www/src/lib/GameEngine/sdfRenderer/worldSdf.ts

@@ -90,7 +90,7 @@ export const worldMat = tgpu['~unstable']
 
     if (d_left_blob <= sd) {
       // left blob
-      out.albedo = d.vec3f(0.2, 0.2, 1);
+      out.albedo = d.vec3f(1, 0.5, 0.2);
       out.roughness = 0.95;
     } else if (d_center_blob <= sd) {
       // test light