Migrated more functions to TGSL

Author: iwoplaza

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

@@ -30,9 +30,9 @@ export const getCameraProps = tgpu['~unstable']
 
 export const constructRayPos = tgpu['~unstable']
   .fn(
-    {},
+    [],
     d.vec3f,
-  )(/* wgsl */ `{
+  )(/* wgsl */ `() -> vec3f {
     let camera = getCameraProps;
     return (camera.inv_view_matrix * vec4(0., 0., 0., 1.)).xyz;
   }`)

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

@@ -1,6 +1,7 @@
 import { rgbToYcbcrMatrix, ycbcrToRgbMatrix } from '@typegpu/color';
 import { accessViewportSize } from '@typegpu/common';
 import tgpu from 'typegpu';
+import * as std from 'typegpu/std';
 import * as d from 'typegpu/data';
 
 export const combinationLayout = tgpu
@@ -10,40 +11,26 @@ export const combinationLayout = tgpu
   })
   .$name('combinationLayout');
 
-const { blurredTexture, mendedBuffer } = combinationLayout.bound;
+const layout = combinationLayout;
 
-export const combinationEntryFn = tgpu['~unstable']
-  .fragmentFn({
-    in: { coord_f: d.builtin.position, uv: d.vec2f },
-    out: d.vec4f,
-  })(/* wgsl */ `{
-    let coord = vec2u(floor(in.coord_f.xy));
+export const combinationEntryFn = tgpu['~unstable'].fragmentFn({
+  in: { coord_f: d.builtin.position, uv: d.vec2f },
+  out: d.vec4f,
+})((input) => {
+  const coord = d.vec2u(std.floor(input.coord_f.xy));
+  const blurred = std.textureLoad(layout.$.blurredTexture, coord, 0);
+  const blurred_ycbcr = std.mul(blurred.xyz, rgbToYcbcrMatrix.value);
 
-    let blurred = textureLoad(
-      blurredTexture,
-      coord,
-      0
-    );
-  
-    let blurred_ycbcr = blurred.rgb * rgbToYcbcrMatrix;
-  
-    let buffer_idx = coord.y * u32(accessViewportSize.x) + coord.x;
-    let mended_lumi = mendedBuffer[buffer_idx];
-  
-    let combined_ycbcr = vec3f(
-      blurred_ycbcr.r + mended_lumi, // Y
-      blurred_ycbcr.g, // Cb
-      blurred_ycbcr.b, // Cr
-    );
-  
-    let combined = combined_ycbcr * ycbcrToRgbMatrix;
-  
-    return vec4f(combined, 1.0);
-  }`)
-  .$uses({
-    rgbToYcbcrMatrix,
-    ycbcrToRgbMatrix,
-    blurredTexture,
-    mendedBuffer,
-    accessViewportSize,
-  });
+  const buffer_idx = coord.y * d.u32(accessViewportSize.value.x) + coord.x;
+  const mended_lumi = layout.$.mendedBuffer[buffer_idx];
+
+  const combined_ycbcr = d.vec3f(
+    blurred_ycbcr.x + mended_lumi, // Y
+    blurred_ycbcr.y, // Cb
+    blurred_ycbcr.z, // Cr
+  );
+
+  const combined = std.mul(combined_ycbcr, ycbcrToRgbMatrix.value);
+
+  return d.vec4f(combined, 1.0);
+});

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

@@ -109,16 +109,17 @@ const sampleGlobal = tgpu['~unstable'].derived(() => {
     .$name('sample_global');
 });
 
+const f32Array = (n: number) => d.arrayOf(d.f32, n);
+
 const applyReLU = tgpu['~unstable'].derived(() => {
+  const outChannels = outChannelsSlot.value;
+
   return tgpu['~unstable']
-    .fn([
-      d.ptrFn(d.arrayOf(d.f32, outChannelsSlot.value)),
-    ])(`(result: ptr<function, array<f32, outChannelsSlot>>) {
-      for (var i = 0u; i < outChannelsSlot; i++) {
-        (*result)[i] = max(0, (*result)[i]);
+    .fn([d.ptrFn(f32Array(outChannels))])((result) => {
+      for (let i = 0; i < outChannels; i++) {
+        result[i] = std.max(0, result[i]);
       }
-    }`)
-    .$uses({ outChannelsSlot })
+    })
     .$name('apply_relu');
 });
 

apps/phoure-www/src/lib-ray-marching/marchSdf.ts

@@ -27,11 +27,11 @@ export const MarchResult = d.struct({
   position: d.vec3f,
 });
 
-export const march = tgpu['~unstable'].fn({
-  ctx: d.ptrFn(ShapeContext),
-  limit: d.u32,
-  out: d.ptrFn(MarchResult),
-})`{
+export const march = tgpu['~unstable'].fn([
+  d.ptrFn(ShapeContext),
+  d.u32,
+  d.ptrFn(MarchResult),
+])`(ctx: ptr<function, ShapeContext>, limit: u32, out: ptr<function, MarchResult>) {
   var pos = (*ctx).rayPos;
   var prev_dist = -1.;
   var min_dist: f32 = MarchParams.farPlane;
@@ -78,5 +78,7 @@ export const march = tgpu['~unstable'].fn({
   (*out).steps = step;
 }
 `.$uses({
+  ShapeContext,
+  MarchResult,
   MarchParams,
 });

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

@@ -50,15 +50,12 @@ export const accumulatedLayersAtom = atom(0);
  * @param mat_roughness
  */
 const reflect = tgpu['~unstable']
-  .fn(
-    {
-      rayDir: d.vec3f,
-      normal: d.vec3f,
-      matRoughness: d.f32,
-      outRoughness: d.ptrFn(d.f32),
-    },
+  .fn([
+    d.vec3f,
     d.vec3f,
-  )(`{
+    d.f32,
+    d.ptrFn(d.f32),
+  ])(`(rayDir: vec3f, normal: vec3f, matRoughness: f32, outRoughness: ptr<function, f32>) -> vec3f {
     let slope = dot(rayDir, normal);
     let dn2 = 2. * slope;
     let refl_dir = rayDir - dn2 * normal;

pnpm-lock.yaml

@@ -4,5 +4,5 @@ packages:
 
 # Define a catalog of version ranges.
 catalog:
-  typegpu: ^0.5.7
+  typegpu: https://pkg.pr.new/software-mansion/TypeGPU/typegpu@4b33dc38310dd6df3d00f3ddc6cc4bae09bfd3d8
   unplugin-typegpu: ^0.1.1