Feat: homepage examples duplication (#2121)

Author: lursz

apps/typegpu-docs/src/components/HoverExampleIsland.tsx

@@ -11,9 +11,12 @@ import type { Example } from '../utils/examples/types.ts';
 
 type Props = {
   exampleKey: string;
+  examplesConfig: Record<string, { html: string; tsPath: string }>;
 };
 
-export default function HoverExampleIsland({ exampleKey }: Props) {
+export default function HoverExampleIsland(
+  { exampleKey, examplesConfig }: Props,
+) {
   const rootRef = useRef<HTMLDivElement | null>(null);
   const containerRef = useRef<HTMLDivElement | null>(null);
   const cleanupRef = useRef<(() => void) | undefined>(undefined);
@@ -119,7 +122,7 @@ export default function HoverExampleIsland({ exampleKey }: Props) {
           throw new Error('WebGPU is not enabled/supported in this browser.');
         }
 
-        const example = await loadExample(exampleKey);
+        const example = await loadExample(exampleKey, examplesConfig);
         if (cancelled) {
           return;
         }
@@ -159,7 +162,7 @@ export default function HoverExampleIsland({ exampleKey }: Props) {
       cancelled = true;
       reset();
     };
-  }, [exampleKey, isHovered, reset]);
+  }, [exampleKey, isHovered, reset, examplesConfig]);
 
   return (
     <div
@@ -192,16 +195,29 @@ export default function HoverExampleIsland({ exampleKey }: Props) {
   );
 }
 
-async function loadExample(exampleKey: string): Promise<Example> {
-  const exampleContent = await import('../examples/exampleContent.ts');
-  const examples = exampleContent.examples as Record<string, Example>;
-
-  const example = examples[exampleKey] as Example | undefined;
-  if (!example) {
+async function loadExample(
+  exampleKey: string,
+  examplesConfig: Record<string, { html: string; tsPath: string }>,
+): Promise<Example> {
+  const config = examplesConfig[exampleKey];
+  if (!config) {
     throw new Error(`Example "${exampleKey}" not found.`);
   }
 
-  return example;
+  const tsImport = () => import(`${config.tsPath}?t=${Date.now()}`); // trick to prevent caching
+
+  return {
+    key: exampleKey,
+    metadata: { title: exampleKey, category: 'landing', tags: [] },
+    tsFiles: [],
+    tsImport,
+    htmlFile: {
+      exampleKey,
+      path: 'index.html',
+      content: config.html,
+    },
+    thumbnails: { small: '', large: '' },
+  } satisfies Example;
 }
 
 function resizeCanvases(container: HTMLElement) {

apps/typegpu-docs/src/components/TgpuExamples.astro

@@ -9,39 +9,60 @@ import ReflectionGif from "../assets/hero/reflection_bg.jpg";
 import vaporRaveGif from "../assets/hero/rave_bg.webp";
 
 import HoverExampleIsland from "./HoverExampleIsland";
+import fishHtml from "../pages/landing-examples/3d-fish/index.html?raw";
+import causticsHtml from "../pages/landing-examples/caustics/index.html?raw";
+import reflectionHtml from "../pages/landing-examples/cubemap-reflection/index.html?raw";
+import jellyHtml from "../pages/landing-examples/jelly-slider/index.html?raw";
+import rayMarchingHtml from "../pages/landing-examples/ray-marching/index.html?raw";
+import vaporRaveHtml from "../pages/landing-examples/vaporrave/index.html?raw";
+
+const examplesBasePath = "../pages/landing-examples";
 
 const galleryItems = [
 	{
 		asset: ReflectionGif,
 		title: "Reflection",
-		exampleKey: "rendering--cubemap-reflection",
+		exampleKey: "cubemap-reflection",
+		html: reflectionHtml,
 	},
 	{
 		asset: JellySliderGif,
 		title: "Jelly Slider",
-		exampleKey: "rendering--jelly-slider",
+		exampleKey: "jelly-slider",
+		html: jellyHtml,
 	},
 	{
 		asset: vaporRaveGif,
 		title: "VaporRave",
-		exampleKey: "simple--vaporrave",
+		exampleKey: "vaporrave",
+		html: vaporRaveHtml,
 	},
 	{
 		asset: RayMarchingGif,
 		title: "Ray Marching",
-		exampleKey: "rendering--ray-marching",
+		exampleKey: "ray-marching",
+		html: rayMarchingHtml,
 	},
 	{
 		asset: FishGif,
 		title: "3D Fish",
-		exampleKey: "rendering--3d-fish",
+		exampleKey: "3d-fish",
+		html: fishHtml,
 	},
 	{
 		asset: CausticsGif,
 		title: "Caustics",
-		exampleKey: "rendering--caustics",
+		exampleKey: "caustics",
+		html: causticsHtml,
 	},
 ];
+
+const examplesConfig = Object.fromEntries(
+	galleryItems.map(item => [
+		item.exampleKey,
+		{ html: item.html, tsPath: `${examplesBasePath}/${item.exampleKey}/index.ts` },
+	])
+);
 ---
 
 {/* Interactive gallery */}
@@ -86,6 +107,7 @@ const galleryItems = [
 						<HoverExampleIsland
 							client:visible
 							exampleKey={item.exampleKey}
+							examplesConfig={examplesConfig}
 						/>
 					</div>
 				</div>

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

@@ -0,0 +1,103 @@
+import { d, std } from 'typegpu';
+import * as p from './params.ts';
+import { computeBindGroupLayout as layout } from './schemas.ts';
+import { projectPointOnLine } from './tgsl-helpers.ts';
+
+export const simulate = (fishIndex: number) => {
+  'use gpu';
+  const fishData = layout.$.currentFishData[fishIndex];
+  let separation = d.vec3f();
+  let alignment = d.vec3f();
+  let alignmentCount = 0;
+  let cohesion = d.vec3f();
+  let cohesionCount = 0;
+  let wallRepulsion = d.vec3f();
+  let rayRepulsion = d.vec3f();
+
+  for (let i = 0; i < p.fishAmount; i += 1) {
+    if (d.u32(i) === fishIndex) {
+      continue;
+    }
+
+    const other = layout.$.currentFishData[i];
+    const dist = std.length(fishData.position.sub(other.position));
+    if (dist < layout.$.fishBehavior.separationDist) {
+      separation = separation.add(fishData.position.sub(other.position));
+    }
+    if (dist < layout.$.fishBehavior.alignmentDist) {
+      alignment = alignment.add(other.direction);
+      alignmentCount = alignmentCount + 1;
+    }
+    if (dist < layout.$.fishBehavior.cohesionDist) {
+      cohesion = cohesion.add(other.position);
+      cohesionCount = cohesionCount + 1;
+    }
+  }
+  if (alignmentCount > 0) {
+    alignment = alignment.mul(1 / d.f32(alignmentCount));
+  }
+  if (cohesionCount > 0) {
+    cohesion = std.sub(
+      std.mul(1 / d.f32(cohesionCount), cohesion),
+      fishData.position,
+    );
+  }
+  for (let i = 0; i < 3; i += 1) {
+    const repulsion = d.vec3f();
+    repulsion[i] = 1.0;
+
+    const axisAquariumSize = p.aquariumSize[i] / 2;
+    const axisPosition = fishData.position[i];
+    const distance = p.fishWallRepulsionDistance;
+
+    if (axisPosition > axisAquariumSize - distance) {
+      const str = axisPosition - (axisAquariumSize - distance);
+      wallRepulsion = wallRepulsion.sub(repulsion.mul(str));
+    }
+
+    if (axisPosition < -axisAquariumSize + distance) {
+      const str = -axisAquariumSize + distance - axisPosition;
+      wallRepulsion = wallRepulsion.add(repulsion.mul(str));
+    }
+  }
+
+  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);
+  }
+
+  let direction = d.vec3f(fishData.direction);
+
+  direction = direction.add(
+    separation.mul(layout.$.fishBehavior.separationStr),
+  );
+  direction = direction.add(
+    alignment.mul(layout.$.fishBehavior.alignmentStr),
+  );
+  direction = direction.add(
+    cohesion.mul(layout.$.fishBehavior.cohesionStr),
+  );
+  direction = direction.add(
+    wallRepulsion.mul(p.fishWallRepulsionStrength),
+  );
+  direction = direction.add(
+    rayRepulsion.mul(p.fishMouseRayRepulsionStrength),
+  );
+  direction = std.normalize(direction).mul(
+    std.clamp(std.length(fishData.direction), 0, 0.01),
+  );
+
+  const translation = direction.mul(
+    d.f32(std.min(999, layout.$.timePassed)) / 8,
+  );
+
+  const nextFishData = layout.$.nextFishData[fishIndex];
+  nextFishData.position = fishData.position.add(translation);
+  nextFishData.direction = d.vec3f(direction);
+};

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

@@ -0,0 +1,53 @@
+<style>
+  .controls-header {
+    font-size: 1.1rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .controls {
+    font-size: 0.8rem;
+  }
+
+  #attribution {
+    margin-top: 1rem;
+    font-size: 0.8rem;
+  }
+
+  #help {
+    opacity: 0;
+    position: absolute;
+    margin: 0 auto;
+    text-align: left;
+    z-index: 1;
+    background-color: rgba(0, 0, 0, 0.7);
+    color: white;
+    padding: 0.625rem;
+    border-radius: 0.625rem;
+    user-select: none;
+    pointer-events: none;
+    transition: opacity 0.5s;
+  }
+
+  .spinner-background {
+    inset: 0;
+    position: absolute;
+    display: grid;
+    place-items: center;
+    background-color: var(--color-tameplum-50, white);
+    z-index: 4;
+  }
+</style>
+
+<div class="spinner-background">
+  <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>
+  <p id="attribution">
+    Uses "Animated Low Poly Fish" by Sketchfab user Atlas, used under CC BY 4.0
+    / Modified from original
+  </p>
+</div>
+<canvas data-fit-to-container></canvas>