feat: First person camera (#2179)

Author: aleksanderkatan

apps/typegpu-docs/src/examples/common/setup-first-person-camera.ts

@@ -0,0 +1,190 @@
+import * as m from 'wgpu-matrix';
+import { d, std } from 'typegpu';
+
+export const Camera = d.struct({
+  pos: d.vec4f,
+  targetPos: d.vec4f,
+  view: d.mat4x4f,
+  projection: d.mat4x4f,
+  viewInverse: d.mat4x4f,
+  projectionInverse: d.mat4x4f,
+});
+
+export interface CameraOptions {
+  initPos?: d.v3f;
+  target?: d.v3f;
+  /**
+   * Scrolling accelerates/decelerates the movement.
+   * `d.vec3f(minimum, initial, maximum)`
+   */
+  speed?: d.v3f;
+}
+
+const cameraDefaults: Partial<CameraOptions> = {
+  initPos: d.vec3f(0, 0, 0),
+  target: d.vec3f(0, 1, 0),
+  speed: d.vec3f(1, 1, 1),
+};
+
+/**
+ * Sets up a first person camera.
+ * Calls the callback on scroll events, canvas clicks/touches and resizes.
+ * Also, calls the callback during the setup with an initial camera.
+ */
+export function setupFirstPersonCamera(
+  canvas: HTMLCanvasElement,
+  partialOptions: CameraOptions,
+  callback: (updatedProps: Partial<d.Infer<typeof Camera>>) => void,
+) {
+  const options = { ...cameraDefaults, ...partialOptions } as Required<
+    CameraOptions
+  >;
+
+  // `runCallback` creates a Camera object based on the `cameraState` and passes it to the callback
+  const cameraState = {
+    pos: options.initPos,
+    yaw: 0,
+    pitch: 0,
+  };
+
+  function runCallback() {
+    const position = cameraState.pos;
+    const pitch = cameraState.pitch;
+    const yaw = cameraState.yaw;
+    const target = position.add(d.vec3f(
+      std.cos(pitch) * std.sin(yaw),
+      std.sin(pitch),
+      std.cos(pitch) * std.cos(yaw),
+    ));
+
+    const view = calculateView(position, target);
+    const projection = calculateProj(canvas.clientWidth / canvas.clientHeight);
+
+    callback(Camera({
+      pos: d.vec4f(position, 1),
+      targetPos: d.vec4f(target, 1),
+      view,
+      projection,
+      viewInverse: invertMat(view),
+      projectionInverse: invertMat(projection),
+    }));
+  }
+
+  function rotateCamera(dx: number, dy: number) {
+    const orbitSensitivity = 0.005;
+    cameraState.yaw += -dx * orbitSensitivity;
+    cameraState.pitch -= dy * orbitSensitivity;
+    cameraState.pitch = std.clamp(
+      cameraState.pitch,
+      -Math.PI / 2 + 0.01,
+      Math.PI / 2 - 0.01,
+    );
+
+    runCallback();
+  }
+
+  // resize observer
+  const resizeObserver = new ResizeObserver(() => {
+    runCallback();
+  });
+  resizeObserver.observe(canvas);
+
+  // Variables for interaction.
+  const pressedKeys = new Set<string>();
+  let moveSpeed = options.speed.y;
+
+  // keyboard events
+  const keyDownEventListener = (event: KeyboardEvent) => {
+    pressedKeys.add(event.key.toLowerCase());
+  };
+  window.addEventListener('keydown', keyDownEventListener);
+
+  const keyUpEventListener = (event: KeyboardEvent) => {
+    pressedKeys.delete(event.key.toLowerCase());
+  };
+  window.addEventListener('keyup', keyUpEventListener);
+
+  // mouse events
+  canvas.addEventListener('mousedown', () => {
+    canvas.requestPointerLock();
+  });
+
+  canvas.addEventListener('mousemove', (event: MouseEvent) => {
+    if (document.pointerLockElement !== canvas) {
+      return;
+    }
+    const dx = event.movementX;
+    const dy = event.movementY;
+    rotateCamera(dx, dy);
+  });
+
+  canvas.addEventListener('wheel', (e) => {
+    e.preventDefault();
+    moveSpeed = std.clamp(
+      moveSpeed * (1 - e.deltaY * 0.0005),
+      options.speed.x,
+      options.speed.z,
+    );
+  }, { passive: false });
+
+  function cleanupCamera() {
+    window.removeEventListener('keydown', keyDownEventListener);
+    window.removeEventListener('keyup', keyUpEventListener);
+    resizeObserver.unobserve(canvas);
+  }
+
+  // update position function
+  const updatePosition = () => {
+    if (document.pointerLockElement !== canvas) {
+      return;
+    }
+
+    const forward = std.normalize(d.vec3f(
+      std.sin(cameraState.yaw),
+      0,
+      std.cos(cameraState.yaw),
+    )).mul(moveSpeed);
+    const left = d.vec3f(forward.z, 0, -forward.x);
+
+    if (pressedKeys.has('w')) {
+      cameraState.pos = cameraState.pos.add(forward);
+    }
+    if (pressedKeys.has('s')) {
+      cameraState.pos = cameraState.pos.sub(forward);
+    }
+    if (pressedKeys.has('a')) {
+      cameraState.pos = cameraState.pos.add(left);
+    }
+    if (pressedKeys.has('d')) {
+      cameraState.pos = cameraState.pos.sub(left);
+    }
+    if (pressedKeys.has('shift')) {
+      cameraState.pos.y -= moveSpeed;
+    }
+    if (pressedKeys.has(' ')) {
+      cameraState.pos.y += moveSpeed;
+    }
+
+    runCallback();
+  };
+
+  runCallback();
+  return { cleanupCamera, updatePosition };
+}
+
+function calculateView(position: d.v3f, target: d.v3f) {
+  return m.mat4.lookAt(
+    position,
+    target,
+    d.vec3f(0, 1, 0),
+    d.mat4x4f(),
+  );
+}
+
+function calculateProj(aspectRatio: number) {
+  return m.mat4.perspective(Math.PI / 4, aspectRatio, 0.1, 1000, d.mat4x4f());
+}
+
+function invertMat(matrix: d.m4x4f) {
+  return m.mat4.invert(matrix, d.mat4x4f());
+}

apps/typegpu-docs/src/examples/rendering/xor-dev-runner/index.ts

@@ -12,10 +12,14 @@
  * ```
  */
 
-import tgpu, { d } from 'typegpu';
+import tgpu, { d, std } from 'typegpu';
 // deno-fmt-ignore: just a list of standard functions
-import { abs, add, cos, max, min, mul, normalize, select, sign, sin, sub, tanh } from 'typegpu/std';
+import { abs, add, cos, max, min, mul, select, sign, sin, sub, tanh } from 'typegpu/std';
 import { defineControls } from '../../common/defineControls.ts';
+import {
+  Camera,
+  setupFirstPersonCamera,
+} from '../../common/setup-first-person-camera.ts';
 
 // NOTE: Some APIs are still unstable (are being finalized based on feedback), but
 //       we can still access them if we know what we're doing.
@@ -52,39 +56,61 @@ const rotateXZ = tgpu.fn([d.f32], d.mat3x3f)((angle) =>
   )
 );
 
+export const Ray = d.struct({
+  origin: d.vec4f,
+  direction: d.vec4f,
+});
+
+/**
+ * Returns a ray direction and ray origin for given uv,
+ * in accordance to camera.
+ */
+const getRayForUV = (uv: d.v2f) => {
+  'use gpu';
+  const camera = cameraUniform.$;
+  const farView = camera.projectionInverse.mul(d.vec4f(uv, 1, 1));
+  const farWorld = camera.viewInverse.mul(
+    d.vec4f(farView.xyz.div(farView.w), 1),
+  );
+  const direction = std.normalize(farWorld.xyz.sub(camera.pos.xyz));
+  return Ray({ origin: camera.pos, direction: d.vec4f(direction, 0) });
+};
+
 // Roots are your GPU handle, and can be used to allocate memory, dispatch
 // shaders, etc.
 const root = await tgpu.init();
 
 // Uniforms are used to send read-only data to the GPU
-const time = root.createUniform(d.f32);
-const scale = root.createUniform(d.f32);
-const color = root.createUniform(d.vec3f);
-const shift = root.createUniform(d.f32);
-const aspectRatio = root.createUniform(d.f32);
+const autoMoveOffsetUniform = root.createUniform(d.vec3f);
+const controlsOffsetUniform = root.createUniform(d.f32);
+const colorUniform = root.createUniform(d.vec3f);
+const shiftUniform = root.createUniform(d.f32);
 
 const fragmentMain = tgpu['~unstable'].fragmentFn({
   in: { uv: d.vec2f },
   out: d.vec4f,
 })(({ uv }) => {
   // Increasing the color intensity
-  const icolor = mul(color.$, 4);
-  const ratio = d.vec2f(aspectRatio.$, 1);
-  const dir = normalize(d.vec3f(mul(uv, ratio), -1));
+  const icolor = mul(colorUniform.$, 4);
+
+  // Calculate ray direction based on UV and camera orientation
+  const ray = getRayForUV(uv);
 
   let acc = d.vec3f();
   let z = d.f32(0);
   for (let l = 0; l < 30; l++) {
-    const p = sub(mul(z, dir), scale.$);
-    p.x -= time.$ + 3;
-    p.z -= time.$ + 3;
+    const p = d.vec3f(3, 0, 3)
+      .add(controlsOffsetUniform.$)
+      .add(autoMoveOffsetUniform.$)
+      .add(ray.origin.xyz)
+      .add(mul(ray.direction.xyz, z));
     let q = d.vec3f(p);
     let prox = p.y;
     for (let i = 40.1; i > 0.01; i *= 0.2) {
       q = sub(i * 0.9, abs(sub(mod(q, i + i), i)));
       const minQ = min(min(q.x, q.y), q.z);
       prox = max(prox, minQ);
-      q = mul(q, rotateXZ(shift.$));
+      q = mul(q, rotateXZ(shiftUniform.$));
     }
     z += prox;
     acc = add(acc, mul(sub(icolor, safeTanh(p.y + 4)), 0.1 * prox / (1 + z)));
@@ -115,21 +141,33 @@ const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
 const canvas = document.querySelector('canvas') as HTMLCanvasElement;
 const context = root.configureContext({ canvas, alphaMode: 'premultiplied' });
 
+const cameraUniform = root.createUniform(Camera);
+const { cleanupCamera, updatePosition } = setupFirstPersonCamera(canvas, {
+  speed: d.vec3f(0.001, 0.1, 1),
+}, (props) => {
+  cameraUniform.writePartial(props);
+});
+
 const pipeline = root['~unstable'].createRenderPipeline({
   vertex: vertexMain,
   fragment: fragmentMain,
   targets: { format: presentationFormat },
 });
 
 let isRunning = true;
+let autoMove = true;
+let autoMoveOffset = d.vec3f();
 
-function draw(timestamp: number) {
+function draw() {
   if (!isRunning) {
     return;
   }
 
-  aspectRatio.write(canvas.clientWidth / canvas.clientHeight);
-  time.write((timestamp * 0.001) % 1000);
+  if (autoMove && !document.pointerLockElement) {
+    autoMoveOffset = autoMoveOffset.add(d.vec3f(0.01, 0, 0.01));
+    autoMoveOffsetUniform.write(autoMoveOffset);
+  }
+  updatePosition();
 
   pipeline
     .withColorAttachment({
@@ -147,13 +185,19 @@ requestAnimationFrame(draw);
 // #region Example controls and cleanup
 
 export const controls = defineControls({
-  scale: {
+  'auto move': {
+    initial: autoMove,
+    onToggleChange(newValue) {
+      autoMove = newValue;
+    },
+  },
+  offset: {
     initial: 2,
-    min: -15,
-    max: 100,
+    min: -100,
+    max: 15,
     step: 0.01,
     onSliderChange(v) {
-      scale.write(v);
+      controlsOffsetUniform.write(v);
     },
   },
   'pattern shift': {
@@ -162,19 +206,20 @@ export const controls = defineControls({
     max: 200,
     step: 0.001,
     onSliderChange(v) {
-      shift.write(v / 180 * Math.PI);
+      shiftUniform.write(v / 180 * Math.PI);
     },
   },
   color: {
     initial: d.vec3f(1, 0.7, 0),
     onColorChange(value) {
-      color.write(value);
+      colorUniform.write(value);
     },
   },
 });
 
 export function onCleanup() {
   isRunning = false;
+  cleanupCamera();
   root.destroy();
 }