fix: Investigate why some examples work differently (#2088)

Author: aleksanderkatan

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

@@ -62,16 +62,14 @@ export const simulate = (fishIndex: number) => {
     }
   }
 
-  if (layout.$.mouseRay.activated === 1) {
-    const proj = projectPointOnLine(
-      fishData.position,
-      layout.$.mouseRay.line,
-    );
-    const diff = fishData.position.sub(proj);
-    const limit = p.fishMouseRayRepulsionDistance;
-    const str = std.pow(2, std.clamp(limit - std.length(diff), 0, limit)) - 1;
-    rayRepulsion = std.normalize(diff).mul(str);
-  }
+  const proj = projectPointOnLine(
+    fishData.position,
+    layout.$.mouseRay,
+  );
+  const diff = fishData.position.sub(proj);
+  const limit = p.fishMouseRayRepulsionDistance;
+  const str = std.pow(2, std.clamp(limit - std.length(diff), 0, limit)) - 1;
+  rayRepulsion = std.normalize(diff).mul(str);
 
   let direction = d.vec3f(fishData.direction);
 

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

@@ -1,13 +1,9 @@
 <style>
-  .controls-header {
+  .attribution-header {
     font-size: 1.1rem;
     margin-bottom: 0.5rem;
   }
 
-  .controls {
-    font-size: 0.8rem;
-  }
-
   #attribution {
     margin-top: 1rem;
     font-size: 0.8rem;
@@ -42,12 +38,10 @@
   <div class="spinner">Loading...</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>
+  <h3 class="attribution-header">Attribution (click to dismiss)</h3>
   <p id="attribution">
-    Uses "Animated Low Poly Fish" by Sketchfab user Atlas, used under CC BY 4.0
-    / Modified from original
+    Uses "Animated Low Poly Fish" by Sketchfab user Atlas, <br>used under CC BY
+    4.0 / Modified from original
   </p>
 </div>
 <canvas data-fit-to-container></canvas>

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

@@ -15,7 +15,6 @@ import {
   ModelData,
   ModelDataArray,
   modelVertexLayout,
-  MouseRay,
   renderBindGroupLayout,
   renderInstanceLayout,
 } from './schemas.ts';
@@ -41,9 +40,9 @@ const presets = {
     separationDist: 0.3,
     separationStr: 0.0006,
     alignmentDist: 0.3,
-    alignmentStr: 0.005,
+    alignmentStr: 0.01,
     cohesionDist: 0.5,
-    cohesionStr: 0.0004,
+    cohesionStr: 0.0013,
   },
   init: {
     separationDist: 0.2,
@@ -148,16 +147,8 @@ const camera = {
 };
 
 const cameraBuffer = root.createBuffer(Camera, camera).$usage('uniform');
-
-const mouseRayBuffer = root
-  .createBuffer(MouseRay, {
-    activated: 0,
-    line: Line3({ origin: d.vec3f(), dir: d.vec3f() }),
-  })
-  .$usage('uniform');
-
+const mouseRayBuffer = root.createBuffer(Line3).$usage('uniform');
 const timePassedBuffer = root.createBuffer(d.f32).$usage('uniform');
-
 const currentTimeBuffer = root.createBuffer(d.f32).$usage('uniform');
 
 const fishBehaviorBuffer = root
@@ -321,10 +312,9 @@ export const controls = {
 
 // Variables for interaction
 
-let isLeftPressed = false;
+let isPressed = false;
 let previousMouseX = 0;
 let previousMouseY = 0;
-let isRightPressed = false;
 
 let isPopupDiscarded = false;
 const controlsPopup = document.getElementById('help') as HTMLDivElement;
@@ -383,20 +373,12 @@ async function updateMouseRay(cx: number, cy: number) {
     worldPos.z / worldPos.w,
   );
 
-  mouseRayBuffer.write({
-    activated: 1,
-    line: Line3({
-      origin: camera.position.xyz,
-      dir: std.normalize(std.sub(worldPosNonUniform, camera.position.xyz)),
-    }),
-  });
+  mouseRayBuffer.write(Line3({
+    origin: camera.position.xyz,
+    dir: std.normalize(std.sub(worldPosNonUniform, camera.position.xyz)),
+  }));
 }
 
-// Prevent the context menu from appearing on right click.
-canvas.addEventListener('contextmenu', (event) => {
-  event.preventDefault();
-});
-
 // Mouse controls
 
 canvas.addEventListener('mousedown', async (event) => {
@@ -406,23 +388,14 @@ canvas.addEventListener('mousedown', async (event) => {
   isPopupDiscarded = true;
 
   if (event.button === 0) {
-    isLeftPressed = true;
-  }
-  if (event.button === 2) {
-    isRightPressed = true;
-    updateMouseRay(event.clientX, event.clientY);
+    isPressed = true;
   }
+  updateMouseRay(event.clientX, event.clientY);
 });
 
 const mouseUpEventListener = (event: MouseEvent) => {
   if (event.button === 0) {
-    isLeftPressed = false;
-  }
-  if (event.button === 2) {
-    isRightPressed = false;
-    mouseRayBuffer.writePartial({
-      activated: 0,
-    });
+    isPressed = false;
   }
 };
 window.addEventListener('mouseup', mouseUpEventListener);
@@ -439,13 +412,11 @@ const mouseMoveEventListener = (event: MouseEvent) => {
   previousMouseX = event.clientX;
   previousMouseY = event.clientY;
 
-  if (isLeftPressed) {
+  if (isPressed) {
     updateCameraTarget(dx, dy);
   }
 
-  if (isRightPressed) {
-    updateMouseRay(event.clientX, event.clientY);
-  }
+  updateMouseRay(event.clientX, event.clientY);
 };
 window.addEventListener('mousemove', mouseMoveEventListener);
 
@@ -458,9 +429,9 @@ canvas.addEventListener(
     if (event.touches.length === 1) {
       previousMouseX = event.touches[0].clientX;
       previousMouseY = event.touches[0].clientY;
-      updateMouseRay(event.touches[0].clientX, event.touches[0].clientY);
-      controlsPopup.style.opacity = '0';
     }
+    updateMouseRay(event.touches[0].clientX, event.touches[0].clientY);
+    controlsPopup.style.opacity = '0';
   },
   { passive: false },
 );
@@ -473,18 +444,11 @@ const touchMoveEventListener = (event: TouchEvent) => {
     previousMouseY = event.touches[0].clientY;
 
     updateCameraTarget(dx, dy);
-    updateMouseRay(event.touches[0].clientX, event.touches[0].clientY);
   }
+  updateMouseRay(event.touches[0].clientX, event.touches[0].clientY);
 };
 window.addEventListener('touchmove', touchMoveEventListener);
 
-const touchEndEventListener = () => {
-  mouseRayBuffer.writePartial({
-    activated: 0,
-  });
-};
-window.addEventListener('touchend', touchEndEventListener);
-
 // observer and cleanup
 
 const resizeObserver = new ResizeObserver(() => {
@@ -510,7 +474,6 @@ export function onCleanup() {
   window.removeEventListener('mouseup', mouseUpEventListener);
   window.removeEventListener('mousemove', mouseMoveEventListener);
   window.removeEventListener('touchmove', touchMoveEventListener);
-  window.removeEventListener('touchend', touchEndEventListener);
   resizeObserver.disconnect();
   root.destroy();
 }

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

@@ -6,8 +6,8 @@ export const fishModelScale = 0.07;
 
 export const fishWallRepulsionDistance = 0.1;
 export const fishWallRepulsionStrength = 0.0001;
-export const fishMouseRayRepulsionDistance = 0.9;
-export const fishMouseRayRepulsionStrength = 0.0005;
+export const fishMouseRayRepulsionDistance = 1.2;
+export const fishMouseRayRepulsionStrength = 0.0015;
 
 export const aquariumSize = d.vec3f(10, 4, 10);
 

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

@@ -50,11 +50,6 @@ export const ModelVertexOutput = {
   applySeaDesaturation: d.interpolate('flat', d.u32), // bool
 } as const;
 
-export const MouseRay = d.struct({
-  activated: d.u32,
-  line: Line3,
-});
-
 export const FishBehaviorParams = d.struct({
   separationDist: d.f32,
   separationStr: d.f32,
@@ -89,7 +84,7 @@ export const computeBindGroupLayout = tgpu.bindGroupLayout({
     storage: ModelDataArray,
     access: 'mutable',
   },
-  mouseRay: { uniform: MouseRay },
+  mouseRay: { uniform: Line3 },
   timePassed: { uniform: d.f32 },
   fishBehavior: { uniform: FishBehaviorParams },
 });

apps/typegpu-docs/src/examples/rendering/function-visualizer/index.ts

@@ -190,10 +190,7 @@ const renderBackgroundPipeline = device.createRenderPipeline({
 });
 
 let msTexture = device.createTexture({
-  size: [
-    canvas.clientWidth * window.devicePixelRatio,
-    canvas.clientHeight * window.devicePixelRatio,
-  ],
+  size: [canvas.width, canvas.height],
   sampleCount: 4,
   format: presentationFormat,
   usage: GPUTextureUsage.RENDER_ATTACHMENT,
@@ -547,10 +544,7 @@ const resizeObserver = new ResizeObserver(() => {
 
   msTexture.destroy();
   msTexture = device.createTexture({
-    size: [
-      canvas.clientWidth * window.devicePixelRatio,
-      canvas.clientHeight * window.devicePixelRatio,
-    ],
+    size: [canvas.width, canvas.height],
     sampleCount: 4,
     format: presentationFormat,
     usage: GPUTextureUsage.RENDER_ATTACHMENT,

packages/typegpu/tests/examples/individual/3d-fish.test.ts

@@ -115,19 +115,14 @@ describe('3d fish example', () => {
         dir: vec3f,
       }
 
-      struct MouseRay {
-        activated: u32,
-        line: Line3,
-      }
-
-      @group(1) @binding(2) var<uniform> mouseRay: MouseRay;
-
       fn projectPointOnLine(point: vec3f, line: Line3) -> vec3f {
         var pointVector = (point - line.origin);
         let projection = dot(pointVector, line.dir);
         return (line.origin + (line.dir * projection));
       }
 
+      @group(1) @binding(2) var<uniform> mouseRay: Line3;
+
       @group(1) @binding(3) var<uniform> timePassed: f32;
 
       @group(1) @binding(1) var<storage, read_write> nextFishData: array<ModelData>;
@@ -172,27 +167,25 @@ describe('3d fish example', () => {
           let axisPosition = (*fishData).position[i];
           const distance = 0.1;
           if ((axisPosition > (axisAquariumSize - distance))) {
-            let str = (axisPosition - (axisAquariumSize - distance));
-            wallRepulsion = (wallRepulsion - (repulsion * str));
+            let str2 = (axisPosition - (axisAquariumSize - distance));
+            wallRepulsion = (wallRepulsion - (repulsion * str2));
           }
           if ((axisPosition < (-(axisAquariumSize) + distance))) {
-            let str = ((-(axisAquariumSize) + distance) - axisPosition);
-            wallRepulsion = (wallRepulsion + (repulsion * str));
+            let str2 = ((-(axisAquariumSize) + distance) - axisPosition);
+            wallRepulsion = (wallRepulsion + (repulsion * str2));
           }
         }
-        if ((mouseRay.activated == 1u)) {
-          var proj = projectPointOnLine((*fishData).position, mouseRay.line);
-          var diff = ((*fishData).position - proj);
-          const limit = 0.9;
-          let str = (pow(2f, clamp((limit - length(diff)), 0f, limit)) - 1f);
-          rayRepulsion = (normalize(diff) * str);
-        }
+        var proj = projectPointOnLine((*fishData).position, mouseRay);
+        var diff = ((*fishData).position - proj);
+        const limit = 1.2;
+        let str = (pow(2f, clamp((limit - length(diff)), 0f, limit)) - 1f);
+        rayRepulsion = (normalize(diff) * str);
         var direction = (*fishData).direction;
         direction = (direction + (separation * fishBehavior.separationStr));
         direction = (direction + (alignment * fishBehavior.alignmentStr));
         direction = (direction + (cohesion * fishBehavior.cohesionStr));
         direction = (direction + (wallRepulsion * 1e-4));
-        direction = (direction + (rayRepulsion * 5e-4));
+        direction = (direction + (rayRepulsion * 0.0015));
         direction = (normalize(direction) * clamp(length((*fishData).direction), 0f, 0.01f));
         var translation = (direction * (min(999f, timePassed) / 8f));
         let nextFishData_1 = (&nextFishData[fishIndex]);