Use published @typegpu/sdf

Author: iwoplaza

apps/phoure-www/package.json

@@ -29,7 +29,7 @@
     "@typegpu/color": "workspace:*",
     "@typegpu/common": "workspace:*",
     "@typegpu/noise": "^0.1.0",
-    "@typegpu/sdf": "workspace:*",
+    "@typegpu/sdf": "^0.0.1",
     "@types/react": "^18.0.2",
     "@types/react-dom": "^18.0.2",
     "astro": "^5.7.0",

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

@@ -37,7 +37,6 @@ export const PostProcessingStep = ({
   const passColorAttachment = {
     // view is acquired and set in render loop.
     view: undefined as unknown as GPUTextureView,
-
     clearValue: [0, 0, 0, 1],
     loadOp: 'clear' as const,
     storeOp: 'store' as const,

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

@@ -31,8 +31,8 @@ const ONE_OVER_SUPER_SAMPLES = 1 / SUPER_SAMPLES;
 const SUB_SAMPLES = 16;
 const MAX_REFL = 3;
 
-const getRandomSeedPrimer = tgpu['~unstable'].accessor(d.f32);
-const getAccumulatedLayers = tgpu['~unstable'].accessor(d.f32);
+const randomSeedPrimerAccess = tgpu['~unstable'].accessor(d.f32);
+const accumulatedLayersAccess = tgpu['~unstable'].accessor(d.f32);
 
 const Reflection = d.struct({
   color: d.vec3f,
@@ -178,11 +178,11 @@ const mainComputeFn = tgpu['~unstable'].computeFn({
 })((input) => {
   const preSeed = d.vec2f(input.gid.xy);
   randf.seed2(
-    preSeed.mul(0.1646936793).add(getRandomSeedPrimer.$ * 0.934534732),
+    preSeed.mul(0.1646936793).add(randomSeedPrimerAccess.$ * 0.934534732),
   );
 
-  const prev_layers = getAccumulatedLayers.$;
-  const prev_render = std.textureLoad(
+  const prevLayers = accumulatedLayersAccess.$;
+  const prevRender = std.textureLoad(
     mainLayout.$.previousRender,
     input.gid.xy,
     0,
@@ -203,15 +203,15 @@ const mainComputeFn = tgpu['~unstable'].computeFn({
   const gamma = 2.2;
   acc = std.pow(acc, d.vec3f(1 / gamma));
 
-  let new_render = d.vec4f(acc, 1);
-  if (prev_layers > 0) {
-    new_render = prev_render
-      .mul(prev_layers)
+  let newRender = d.vec4f(acc, 1);
+  if (prevLayers > 0) {
+    newRender = prevRender
+      .mul(prevLayers)
       .add(d.vec4f(acc, 1.0))
-      .div(prev_layers + 1);
+      .div(prevLayers + 1);
   }
 
-  std.textureStore(mainLayout.$.mainOutput, input.gid.xy, new_render);
+  std.textureStore(mainLayout.$.mainOutput, input.gid.xy, newRender);
 });
 
 const auxLayout = tgpu.bindGroupLayout({
@@ -222,40 +222,39 @@ const auxComputeFn = tgpu['~unstable'].computeFn({
   workgroupSize: [BlockSize, BlockSize],
   in: { gid: d.builtin.globalInvocationId },
 })((input) => {
-  const offset = d.vec2f(0.5);
-
-  const march_result = MarchResult();
-  const shape_ctx = ShapeContext();
-  shape_ctx.rayPos = constructRayPos();
-  shape_ctx.rayDir = constructRayDir(d.vec2f(input.gid.xy).add(offset));
-  shape_ctx.rayDistance = 0;
+  const marchResult = MarchResult();
+  const shapeCtx = ShapeContext({
+    rayPos: constructRayPos(),
+    rayDir: constructRayDir(d.vec2f(input.gid.xy).add(d.vec2f(0.5))),
+    rayDistance: 0,
+  });
 
-  march(shape_ctx, MarchParams.maxSteps.$, march_result);
+  march(shapeCtx, MarchParams.maxSteps.$, marchResult);
 
-  let world_normal = d.vec3f();
+  let worldNormal = d.vec3f();
 
-  if (march_result.steps >= MarchParams.maxSteps.$) {
-    world_normal = std.neg(shape_ctx.rayDir);
+  if (marchResult.steps >= MarchParams.maxSteps.$) {
+    worldNormal = std.neg(shapeCtx.rayDir);
   } else {
-    world_normal = estimateNormal(march_result.position, shape_ctx);
+    worldNormal = estimateNormal(marchResult.position, shapeCtx);
   }
 
   const material = Material();
-  worldMat(march_result.position, shape_ctx, material);
+  worldMat(marchResult.position, shapeCtx, material);
 
-  const mat_color = std.min(material.albedo, d.vec3f(1));
+  const matColor = std.min(material.albedo, d.vec3f(1));
 
-  const albedo_luminance = convertRgbToY(mat_color);
-  const emission_luminance = 0;
+  const albedoLuminance = convertRgbToY(matColor);
+  const emissionLuminance = 0;
   if (material.emissive) {
-    // albedo_luminance = 0.3;
-    // emission_luminance = albedo_luminance;
+    // albedoLuminance = 0.3;
+    // emissionLuminance = albedoLuminance;
   }
 
   const camera = getCameraProps.$;
-  const view_normal = camera.view_matrix.mul(d.vec4f(world_normal, 0));
+  const viewNormal = camera.view_matrix.mul(d.vec4f(worldNormal, 0));
 
-  const aux = d.vec4f(view_normal.xy, albedo_luminance, emission_luminance);
+  const aux = d.vec4f(viewNormal.xy, albedoLuminance, emissionLuminance);
 
   // TODO: maybe apply gamma correction to the albedo luminance parameter??
 
@@ -288,8 +287,8 @@ export function createSDFRenderer(options: SDFRendererOptions) {
 
   const mainPipeline = root['~unstable']
     // filling slots
-    .with(getRandomSeedPrimer, randomSeedPrimerUniform)
-    .with(getAccumulatedLayers, layersUniform)
+    .with(randomSeedPrimerAccess, randomSeedPrimerUniform)
+    .with(accumulatedLayersAccess, layersUniform)
     .with(getCameraProps, camera.cameraBuffer.as('uniform'))
     .with(accessViewportSize, d.vec2f(mainPassSize[0], mainPassSize[1]))
     .with(MarchParams.sampleSdf, worldSdf)

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

@@ -1,8 +1,8 @@
-import { sphere } from '@typegpu/sdf';
-import { MarchParams, ShapeContext } from 'src/lib-ray-marching';
-import tgpu, { type TgpuFnShell } from 'typegpu';
+import tgpu from 'typegpu';
 import * as d from 'typegpu/data';
 import { abs, floor, min, mix, mul, pow } from 'typegpu/std';
+import { sdSphere } from '@typegpu/sdf';
+import { MarchParams, ShapeContext } from 'src/lib-ray-marching';
 
 export const Material = d.struct({
   albedo: d.vec3f,
@@ -12,14 +12,11 @@ export const Material = d.struct({
 
 // const getTime = tgpu.accessor(d.f32);
 
-const sdfShell: TgpuFnShell<[pos: d.Vec3f], d.F32> = tgpu['~unstable'].fn(
-  [d.vec3f],
-  d.f32,
-);
+const sdfShell = tgpu.fn([d.vec3f], d.f32);
 
 const objLeftBlob = sdfShell((pos) => {
   'kernel';
-  return sphere(pos, d.vec3f(-0.3, -0.2, 0), 0.2);
+  return sdSphere(pos.sub(d.vec3f(-0.3, -0.2, 0)), 0.2);
 });
 
 // ANIMATED LIGHT
@@ -29,78 +26,81 @@ const objLeftBlob = sdfShell((pos) => {
 
 const objCenterBlob = sdfShell((pos) => {
   'kernel';
-  return sphere(pos, d.vec3f(-0.3, 0.4, 0.4), 0.2);
+  return sdSphere(pos.sub(d.vec3f(-0.3, 0.4, 0.4)), 0.2);
 });
 
 const objRightBlob = sdfShell((pos) => {
   'kernel';
-  return sphere(pos, d.vec3f(0.4, 0.2, 0), 0.4);
+  return sdSphere(pos.sub(d.vec3f(0.4, 0.2, 0)), 0.4);
 });
 
 const objFloor = sdfShell((pos) => {
   'kernel';
   return pos.y + 0.3;
 });
 
-const matFloor = tgpu['~unstable']
-  .fn([d.vec3f, d.ptrFn(Material)])((pos, mtr) => {
-    const uv = floor(mul(5, pos.xz));
-    const c = 0.2 + 0.5 * ((uv.x + uv.y) - 2.0 * floor((uv.x + uv.y) / 2.0));
-    
-    mtr.albedo = mix(d.vec3f(1., 1., 1.), d.vec3f(0., 0., 0.), c);
-    mtr.roughness = 0.9;
-  })
-  .$name('mat_floor');
+const matFloor = tgpu.fn([d.vec3f, d.ptrFn(Material)])((pos, mtr) => {
+  const uv = floor(mul(5, pos.xz));
+  const c = 0.2 + 0.5 * (uv.x + uv.y - 2.0 * floor((uv.x + uv.y) / 2.0));
+
+  mtr.albedo = mix(d.vec3f(1, 1, 1), d.vec3f(0, 0, 0), c);
+  mtr.roughness = 0.9;
+});
 
 export const FAR = 100;
 
 export const worldSdf = sdfShell((pos) => {
   'kernel';
-  let min_dist = d.f32(FAR);
+  let minDist = d.f32(FAR);
 
-  min_dist = min(min_dist, objLeftBlob(pos));
-  min_dist = min(min_dist, objCenterBlob(pos));
-  min_dist = min(min_dist, objRightBlob(pos));
-  min_dist = min(min_dist, objFloor(pos));
+  minDist = min(minDist, objLeftBlob(pos));
+  minDist = min(minDist, objCenterBlob(pos));
+  minDist = min(minDist, objRightBlob(pos));
+  minDist = min(minDist, objFloor(pos));
 
-  return min_dist;
+  return minDist;
 });
 
 // MATERIALS
 
-export const skyColor = tgpu['~unstable'].fn([d.vec3f], d.vec3f)((dir) => {
-  const t = pow(min(abs(dir.y) * 4, 1.), 0.4);
+export const skyColor = tgpu.fn(
+  [d.vec3f],
+  d.vec3f,
+)((dir) => {
+  const t = pow(min(abs(dir.y) * 4, 1), 0.4);
   return mix(d.vec3f(0.7, 0.7, 0.75), d.vec3f(0.35, 0.4, 0.6), t);
 });
 
-export const worldMat = tgpu['~unstable']
-  .fn([d.vec3f, ShapeContext, d.ptrFn(Material)])((pos, ctx, out) => {
-    const sd = MarchParams.getSurfaceThreshold.value(ctx);
-    const d_left_blob = objLeftBlob(pos);
-    const d_center_blob = objCenterBlob(pos);
-    const d_right_blob = objRightBlob(pos);
-    const d_floor_blob = objFloor(pos);
-
-    // defaults
-    out.emissive = false;
-    out.roughness = 1;
-
-    if (d_left_blob <= sd) {
-      // left blob
-      out.albedo = d.vec3f(1, 0.5, 0.2);
-      out.roughness = 0.95;
-    } else if (d_center_blob <= sd) {
-      // test light
-      out.albedo = mul(20, d.vec3f(1, 1, 0.5));
-      out.emissive = true;
-    } else if (d_right_blob <= sd) {
-      out.albedo = mul(0.9, d.vec3f(0.5, 0.5, 0.6));
-      out.roughness = 0.1;
-    } else if (d_floor_blob <= sd) {
-      matFloor(pos, out);
-    } else {
-      // out.albedo = vec3f(0.5, 0.5, 0.2);
-      out.albedo = skyColor(ctx.rayDir);
-    }
-  })
-  .$name('world_mat');
+export const worldMat = tgpu.fn([d.vec3f, ShapeContext, d.ptrFn(Material)])((
+  pos,
+  ctx,
+  out,
+) => {
+  const sd = MarchParams.getSurfaceThreshold.value(ctx);
+  const d_left_blob = objLeftBlob(pos);
+  const d_center_blob = objCenterBlob(pos);
+  const d_right_blob = objRightBlob(pos);
+  const d_floor_blob = objFloor(pos);
+
+  // defaults
+  out.emissive = false;
+  out.roughness = 1;
+
+  if (d_left_blob <= sd) {
+    // left blob
+    out.albedo = d.vec3f(1, 0.5, 0.2);
+    out.roughness = 0.95;
+  } else if (d_center_blob <= sd) {
+    // test light
+    out.albedo = mul(20, d.vec3f(1, 1, 0.5));
+    out.emissive = true;
+  } else if (d_right_blob <= sd) {
+    out.albedo = mul(0.9, d.vec3f(0.5, 0.5, 0.6));
+    out.roughness = 0.1;
+  } else if (d_floor_blob <= sd) {
+    matFloor(pos, out);
+  } else {
+    // out.albedo = vec3f(0.5, 0.5, 0.2);
+    out.albedo = skyColor(ctx.rayDir);
+  }
+});