docs: Add a SDF based suika game clone (#2231)

Author: reczkok

apps/typegpu-docs/package.json

@@ -19,6 +19,7 @@
     "@astrojs/starlight-tailwind": "^4.0.1",
     "@astrojs/tailwind": "^6.0.2",
     "@babel/standalone": "^7.28.6",
+    "@dimforge/rapier2d-compat": "^0.19.3",
     "@loaders.gl/core": "^4.3.4",
     "@loaders.gl/obj": "^4.3.4",
     "@monaco-editor/react": "^4.7.0",

apps/typegpu-docs/public/assets/suika-sdf/fruitsTgpu.png

@@ -0,0 +1,32 @@
+import { d } from 'typegpu';
+
+export const LEVEL_RADII = [0.12, 0.16, 0.2, 0.24, 0.28, 0.32, 0.36, 0.4, 0.44, 0.48];
+export const LEVEL_COUNT = LEVEL_RADII.length;
+export const MAX_LEVEL_RADIUS = LEVEL_RADII[LEVEL_COUNT - 1];
+
+export const WALL_DEFS = [
+  { cx: 0, cy: -0.5, hw: 0.5, hh: 0.05 },
+  { cx: 0.5, cy: 0, hw: 0.05, hh: 0.55 },
+  { cx: -0.5, cy: 0, hw: 0.05, hh: 0.55 },
+];
+
+export const SCENE_SCALE = 0.75;
+export const WALL_COLOR = d.vec3f(0.55, 0.5, 0.45);
+export const WALL_ROUNDNESS = 0.035;
+export const MIN_RADIUS = 0.001;
+export const GHOST_ALPHA = 0.45;
+export const SMOOTH_MIN_K = 16.0;
+export const SHARP_FACTOR = 2.4;
+export const SPEED_BLEND_MAX = 0.5;
+
+export const MERGE_SCORES = Array.from({ length: LEVEL_COUNT }, (_, n) => ((n + 1) * (n + 2)) / 2);
+
+export const MAX_FRUITS = 256;
+export const OFFSCREEN = 10;
+export const DROP_Y = 0.65;
+export const SPAWN_WEIGHTS = [4, 3, 2, 1];
+export const SPAWN_WEIGHT_TOTAL = SPAWN_WEIGHTS.reduce((a, b) => a + b, 0);
+export const MERGE_DISTANCE_FACTOR = 0.4;
+export const PLAYFIELD_HALF_WIDTH = 0.5;
+export const SPAWN_COOLDOWN = 0.35;
+export const GAME_ASPECT = 1;

apps/typegpu-docs/src/examples/rendering/suika-sdf/constants.ts

@@ -0,0 +1,57 @@
+<canvas data-fit-to-container></canvas>
+
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap" />
+
+<style>
+  #score {
+    position: absolute;
+    bottom: 1rem;
+    left: 50%;
+    transform: translateX(-50%);
+    font-family: 'Fredoka One', cursive;
+    font-size: 2.4rem;
+    color: white;
+    text-shadow:
+      0 3px 0 rgba(0, 0, 0, 0.35),
+      0 0 12px rgba(255, 220, 100, 0.4);
+    pointer-events: none;
+    z-index: 1;
+  }
+
+  #attribution {
+    opacity: 1;
+    position: absolute;
+    bottom: 0.625rem;
+    left: 0.625rem;
+    z-index: 2;
+    background-color: rgba(0, 0, 0, 0.6);
+    color: white;
+    padding: 0.5rem 0.75rem;
+    border-radius: 0.5rem;
+    user-select: none;
+    pointer-events: auto;
+    transition: opacity 0.5s;
+    font-size: 0.85rem;
+    line-height: 1.5;
+    white-space: nowrap;
+  }
+
+  #attribution a {
+    color: #87ceeb;
+    text-decoration: none;
+  }
+
+  #attribution a:hover {
+    text-decoration: underline;
+  }
+</style>
+
+<div id="score">0</div>
+
+<div id="attribution">
+  Assets by
+  <a href="https://apps2amigos.itch.io/fruit-game-free-asset-pack" target="_blank">Apps2Amigos</a
+  ><br />
+  Adapted from
+  <a href="https://zrghr.itch.io/froots-and-veggies-culinary-pixels" target="_blank">zrghr</a>
+</div>