Rewrote more stuff from the SDF Renderer into TGSL

Author: iwoplaza

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

@@ -21,7 +21,8 @@ const fullScreenQuadVertexFn = tgpu['~unstable']
       texelSizeY: vec2f,
       coordHG: vec2f,
     },
-  })(/* wgsl */ `{
+  })(
+    /* wgsl */ `{
     const SCREEN_RECT = array<vec2f, 6>(
       vec2f(-1.0, -1.0),
       vec2f(1.0, -1.0),
@@ -54,7 +55,8 @@ const fullScreenQuadVertexFn = tgpu['~unstable']
     output.coordHG = UVS[in.idx] * viewport_size - vec2f(0.5f, 0.5f);      // fetch offsets and weights from filter texture
 
     return output;
-  }`)
+  }`,
+  )
   .$uses({ texture: layout.bound.texture });
 
 /**
@@ -71,7 +73,8 @@ const resampleCubic = tgpu['~unstable']
       coordHG: vec2f,
     },
     out: vec4f,
-  })(/* wgsl */ `{
+  })(
+    /* wgsl */ `{
     var hg_x = textureSample(hgLookup, wrappingSampler, in.coordHG.x).xyz;
     var hg_y = textureSample(hgLookup, wrappingSampler, in.coordHG.y).xyz;      // determine linear sampling coordinates
     var coord_source10 = in.uv + hg_x.x * in.texelSizeX;
@@ -87,9 +90,10 @@ const resampleCubic = tgpu['~unstable']
     tex_source00 = mix(tex_source00, tex_source01, hg_y.z);
     tex_source10 = mix(tex_source10, tex_source11, hg_y.z);      // weight along x direction
     tex_source00 = mix(tex_source00, tex_source10, hg_x.z);
-    
+
     return tex_source00;
-  }`)
+  }`,
+  )
   .$uses({
     hgLookup: layout.bound.hgLookup,
     texture: layout.bound.texture,

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

@@ -71,7 +71,7 @@ export const BlipDifferenceStep = ({
       pipeline
         .withColorAttachment(passColorAttachment)
         .with(layout, bindGroup)
-        .draw(6);
+        .draw(3);
     },
   };
 };

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

@@ -21,14 +21,11 @@ import {
 
 import { store } from 'src/lib/store.ts';
 import type { GBuffer } from '../../gBuffer.ts';
-import { ONES_3F } from '../wgslUtils/mathConstants.ts';
 import { Material, skyColor, worldMat, worldSdf } from './worldSdf.ts';
 
 const BlockSize = 8;
 
 // parameters
-const OutputFormat = tgpu['~unstable'].slot().$name('output_format');
-
 const SUPER_SAMPLES = 4;
 const ONE_OVER_SUPER_SAMPLES = 1 / SUPER_SAMPLES;
 const SUB_SAMPLES = 16;
@@ -42,6 +39,8 @@ const Reflection = d.struct({
   roughness: d.f32,
 });
 
+const ReflectionArray = d.arrayOf(Reflection, MAX_REFL);
+
 export const accumulatedLayersAtom = atom(0);
 
 /**
@@ -50,140 +49,123 @@ export const accumulatedLayersAtom = atom(0);
  * @param normal
  * @param mat_roughness
  */
-const reflect = tgpu['~unstable']
-  .fn(
-    [d.vec3f, d.vec3f, d.f32, d.ptrFn(d.f32)],
-    d.vec3f,
-  )(
-    `(rayDir, normal, matRoughness, outRoughness) {
-      let slope = dot(rayDir, normal);
-      let dn2 = 2. * slope;
-      let refl_dir = rayDir - dn2 * normal;
-
-      let fresnel = 1. - pow(1. + slope, 16.);
-      let roughness = matRoughness * fresnel;
-      *outRoughness = roughness;
-
-      var new_ray_dir = randf.onHemisphere(normal);
-      new_ray_dir = mix(refl_dir, new_ray_dir, roughness);
-      return normalize(new_ray_dir);
-    }`,
-  )
-  .$uses({ randf })
-  .$name('reflect');
-
-const renderSubPixel = tgpu['~unstable']
-  .fn(
-    [d.vec2f],
-    d.vec3f,
-  )(
-    /* wgsl */ `(coord: vec2f) -> vec3f {
-    // doing the first march before each sub-sample, since the first march result is the same for all of them
-
-    var init_shape_ctx: ShapeContext;
-    init_shape_ctx.rayPos = constructRayPos();
-    init_shape_ctx.rayDir = constructRayDir(coord);
-    init_shape_ctx.rayDistance = 0.;
-    var init_march_result: MarchResult;
-
-    march(&init_shape_ctx, MAX_STEPS, &init_march_result);
-
-    if (init_march_result.steps >= MAX_STEPS) {
-      return min(skyColor(init_shape_ctx.rayDir), ONES_3F);
-    }
+const reflect = tgpu.fn(
+  [d.vec3f, d.vec3f, d.f32, d.ptrFn(d.f32)],
+  d.vec3f,
+)((rayDir, normal, matRoughness, outRoughness) => {
+  const slope = std.dot(rayDir, normal);
+  const refl_dir = rayDir.sub(normal.mul(2 * slope));
+
+  const fresnel = 1 - std.pow(1 + slope, 16);
+  const roughness = matRoughness * fresnel;
+  // TODO: Fix when boxed values are introduced
+  // biome-ignore lint/style/noParameterAssign: Has to be done like this for now
+  outRoughness = roughness;
+
+  let new_ray_dir = randf.onHemisphere(normal);
+  new_ray_dir = std.mix(refl_dir, new_ray_dir, roughness);
+  return std.normalize(new_ray_dir);
+});
 
-    let init_normal = estimateNormal(init_march_result.position, init_shape_ctx);
+const renderSubPixel = tgpu.fn(
+  [d.vec2f],
+  d.vec3f,
+)((coord) => {
+  // doing the first march before each sub-sample, since the first march result is the same for all of them
 
-    var init_material: Material;
-    worldMat(init_march_result.position, init_shape_ctx, &init_material);
+  const init_shape_ctx = ShapeContext({
+    rayPos: constructRayPos(),
+    rayDir: constructRayDir(coord),
+    rayDistance: 0,
+  });
+  const init_march_result = MarchResult();
 
-    if (init_material.emissive) {
-      return min(init_material.albedo, ONES_3F);
-    }
+  march(init_shape_ctx, MarchParams.maxSteps.$, init_march_result);
 
-    var reflections: array<Reflection, MAX_REFL>;
+  if (init_march_result.steps >= MarchParams.maxSteps.$) {
+    return std.min(skyColor(init_shape_ctx.rayDir), d.vec3f(1));
+  }
 
-    var acc = vec3f(0., 0., 0.);
-    for (var sub = 0u; sub < SUB_SAMPLES; sub++) {
-      var material: Material = init_material;
-      var normal = init_normal;
+  const init_normal = estimateNormal(
+    init_march_result.position,
+    init_shape_ctx,
+  );
+  const init_material = Material();
 
-      var emissive_color = vec3f(0., 0., 0.);
-      var refl_count = 0u;
+  worldMat(init_march_result.position, init_shape_ctx, init_material);
 
-      var shape_ctx: ShapeContext;
-      shape_ctx.rayPos = init_march_result.position;
-      shape_ctx.rayDir = init_shape_ctx.rayDir;
-      shape_ctx.rayDistance = init_shape_ctx.rayDistance;
+  if (init_material.emissive) {
+    return std.min(init_material.albedo, d.vec3f(1));
+  }
 
-      for (var refl = 0u; refl < MAX_REFL; refl++) {
-        var roughness: f32 = 0.;
-        shape_ctx.rayDir = reflect(
-          shape_ctx.rayDir,
-          normal,
-          material.roughness,
-          &roughness,
-        );
-        reflections[refl_count].color = material.albedo;
-        reflections[refl_count].roughness = roughness;
-        refl_count++;
+  const reflections = ReflectionArray();
+
+  let acc = d.vec3f();
+  for (let sub = d.u32(0); sub < SUB_SAMPLES; sub++) {
+    const material = Material(init_material);
+
+    let normal = d.vec3f(init_normal);
+    let emissive_color = d.vec3f();
+    let refl_count = d.u32(0);
+
+    const shape_ctx = ShapeContext({
+      rayPos: init_march_result.position,
+      rayDir: init_shape_ctx.rayDir,
+      rayDistance: init_shape_ctx.rayDistance,
+    });
+
+    for (let refl = d.u32(0); refl < MAX_REFL; refl++) {
+      const roughness = d.f32(0);
+      shape_ctx.rayDir = reflect(
+        shape_ctx.rayDir,
+        normal,
+        material.roughness,
+        roughness,
+      );
+      reflections[refl_count].color = material.albedo;
+      reflections[refl_count].roughness = roughness;
+      refl_count++;
 
-        var march_result: MarchResult;
-        march(&shape_ctx, MAX_STEPS, &march_result);
-        shape_ctx.rayPos = march_result.position;
+      const march_result = MarchResult();
+      march(shape_ctx, MarchParams.maxSteps.$, march_result);
+      shape_ctx.rayPos = march_result.position;
 
-        if (march_result.steps >= MAX_STEPS) {
-          emissive_color = skyColor(shape_ctx.rayDir);
-          break;
-        }
+      if (march_result.steps >= MarchParams.maxSteps.$) {
+        emissive_color = skyColor(shape_ctx.rayDir);
+        break;
+      }
 
-        normal = estimateNormal(shape_ctx.rayPos, shape_ctx);
+      normal = estimateNormal(shape_ctx.rayPos, shape_ctx);
 
-        worldMat(shape_ctx.rayPos, shape_ctx, &material);
+      worldMat(shape_ctx.rayPos, shape_ctx, material);
 
-        if (material.emissive) {
-          emissive_color = material.albedo;
-          break;
-        }
+      if (material.emissive) {
+        emissive_color = material.albedo;
+        break;
       }
+    }
 
-      var sub_acc = emissive_color;
-      for (var i = i32(refl_count) - 1; i >= 0; i--) {
-        let mat_color = reflections[i].color;
-        let reflectivity = 1. - reflections[i].roughness;
-
-        sub_acc *= mix(mat_color, ONES_3F, max(0., min(reflectivity, 1.))); // absorb the ray color based on reflectivity
-      }
+    let sub_acc = d.vec3f(emissive_color);
+    for (let i = d.i32(refl_count) - 1; i >= 0; i--) {
+      const mat_color = d.vec3f(reflections[i].color);
+      const reflectivity = 1 - reflections[i].roughness;
 
-      acc += sub_acc;
+      sub_acc = sub_acc.mul(
+        std.mix(mat_color, d.vec3f(1), std.max(0, std.min(reflectivity, 1))),
+      ); // absorb the ray color based on reflectivity
     }
 
-    // averaging
-    acc /= f32(SUB_SAMPLES);
+    acc = acc.add(sub_acc);
+  }
 
-    // clipping
-    acc = min(acc, ONES_3F);
+  // averaging
+  acc = acc.div(SUB_SAMPLES);
 
-    return acc;
-  }`,
-  )
-  .$uses({
-    SUB_SAMPLES,
-    MAX_STEPS: MarchParams.maxSteps,
-    MAX_REFL,
-    ONES_3F,
-    MarchResult,
-    Material,
-    Reflection,
-    ShapeContext,
-    constructRayPos,
-    constructRayDir,
-    estimateNormal,
-    march,
-    skyColor,
-    worldMat,
-    reflect,
-  });
+  // clipping
+  acc = std.min(acc, d.vec3f(1));
+
+  return acc;
+});
 
 const mainLayout = tgpu.bindGroupLayout({
   previousRender: { texture: 'unfilterable-float' },
@@ -194,14 +176,12 @@ const mainComputeFn = tgpu['~unstable'].computeFn({
   workgroupSize: [BlockSize, BlockSize],
   in: { gid: d.builtin.globalInvocationId },
 })((input) => {
+  const preSeed = d.vec2f(input.gid.xy);
   randf.seed2(
-    std.add(
-      std.mul(d.vec2f(input.gid.xy), 0.1646936793),
-      std.mul(getRandomSeedPrimer.value, 0.934534732),
-    ),
+    preSeed.mul(0.1646936793).add(getRandomSeedPrimer.$ * 0.934534732),
   );
 
-  const prev_layers = getAccumulatedLayers.value;
+  const prev_layers = getAccumulatedLayers.$;
   const prev_render = std.textureLoad(
     mainLayout.$.previousRender,
     input.gid.xy,
@@ -211,30 +191,24 @@ const mainComputeFn = tgpu['~unstable'].computeFn({
   let acc = d.vec3f(0, 0, 0);
   for (let sx = d.u32(0); sx < SUPER_SAMPLES; sx++) {
     for (let sy = d.u32(0); sy < SUPER_SAMPLES; sy++) {
-      const offset = d.vec2f(
-        (d.f32(sx) + 0.5) * ONE_OVER_SUPER_SAMPLES,
-        (d.f32(sy) + 0.5) * ONE_OVER_SUPER_SAMPLES,
-      );
+      const offset = d.vec2f(sx, sy).add(0.5).mul(ONE_OVER_SUPER_SAMPLES);
 
-      acc = std.add(
-        acc,
-        renderSubPixel(std.add(d.vec2f(input.gid.xy), offset)),
-      );
+      acc = acc.add(renderSubPixel(d.vec2f(input.gid.xy).add(offset)));
     }
   }
 
-  acc = std.mul(acc, ONE_OVER_SUPER_SAMPLES * ONE_OVER_SUPER_SAMPLES);
+  acc = acc.mul(ONE_OVER_SUPER_SAMPLES * ONE_OVER_SUPER_SAMPLES);
 
   // applying gamma correction
   const gamma = 2.2;
-  acc = std.pow(acc, d.vec3f(d.f32(1) / gamma));
+  acc = std.pow(acc, d.vec3f(1 / gamma));
 
-  let new_render = d.vec4f(acc, 1.0);
+  let new_render = d.vec4f(acc, 1);
   if (prev_layers > 0) {
-    new_render = std.div(
-      std.add(std.mul(prev_render, prev_layers), d.vec4f(acc, 1.0)),
-      prev_layers + 1,
-    );
+    new_render = prev_render
+      .mul(prev_layers)
+      .add(d.vec4f(acc, 1.0))
+      .div(prev_layers + 1);
   }
 
   std.textureStore(mainLayout.$.mainOutput, input.gid.xy, new_render);
@@ -342,7 +316,6 @@ export function createSDFRenderer(options: SDFRendererOptions) {
 
   const mainPipeline = root['~unstable']
     // filling slots
-    .with(OutputFormat, 'rgba8unorm')
     .with(getRandomSeedPrimer, randomSeedPrimerBuffer.as('uniform'))
     .with(getAccumulatedLayers, layersBuffer.as('uniform'))
     .with(getCameraProps, camera.cameraBuffer.as('uniform'))
@@ -355,7 +328,6 @@ export function createSDFRenderer(options: SDFRendererOptions) {
 
   const auxPipeline = root['~unstable']
     // filling slots
-    .with(OutputFormat, 'rgba16float')
     .with(getCameraProps, camera.cameraBuffer.as('uniform'))
     .with(accessViewportSize, d.vec2f(auxPassSize[0], auxPassSize[1]))
     .with(MarchParams.sampleSdf, worldSdf)