TGSL in camera

Author: iwoplaza

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

@@ -1,9 +1,6 @@
 import { accessViewportSize } from '@typegpu/common';
-import tgpu, {
-  type TgpuBuffer,
-  type TgpuRoot,
-  type UniformFlag,
-} from 'typegpu';
+import tgpu, { type TgpuRoot, type TgpuUniform } from 'typegpu';
+import { normalize } from 'typegpu/std';
 import * as d from 'typegpu/data';
 import { mat4, vec3 } from 'wgpu-matrix';
 
@@ -24,60 +21,47 @@ export const CameraStruct = d.struct({
   field_of_view: d.f32,
 });
 
-export const getCameraProps = tgpu['~unstable']
-  .accessor(CameraStruct)
-  .$name('getCameraProps');
-
-export const constructRayPos = tgpu['~unstable']
-  .fn(
-    [],
-    d.vec3f,
-  )(/* wgsl */ `() -> vec3f {
-    let camera = getCameraProps;
-    return (camera.inv_view_matrix * vec4(0., 0., 0., 1.)).xyz;
-  }`)
-  .$uses({ getCameraProps });
-
-export const constructRayDir = tgpu['~unstable']
-  .fn(
-    [d.vec2f],
-    d.vec3f,
-  )(/* wgsl */ `(coord: vec2f) -> vec3f {
-    let camera = getCameraProps;
-    let viewport_size = accessViewportSize;
-    var view_coords = (coord - viewport_size / 2.) / viewport_size.y; // y in [-0.5, 0.5]
-    view_coords = view_coords * camera.field_of_view;
-
-    var view_ray_dir = vec3f(
-      view_coords,
-      -0.5,
-    );
-    view_ray_dir.y *= -1.;
-    view_ray_dir = normalize(view_ray_dir);
+export const cameraPropsAccess = tgpu['~unstable'].accessor(CameraStruct);
+
+export const constructRayPos = tgpu.fn(
+  [],
+  d.vec3f,
+)(() => cameraPropsAccess.$.inv_view_matrix.mul(d.vec4f(0, 0, 0, 1)).xyz);
+
+export const constructRayDir = tgpu.fn(
+  [d.vec2f],
+  d.vec3f,
+)((coord) => {
+  const viewCoords = coord
+    .sub(accessViewportSize.$.div(2))
+    .div(accessViewportSize.$.y)
+    // y in [-0.5, 0.5]
+    .mul(cameraPropsAccess.$.field_of_view);
 
-    return (camera.inv_view_matrix * vec4(view_ray_dir, 0.)).xyz;
-  }`)
-  .$uses({ getCameraProps, accessViewportSize })
-  .$name('construct_ray_dir');
+  const viewRayDir = normalize(d.vec3f(viewCoords, -0.5));
+  viewRayDir.y *= -1;
+
+  return cameraPropsAccess.$.inv_view_matrix.mul(d.vec4f(viewRayDir, 0)).xyz;
+});
 
 export class Camera {
-  public readonly cameraBuffer: TgpuBuffer<typeof CameraStruct> & UniformFlag;
+  #lastTime = performance.now();
 
-  private _lastTime = Date.now();
+  readonly cameraUniform: TgpuUniform<typeof CameraStruct>;
 
   constructor(root: TgpuRoot) {
-    this.cameraBuffer = root.createBuffer(CameraStruct).$usage('uniform');
+    this.cameraUniform = root.createUniform(CameraStruct);
   }
 
   update() {
-    const now = Date.now();
-    const dt = (now - this._lastTime) / 1000;
-    this._lastTime = now;
+    const now = performance.now();
+    const dt = (now - this.#lastTime) / 1000;
+    this.#lastTime = now;
 
     const invViewMatrix = mat4.identity(d.mat4x4f());
 
-    const manualOrientation = (store.get(cameraOrientationControlAtom) / 180) *
-      Math.PI;
+    const manualOrientation =
+      (store.get(cameraOrientationControlAtom) / 180) * Math.PI;
     const autoOrientation = (store.get(autoCameraOrientation) / 180) * Math.PI;
 
     const rad = store.get(autoRotateControlAtom)
@@ -108,8 +92,7 @@ export class Camera {
 
     const fovAngle = (store.get(cameraFovControlAtom) / 180) * Math.PI;
 
-    // Writing to buffer
-    this.cameraBuffer.write({
+    this.cameraUniform.write({
       view_matrix: viewMatrix,
       inv_view_matrix: invViewMatrix,
       field_of_view: Math.tan(fovAngle / 2),

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

@@ -3,5 +3,5 @@ export {
   CameraStruct,
   constructRayDir,
   constructRayPos,
-  getCameraProps,
+  cameraPropsAccess,
 } from './camera';

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

@@ -9,7 +9,7 @@ import {
   Camera,
   constructRayDir,
   constructRayPos,
-  getCameraProps,
+  cameraPropsAccess,
 } from 'src/lib-camera';
 import {
   estimateNormal,
@@ -251,8 +251,9 @@ const auxComputeFn = tgpu['~unstable'].computeFn({
     // emissionLuminance = albedoLuminance;
   }
 
-  const camera = getCameraProps.$;
-  const viewNormal = camera.view_matrix.mul(d.vec4f(worldNormal, 0));
+  const viewNormal = cameraPropsAccess.$.view_matrix.mul(
+    d.vec4f(worldNormal, 0),
+  );
 
   const aux = d.vec4f(viewNormal.xy, albedoLuminance, emissionLuminance);
 
@@ -289,7 +290,7 @@ export function createSDFRenderer(options: SDFRendererOptions) {
     // filling slots
     .with(randomSeedPrimerAccess, randomSeedPrimerUniform)
     .with(accumulatedLayersAccess, layersUniform)
-    .with(getCameraProps, camera.cameraBuffer.as('uniform'))
+    .with(cameraPropsAccess, camera.cameraUniform)
     .with(accessViewportSize, d.vec2f(mainPassSize[0], mainPassSize[1]))
     .with(MarchParams.sampleSdf, worldSdf)
     // ---
@@ -299,7 +300,7 @@ export function createSDFRenderer(options: SDFRendererOptions) {
 
   const auxPipeline = root['~unstable']
     // filling slots
-    .with(getCameraProps, camera.cameraBuffer.as('uniform'))
+    .with(cameraPropsAccess, camera.cameraUniform)
     .with(accessViewportSize, d.vec2f(auxPassSize[0], auxPassSize[1]))
     .with(MarchParams.sampleSdf, worldSdf)
     // ---

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

@@ -10,7 +10,7 @@ export const Material = d.struct({
   emissive: d.bool,
 });
 
-// const getTime = tgpu.accessor(d.f32);
+// const timeAccess = tgpu.accessor(d.f32);
 
 const sdfShell = tgpu.fn([d.vec3f], d.f32);
 
@@ -20,9 +20,10 @@ const objLeftBlob = sdfShell((pos) => {
 });
 
 // ANIMATED LIGHT
-// const objCenterBlob = wgsl.fn`(pos: vec3f) -> f32 {
-//   return ${sdf.sphere}(pos, vec3(-0.3, 0.7 + sin(${timeUniform} * 0.001) * 0.4, -2.), 0.2);
-// }`.$name('obj_center_blob');
+// const objCenterBlob = sdfShell((pos) => {
+//   'kernel';
+//   return sdSphere(pos.sub(d.vec3f(-0.3, 0.7 + sin(timeAccess.$ * 0.001) * 0.4, -2.)), 0.2);
+// });
 
 const objCenterBlob = sdfShell((pos) => {
   'kernel';