feat: fish initial configuration

apps/typegpu-docs/src/content/examples/rendering/3d-fish/compute.ts

@@ -27,17 +27,17 @@ export const computeShader = tgpu['~unstable']
 
       const other = layout.$.currentFishData[i];
       const dist = std.length(std.sub(fishData.position, other.position));
-      if (dist < p.fishSeparationDistance) {
+      if (dist < layout.$.fishBehavior.separationDist) {
         separation = std.add(
           separation,
           std.sub(fishData.position, other.position),
         );
       }
-      if (dist < p.fishAlignmentDistance) {
+      if (dist < layout.$.fishBehavior.alignmentDist) {
         alignment = std.add(alignment, other.direction);
         alignmentCount = alignmentCount + 1;
       }
-      if (dist < p.fishCohesionDistance) {
+      if (dist < layout.$.fishBehavior.cohesionDist) {
         cohesion = std.add(cohesion, other.position);
         cohesionCount = cohesionCount + 1;
       }
@@ -83,15 +83,15 @@ export const computeShader = tgpu['~unstable']
 
     fishData.direction = std.add(
       fishData.direction,
-      std.mul(p.fishSeparationStrength, separation),
+      std.mul(layout.$.fishBehavior.separationStr, separation),
     );
     fishData.direction = std.add(
       fishData.direction,
-      std.mul(p.fishAlignmentStrength, alignment),
+      std.mul(layout.$.fishBehavior.alignmentStr, alignment),
     );
     fishData.direction = std.add(
       fishData.direction,
-      std.mul(p.fishCohesionStrength, cohesion),
+      std.mul(layout.$.fishBehavior.cohesionStr, cohesion),
     );
     fishData.direction = std.add(
       fishData.direction,

apps/typegpu-docs/src/content/examples/rendering/3d-fish/index.html

@@ -21,19 +21,31 @@
     z-index: 1;
     background-color: rgba(0, 0, 0, 0.7);
     color: white;
-    padding: 10px;
-    border-radius: 10px;
+    padding: 0.625rem;
+    border-radius: 0.625rem;
     user-select: none;
     pointer-events: none;
     transition: opacity 0.5s;
   }
+
+  .spinner-background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: var(--color-gray-100);
+    z-index: 4;
+  }
 </style>
+
+<div id="spinner-background" class="spinner-background">
+  <div id="spinner" class="spinner"></div>
+</div>
 <div id="help">
   <h3 class="controls-header">Controls (click to dismiss)</h3>
   <p class="controls"><b>Left Mouse Button:</b> Look around</p>
-  <p class="controls">
-    <b>Right Mouse Button:</b> Repel fish from the cursor
-  </p>
+  <p class="controls"><b>Right Mouse Button:</b> Repel fish from the cursor</p>
   <p id="attribution">
     Uses "Animated Low Poly Fish" by Sketchfab user Atlas, used under CC BY 4.0
     / Modified from original

apps/typegpu-docs/src/content/examples/rendering/3d-fish/index.ts

@@ -9,6 +9,7 @@ import { fragmentShader, vertexShader } from './render.ts';
 import {
   Camera,
   computeBindGroupLayout,
+  FishBehaviorParams,
   Line3,
   type ModelData,
   ModelDataArray,
@@ -19,6 +20,7 @@ import {
 } from './schemas.ts';
 
 // setup
+let speedMultiplier = 1;
 
 const canvas = document.querySelector('canvas') as HTMLCanvasElement;
 const context = canvas.getContext('webgpu') as GPUCanvasContext;
@@ -33,6 +35,32 @@ context.configure({
 
 // models and textures
 
+const presets = {
+  default: {
+    separationDist: 0.3,
+    separationStr: 0.0006,
+    alignmentDist: 0.3,
+    alignmentStr: 0.005,
+    cohesionDist: 0.5,
+    cohesionStr: 0.0004,
+  },
+  init: {
+    separationDist: 0.2,
+    separationStr: 0.1,
+    alignmentDist: 0.5,
+    alignmentStr: 1,
+    cohesionDist: 0.3,
+    cohesionStr: 0.013,
+  },
+} as const;
+
+const currentPreset: keyof typeof presets = 'init';
+
+const spinner = document.getElementById('spinner') as HTMLDivElement;
+const spinnerBackground = document.getElementById(
+  'spinner-background',
+) as HTMLDivElement;
+
 // https://sketchfab.com/3d-models/animated-low-poly-fish-64adc2e5a4be471e8279532b9610c878
 const fishModel = await loadModel(
   root,
@@ -54,7 +82,21 @@ const fishDataBuffers = Array.from({ length: 2 }, (_, idx) =>
   root
     .createBuffer(ModelDataArray(p.fishAmount))
     .$usage('storage', 'vertex')
-    .$name(`fish data buffer ${idx}`));
+    .$name(`fish data ${idx}`));
+
+function enqueuePresetChanges() {
+  speedMultiplier = 3;
+
+  spinnerBackground.style.display = 'block';
+
+  fishBehaviorBuffer.write(presets.init);
+
+  setTimeout(() => {
+    fishBehaviorBuffer.write(presets.default);
+    spinnerBackground.style.display = 'none';
+    speedMultiplier = 1;
+  }, 300);
+}
 
 const randomizeFishPositions = () => {
   const positions: d.Infer<typeof ModelData>[] = Array.from(
@@ -79,8 +121,8 @@ const randomizeFishPositions = () => {
   );
   fishDataBuffers[0].write(positions);
   fishDataBuffers[1].write(positions);
+  enqueuePresetChanges();
 };
-randomizeFishPositions();
 
 const camera = {
   position: p.cameraInitialPosition,
@@ -103,25 +145,30 @@ const camera = {
 const cameraBuffer = root
   .createBuffer(Camera, camera)
   .$usage('uniform')
-  .$name('camera buffer');
+  .$name('camera');
 
 const mouseRayBuffer = root
   .createBuffer(MouseRay, {
     activated: 0,
     line: Line3({ origin: d.vec3f(), dir: d.vec3f() }),
   })
   .$usage('uniform')
-  .$name('mouse buffer');
+  .$name('mouse');
 
 const timePassedBuffer = root
   .createBuffer(d.f32)
   .$usage('uniform')
-  .$name('time passed buffer');
+  .$name('time passed');
 
 const currentTimeBuffer = root
   .createBuffer(d.f32)
   .$usage('uniform')
-  .$name('current time buffer');
+  .$name('current time');
+
+const fishBehaviorBuffer = root
+  .createBuffer(FishBehaviorParams, presets.default)
+  .$usage('uniform')
+  .$name('fish behavior');
 
 const oceanFloorDataBuffer = root
   .createBuffer(ModelDataArray(1), [
@@ -136,7 +183,9 @@ const oceanFloorDataBuffer = root
     },
   ])
   .$usage('storage', 'vertex')
-  .$name('ocean floor buffer');
+  .$name('ocean floor');
+
+randomizeFishPositions();
 
 // pipelines
 
@@ -150,7 +199,7 @@ const renderPipeline = root['~unstable']
   })
   .withPrimitive({ topology: 'triangle-list' })
   .createPipeline()
-  .$name('render pipeline');
+  .$name('render');
 
 let depthTexture = root.device.createTexture({
   size: [canvas.width, canvas.height, 1],
@@ -161,7 +210,7 @@ let depthTexture = root.device.createTexture({
 const computePipeline = root['~unstable']
   .withCompute(computeShader)
   .createPipeline()
-  .$name('compute pipeline');
+  .$name('compute');
 
 // bind groups
 
@@ -196,6 +245,7 @@ const computeBindGroups = [0, 1].map((idx) =>
     nextFishData: fishDataBuffers[1 - idx],
     mouseRay: mouseRayBuffer,
     timePassed: timePassedBuffer,
+    fishBehavior: fishBehaviorBuffer,
   })
 );
 
@@ -212,7 +262,7 @@ function frame(timestamp: DOMHighResTimeStamp) {
   odd = !odd;
 
   currentTimeBuffer.write(timestamp);
-  timePassedBuffer.write(timestamp - lastTimestamp);
+  timePassedBuffer.write((timestamp - lastTimestamp) * speedMultiplier);
   lastTimestamp = timestamp;
   cameraBuffer.write(camera);
 
@@ -270,6 +320,7 @@ function frame(timestamp: DOMHighResTimeStamp) {
 
   requestAnimationFrame(frame);
 }
+enqueuePresetChanges();
 requestAnimationFrame(frame);
 
 // #region Example controls and cleanup

apps/typegpu-docs/src/content/examples/rendering/3d-fish/params.ts

@@ -6,12 +6,6 @@ export const workGroupSize = 256;
 export const fishAmount = 1024 * 8;
 export const fishModelScale = 0.07;
 
-export const fishSeparationDistance = 0.3;
-export const fishSeparationStrength = 0.0006;
-export const fishAlignmentDistance = 0.3;
-export const fishAlignmentStrength = 0.005;
-export const fishCohesionDistance = 0.5;
-export const fishCohesionStrength = 0.0004;
 export const fishWallRepulsionDistance = 0.1;
 export const fishWallRepulsionStrength = 0.0001;
 export const fishMouseRayRepulsionDistance = 0.9;

apps/typegpu-docs/src/content/examples/rendering/3d-fish/schemas.ts

@@ -60,15 +60,26 @@ export const MouseRay = d
   })
   .$name('mouse ray');
 
+export const FishBehaviorParams = d
+  .struct({
+    separationDist: d.f32,
+    separationStr: d.f32,
+    alignmentDist: d.f32,
+    alignmentStr: d.f32,
+    cohesionDist: d.f32,
+    cohesionStr: d.f32,
+  })
+  .$name('fish behavior params');
+
 // layouts
 
 export const modelVertexLayout = tgpu
   .vertexLayout((n: number) => d.arrayOf(d.struct(ModelVertexInput), n))
-  .$name('model vertex layout');
+  .$name('model vertex');
 
 export const renderInstanceLayout = tgpu
   .vertexLayout(ModelDataArray, 'instance')
-  .$name('render instance layout');
+  .$name('render instance');
 
 export const renderBindGroupLayout = tgpu
   .bindGroupLayout({
@@ -78,7 +89,7 @@ export const renderBindGroupLayout = tgpu
     sampler: { sampler: 'filtering' },
     currentTime: { uniform: d.f32 },
   })
-  .$name('render bind group layout');
+  .$name('render bind group');
 
 export const computeBindGroupLayout = tgpu
   .bindGroupLayout({
@@ -89,5 +100,6 @@ export const computeBindGroupLayout = tgpu
     },
     mouseRay: { uniform: MouseRay },
     timePassed: { uniform: d.f32 },
+    fishBehavior: { uniform: FishBehaviorParams },
   })
-  .$name('compute bind group layout');
+  .$name('compute bind group');

apps/typegpu-docs/src/layouts/PageLayout.astro

@@ -1,6 +1,7 @@
 ---
 import '../fonts/font-face.css';
 import '../tailwind.css';
+import './loadingSpinner.css';
 const { title, theme = 'light' } = Astro.props;
 ---
 

apps/typegpu-docs/src/layouts/loadingSpinner.css

@@ -0,0 +1,68 @@
+@property --p {
+  syntax: '<number>';
+  initial-value: 0;
+  inherits: true;
+}
+
+@property --q {
+  syntax: '<number>';
+  initial-value: 0;
+  inherits: true;
+}
+
+.spinner {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 50%;
+  z-index: 5;
+  display: grid;
+  place-self: center;
+  transform: translate(-50%, -50%) rotate(calc(var(--p) * 1turn));
+  background: conic-gradient(
+    transparent calc(var(--p) * 100%),
+    var(--color-gradient-purple) calc(var(--p) * 100%),
+    var(--color-gradient-blue) calc(var(--q) * 100%),
+    transparent calc(var(--q) * 100%)
+  );
+  --mask-spinner: radial-gradient(
+    closest-side,
+    transparent calc(100% - 0.5rem),
+    #000 calc(100% - 0.5rem + 1px)
+  );
+  -webkit-mask: var(--mask-spinner);
+  mask: var(--mask-spinner);
+  animation:
+    p_anim 2s infinite cubic-bezier(0.32, 0, 0.68, 0),
+    q_anim 2s infinite cubic-bezier(0.32, 1, 0.68, 1);
+}
+
+.spinner::before,
+.spinner::after {
+  border-radius: 50%;
+  place-self: center;
+  transform: rotate(calc(var(--a, var(--p)) * 1turn)) translateY(-1rem);
+}
+
+.spinner::before {
+  background: var(--color-gradient-purple);
+}
+
+.spinner::after {
+  background: var(--color-gradient-blue);
+  --a: var(--q);
+}
+
+@keyframes p_anim {
+  to {
+    --p: 1;
+  }
+}
+
+@keyframes q_anim {
+  to {
+    --q: 1;
+  }
+}