impr: Split the jump flood algorithm example into two and improve the distance painting (#1967)

Author: reczkok

…xamples/algorithms/jump-flood/index.html …lgorithms/jump-flood-distance/index.htmlapps/typegpu-docs/src/examples/algorithms/jump-flood/index.html renamed to apps/typegpu-docs/src/examples/algorithms/jump-flood-distance/index.html apps/typegpu-docs/src/examples/algorithms/jump-flood/index.html renamed to apps/typegpu-docs/src/examples/algorithms/jump-flood-distance/index.html

@@ -0,0 +1,5 @@
+{
+  "title": "Jump Flood (Distance)",
+  "category": "algorithms",
+  "tags": ["experimental", "compute"]
+}

apps/typegpu-docs/src/examples/algorithms/jump-flood-distance/index.ts

@@ -0,0 +1,78 @@
+import tgpu, {
+  type SampledFlag,
+  type StorageFlag,
+  type TgpuTexture,
+} from 'typegpu';
+import * as d from 'typegpu/data';
+
+export const VisualizationParams = d.struct({
+  showInside: d.u32,
+  showOutside: d.u32,
+});
+
+export const BrushParams = d.struct({
+  center: d.vec2f,
+  radius: d.f32,
+  erasing: d.u32,
+});
+
+export const SampleResult = d.struct({
+  inside: d.vec2f,
+  outside: d.vec2f,
+});
+
+export const paramsAccessor = tgpu['~unstable'].accessor(VisualizationParams);
+
+export const distSampleLayout = tgpu.bindGroupLayout({
+  distTexture: { texture: d.texture2d() },
+  sampler: { sampler: 'filtering' },
+});
+
+export const initLayout = tgpu.bindGroupLayout({
+  writeView: {
+    storageTexture: d.textureStorage2d('rgba16float', 'write-only'),
+  },
+});
+
+export const pingPongLayout = tgpu.bindGroupLayout({
+  writeView: {
+    storageTexture: d.textureStorage2d('rgba16float', 'write-only'),
+  },
+  readView: {
+    storageTexture: d.textureStorage2d('rgba16float', 'read-only'),
+  },
+});
+
+export const maskLayout = tgpu.bindGroupLayout({
+  maskTexture: {
+    storageTexture: d.textureStorage2d('r32uint', 'write-only'),
+  },
+});
+
+export const distWriteLayout = tgpu.bindGroupLayout({
+  distTexture: {
+    storageTexture: d.textureStorage2d('rgba16float', 'write-only'),
+  },
+});
+
+export const initFromMaskLayout = tgpu.bindGroupLayout({
+  maskTexture: {
+    storageTexture: d.textureStorage2d('r32uint', 'read-only'),
+  },
+  writeView: {
+    storageTexture: d.textureStorage2d('rgba16float', 'write-only'),
+  },
+});
+
+export type FloodTexture =
+  & TgpuTexture<{ size: [number, number]; format: 'rgba16float' }>
+  & StorageFlag;
+
+export type MaskTexture =
+  & TgpuTexture<{ size: [number, number]; format: 'r32uint' }>
+  & StorageFlag;
+
+export type DistanceTexture =
+  & TgpuTexture<{ size: [number, number]; format: 'rgba16float' }>
+  & SampledFlag
+  & StorageFlag;

apps/typegpu-docs/src/examples/algorithms/jump-flood-distance/meta.json

@@ -0,0 +1,76 @@
+import tgpu from 'typegpu';
+import * as d from 'typegpu/data';
+import * as std from 'typegpu/std';
+import { distSampleLayout, paramsAccessor } from './types.ts';
+
+const outsideGradient = tgpu.const(d.arrayOf(d.vec3f, 5), [
+  d.vec3f(0.05, 0.05, 0.15),
+  d.vec3f(0.2, 0.1, 0.4),
+  d.vec3f(0.6, 0.2, 0.5),
+  d.vec3f(0.95, 0.5, 0.3),
+  d.vec3f(1.0, 0.95, 0.8),
+]);
+
+const insideGradient = tgpu.const(d.arrayOf(d.vec3f, 5), [
+  d.vec3f(0.05, 0.05, 0.15),
+  d.vec3f(0.1, 0.2, 0.3),
+  d.vec3f(0.2, 0.45, 0.55),
+  d.vec3f(0.4, 0.75, 0.7),
+  d.vec3f(0.9, 1.0, 0.95),
+]);
+
+export const distanceFrag = tgpu['~unstable'].fragmentFn({
+  in: { uv: d.vec2f },
+  out: d.vec4f,
+})(({ uv }) => {
+  'use gpu';
+  const size = std.textureDimensions(distSampleLayout.$.distTexture);
+  let dist = std.textureSample(
+    distSampleLayout.$.distTexture,
+    distSampleLayout.$.sampler,
+    uv,
+  ).x;
+
+  if (paramsAccessor.$.showInside === 0 && dist < 0) {
+    dist = 0;
+  }
+  if (paramsAccessor.$.showOutside === 0 && dist > 0) {
+    dist = 0;
+  }
+
+  const unsigned = std.abs(dist);
+
+  const maxDist = d.f32(std.max(size.x, size.y)) * 0.25;
+  const t = std.saturate(unsigned / maxDist);
+
+  const gradientPos = t * 4.0;
+  const idx = d.u32(gradientPos);
+  const frac = std.fract(gradientPos);
+
+  const outsideBase = std.mix(
+    outsideGradient.$[std.min(idx, 4)],
+    outsideGradient.$[std.min(idx + 1, 4)],
+    frac,
+  );
+
+  const insideBase = std.mix(
+    insideGradient.$[std.min(idx, 4)],
+    insideGradient.$[std.min(idx + 1, 4)],
+    frac,
+  );
+
+  let baseColor = d.vec3f(outsideBase);
+  if (dist < 0.0) {
+    baseColor = d.vec3f(insideBase);
+  }
+
+  const contourFreq = maxDist / 12.0;
+  const contour = std.smoothstep(
+    0.0,
+    0.15,
+    std.abs(std.fract(unsigned / contourFreq) - 0.5),
+  );
+
+  const color = baseColor.mul(0.7 + 0.3 * contour);
+  return d.vec4f(color, 1.0);
+});

apps/typegpu-docs/src/examples/algorithms/jump-flood-distance/thumbnail.png

@@ -0,0 +1 @@
+<canvas data-fit-to-container></canvas>