docs: Jelly slider

apps/typegpu-docs/src/examples/rendering/jelly-slider/camera.ts

@@ -0,0 +1,147 @@
+import type { TgpuRoot, TgpuUniform } from 'typegpu';
+import * as d from 'typegpu/data';
+import * as m from 'wgpu-matrix';
+
+const Camera = d.struct({
+  view: d.mat4x4f,
+  proj: d.mat4x4f,
+  viewInv: d.mat4x4f,
+  projInv: d.mat4x4f,
+});
+
+function halton(index: number, base: number) {
+  let result = 0;
+  let f = 1 / base;
+  let i = index;
+  while (i > 0) {
+    result += f * (i % base);
+    i = Math.floor(i / base);
+    f = f / base;
+  }
+  return result;
+}
+
+function* haltonSequence(base: number) {
+  let index = 1;
+  while (true) {
+    yield halton(index, base);
+    index++;
+  }
+}
+
+export class CameraController {
+  #uniform: TgpuUniform<typeof Camera>;
+  #view: d.m4x4f;
+  #proj: d.m4x4f;
+  #viewInv: d.m4x4f;
+  #projInv: d.m4x4f;
+  #baseProj: d.m4x4f;
+  #baseProjInv: d.m4x4f;
+  #haltonX: Generator<number>;
+  #haltonY: Generator<number>;
+  #width: number;
+  #height: number;
+
+  constructor(
+    root: TgpuRoot,
+    position: d.v3f,
+    target: d.v3f,
+    up: d.v3f,
+    fov: number,
+    width: number,
+    height: number,
+    near = 0.1,
+    far = 10,
+  ) {
+    this.#width = width;
+    this.#height = height;
+
+    this.#view = m.mat4.lookAt(position, target, up, d.mat4x4f());
+    this.#baseProj = m.mat4.perspective(
+      fov,
+      width / height,
+      near,
+      far,
+      d.mat4x4f(),
+    );
+    this.#proj = this.#baseProj;
+
+    this.#viewInv = m.mat4.invert(this.#view, d.mat4x4f());
+    this.#baseProjInv = m.mat4.invert(this.#baseProj, d.mat4x4f());
+    this.#projInv = this.#baseProjInv;
+
+    this.#uniform = root.createUniform(Camera, {
+      view: this.#view,
+      proj: this.#proj,
+      viewInv: this.#viewInv,
+      projInv: this.#projInv,
+    });
+
+    this.#haltonX = haltonSequence(2);
+    this.#haltonY = haltonSequence(3);
+  }
+
+  jitter() {
+    const [jx, jy] = [
+      this.#haltonX.next().value,
+      this.#haltonY.next().value,
+    ] as [
+      number,
+      number,
+    ];
+
+    const jitterX = ((jx - 0.5) * 2.0) / this.#width;
+    const jitterY = ((jy - 0.5) * 2.0) / this.#height;
+
+    const jitterMatrix = m.mat4.identity(d.mat4x4f());
+    jitterMatrix[12] = jitterX; // x translation in NDC
+    jitterMatrix[13] = jitterY; // y translation in NDC
+
+    const jitteredProj = m.mat4.mul(jitterMatrix, this.#baseProj, d.mat4x4f());
+    const jitteredProjInv = m.mat4.invert(jitteredProj, d.mat4x4f());
+
+    this.#uniform.writePartial({
+      proj: jitteredProj,
+      projInv: jitteredProjInv,
+    });
+  }
+
+  updateView(position: d.v3f, target: d.v3f, up: d.v3f) {
+    this.#view = m.mat4.lookAt(position, target, up, d.mat4x4f());
+    this.#viewInv = m.mat4.invert(this.#view, d.mat4x4f());
+
+    this.#uniform.writePartial({
+      view: this.#view,
+      viewInv: this.#viewInv,
+    });
+  }
+
+  updateProjection(
+    fov: number,
+    width: number,
+    height: number,
+    near = 0.1,
+    far = 100,
+  ) {
+    this.#width = width;
+    this.#height = height;
+
+    this.#baseProj = m.mat4.perspective(
+      fov,
+      width / height,
+      near,
+      far,
+      d.mat4x4f(),
+    );
+    this.#baseProjInv = m.mat4.invert(this.#baseProj, d.mat4x4f());
+
+    this.#uniform.writePartial({
+      proj: this.#baseProj,
+      projInv: this.#baseProjInv,
+    });
+  }
+
+  get cameraUniform() {
+    return this.#uniform;
+  }
+}

apps/typegpu-docs/src/examples/rendering/jelly-slider/constants.ts

@@ -0,0 +1,39 @@
+import * as d from 'typegpu/data';
+
+// Rendering constants
+export const MAX_STEPS = 64;
+export const MAX_DIST = 10;
+export const SURF_DIST = 0.001;
+
+// Lighting constants
+export const AMBIENT_COLOR = d.vec3f(1);
+export const AMBIENT_INTENSITY = 0.2;
+export const SPECULAR_POWER = 32.0;
+export const SPECULAR_INTENSITY = 0.4;
+
+// Jelly material constants
+export const JELLY_IOR = 1.42;
+export const JELLY_ABSORB = d.vec3f(1.6, 3.2, 6.0).mul(5);
+export const JELLY_SCATTER_TINT = d.vec3f(1.0, 0.3, 0.05).mul(1.5);
+export const JELLY_SCATTER_STRENGTH = 1.3;
+export const MAX_INTERNAL_STEPS = 7;
+
+// Ambient occlusion constants
+export const AO_STEPS = 3;
+export const AO_RADIUS = 0.2;
+export const AO_INTENSITY = 0.8;
+export const AO_BIAS = SURF_DIST * 5;
+
+// Line/slider constants
+export const LINE_RADIUS = 0.024;
+export const LINE_HALF_THICK = 0.17;
+
+// Mouse interaction constants
+export const MOUSE_SMOOTHING = 0.08;
+export const MOUSE_MIN_X = 0.45;
+export const MOUSE_MAX_X = 0.9;
+export const MOUSE_RANGE_MIN = 0.4;
+export const MOUSE_RANGE_MAX = 0.9;
+export const TARGET_MIN = -0.7;
+export const TARGET_MAX = 1.0;
+export const TARGET_OFFSET = -0.5;

apps/typegpu-docs/src/examples/rendering/jelly-slider/dataTypes.ts

@@ -0,0 +1,72 @@
+import tgpu from 'typegpu';
+import * as d from 'typegpu/data';
+
+export const DirectionalLight = d.struct({
+  direction: d.vec3f,
+  color: d.vec3f,
+});
+
+export const ObjectType = {
+  SLIDER: 1,
+  BACKGROUND: 2,
+} as const;
+
+export const HitInfo = d.struct({
+  distance: d.f32,
+  objectType: d.i32,
+  t: d.f32,
+});
+
+export const LineInfo = d.struct({
+  t: d.f32,
+  distance: d.f32,
+  normal: d.vec2f,
+});
+
+export const BoxIntersection = d.struct({
+  hit: d.bool,
+  tMin: d.f32,
+  tMax: d.f32,
+});
+
+export const Ray = d.struct({
+  origin: d.vec3f,
+  direction: d.vec3f,
+});
+
+export const SdfBbox = d.struct({
+  left: d.f32,
+  right: d.f32,
+  bottom: d.f32,
+  top: d.f32,
+});
+
+export const backgroundDistLayout = tgpu.bindGroupLayout({
+  distanceTexture: {
+    storageTexture: d.textureStorage2d('r32float', 'write-only'),
+  },
+});
+
+export const rayMarchLayout = tgpu.bindGroupLayout({
+  backgroundDistTexture: {
+    storageTexture: d.textureStorage2d('r32float', 'read-only'),
+  },
+});
+
+export const taaResolveLayout = tgpu.bindGroupLayout({
+  currentTexture: {
+    texture: d.texture2d(),
+  },
+  historyTexture: {
+    texture: d.texture2d(),
+  },
+  outputTexture: {
+    storageTexture: d.textureStorage2d('rgba8unorm', 'write-only'),
+  },
+});
+
+export const sampleLayout = tgpu.bindGroupLayout({
+  currentTexture: {
+    texture: d.texture2d(),
+  },
+});

apps/typegpu-docs/src/examples/rendering/jelly-slider/events.ts

@@ -0,0 +1,93 @@
+import {
+  MOUSE_MAX_X,
+  MOUSE_MIN_X,
+  MOUSE_RANGE_MAX,
+  MOUSE_RANGE_MIN,
+  MOUSE_SMOOTHING,
+  TARGET_MAX,
+  TARGET_MIN,
+  TARGET_OFFSET,
+} from './constants.ts';
+
+export class EventHandler {
+  private canvas: HTMLCanvasElement;
+  private mouseX = 1.0;
+  private targetMouseX = 1.0;
+  private isMouseDown = false;
+
+  constructor(canvas: HTMLCanvasElement) {
+    this.canvas = canvas;
+    this.setupEventListeners();
+  }
+
+  private setupEventListeners() {
+    // Mouse events
+    this.canvas.addEventListener('mouseup', () => {
+      this.isMouseDown = false;
+    });
+
+    this.canvas.addEventListener('mouseleave', () => {
+      this.isMouseDown = false;
+    });
+
+    this.canvas.addEventListener('mousedown', (e) => {
+      this.handlePointerDown(e.clientX);
+    });
+
+    this.canvas.addEventListener('mousemove', (e) => {
+      if (!this.isMouseDown) return;
+      this.handlePointerMove(e.clientX);
+    });
+
+    // Touch events
+    this.canvas.addEventListener('touchstart', (e) => {
+      e.preventDefault();
+      const touch = e.touches[0];
+      this.handlePointerDown(touch.clientX);
+    });
+
+    this.canvas.addEventListener('touchmove', (e) => {
+      e.preventDefault();
+      if (!this.isMouseDown) return;
+      const touch = e.touches[0];
+      this.handlePointerMove(touch.clientX);
+    });
+
+    this.canvas.addEventListener('touchend', (e) => {
+      e.preventDefault();
+      this.isMouseDown = false;
+    });
+  }
+
+  private handlePointerDown(clientX: number) {
+    this.isMouseDown = true;
+    this.updateTargetMouseX(clientX);
+  }
+
+  private handlePointerMove(clientX: number) {
+    this.updateTargetMouseX(clientX);
+  }
+
+  private updateTargetMouseX(clientX: number) {
+    const rect = this.canvas.getBoundingClientRect();
+    const normalizedX = (clientX - rect.left) / rect.width;
+    const clampedX = Math.max(MOUSE_MIN_X, Math.min(MOUSE_MAX_X, normalizedX));
+    this.targetMouseX =
+      ((clampedX - MOUSE_RANGE_MIN) / (MOUSE_RANGE_MAX - MOUSE_RANGE_MIN)) *
+        (TARGET_MAX - TARGET_MIN) + TARGET_OFFSET;
+  }
+
+  update() {
+    if (this.isMouseDown) {
+      this.mouseX += (this.targetMouseX - this.mouseX) * MOUSE_SMOOTHING;
+    }
+  }
+
+  get currentMouseX() {
+    return this.mouseX;
+  }
+
+  get isPointerDown() {
+    return this.isMouseDown;
+  }
+}

apps/typegpu-docs/src/examples/rendering/jelly-slider/index.html

@@ -0,0 +1 @@
+<canvas></canvas>