@nayan-ui/games 1.18.0 → 1.20.0

package/src/games/penguin-run/PenguinRunScene.ts

@@ -0,0 +1,949 @@
+// Penguin Run's world: an ancient stone causeway running across a jungle chasm, built tile by tile
+// ahead of the penguin. Mossy paving between carved kerbs, fluted columns (some broken), stone idols,
+// flaming torches, giant jungle trees and the canopy far below, an archway now and then. Also the
+// obstacles (broken gaps to jump, spiked gateways to slide under), coins, gems and
+// the finish line, all laid out fresh for every run by `generateTrack`.
+import {
+  type Color,
+  effects,
+  type Entity,
+  type GeometryPart,
+  lathe,
+  type Light,
+  merge,
+  type Model,
+  quat,
+  recolor,
+  shapeGeometry,
+  tube,
+  type Vec3,
+  type World
+} from '@nayan-ui/engine';
+import type { GameTheme } from '../../services/ThemeService';
+import { noise, random } from '../shared/EngineMeadow';
+import { cacheGameAsset, createGameMesh as createShape } from '../shared/EngineMeshes';
+import { FINISH_CLEAR, LANE_X, SLAB, START_CLEAR, TILE_LENGTH, TILES_BEFORE_START, TILES_PAST_FINISH, TRACK_LENGTH } from './PenguinRunConstants';
+
+/** The last tile of the causeway: a few past the finish, ending at the far temple. */
+export const LAST_TILE = Math.ceil(TRACK_LENGTH / TILE_LENGTH) + TILES_PAST_FINISH - 1;
+
+const night = (theme: GameTheme) => theme.mode === 'dark';
+
+const DAY_LIGHT: Light = { direction: [0.4, 0.9, 0.5], ambient: 0.72, color: [1.3, 1.24, 1.12], shadows: true, shadowExtent: 16 };
+const NIGHT_LIGHT: Light = { direction: [-0.3, 0.85, 0.5], ambient: 0.66, color: [0.95, 1.0, 1.25], shadows: true, shadowExtent: 16 };
+export const lightFor = (theme: GameTheme): Light => (night(theme) ? NIGHT_LIGHT : DAY_LIGHT);
+/** Hazy jungle air by day, deep blue by night; also the fog's color. */
+export const backgroundFor = (theme: GameTheme): readonly [number, number, number] => (night(theme) ? [0.16, 0.2, 0.32] : [0.78, 0.88, 0.92]);
+export const FOG = 0.02;
+/** The top of the jungle canopy far below the causeway, where the trees rise from. */
+const CANOPY_Y = -8;
+/** How far a tree's or palm's crown can reach from its trunk, at its largest scale (metres). */
+const TREE_SPREAD = 7.5;
+
+// ── Meshes ────────────────────────────────────────────────────────────
+
+type RGB = [number, number, number];
+const rgba = (c: RGB, a = 1): Color => [c[0], c[1], c[2], a];
+const mix = (a: RGB, b: RGB, t: number): RGB => {
+  const k = Math.min(1, Math.max(0, t));
+  return [a[0] + (b[0] - a[0]) * k, a[1] + (b[1] - a[1]) * k, a[2] + (b[2] - a[2]) * k];
+};
+const STONE: RGB = [0.82, 0.77, 0.66];
+const STONE_DARK: RGB = [0.56, 0.52, 0.45];
+const MOSS: RGB = [0.42, 0.56, 0.26];
+const BARK: RGB = [0.48, 0.34, 0.2];
+const LEAF: RGB = [0.26, 0.52, 0.18];
+const LEAF_LIGHT: RGB = [0.5, 0.72, 0.28];
+const GOLD: RGB = [1, 0.76, 0.2];
+const LEAF_DARK: RGB = [0.12, 0.3, 0.1];
+const PALM: RGB = [0.34, 0.6, 0.2];
+
+/** The walkway along each side of the lanes: its centre, width and outer edge (x). Props stand on it. */
+const WALK_X = 3.78;
+const WALK_WIDTH = 1.44;
+const WALK_OUTER = WALK_X + WALK_WIDTH / 2;
+
+const meshes = new Map<string, Model>();
+const cached = (key: string, build: () => Model) => {
+  let m = meshes.get(key);
+  if (!m) {
+    m = cacheGameAsset('penguin-run/PenguinRunScene:' + key, build);
+    meshes.set(key, m);
+  }
+  return m;
+};
+
+/** Weathered stone: darker in the cracks, moss creeping up from below and over the tops. */
+const weathered =
+  (seed: number, mossLevel = 0.5) =>
+  ({ position: [x, y, z] }: { position: Vec3 }): Color => {
+    const grain = noise(x * 3.1 + seed, z * 3.1 + y * 2.3);
+    let c = mix(STONE_DARK, STONE, 0.35 + grain * 0.8);
+    c = mix(c, MOSS, Math.max(0, noise(x * 1.3 + seed * 2, z * 1.3 + y) - (1 - mossLevel)) * 2.2);
+    return rgba(c);
+  };
+
+/**
+ * One causeway tile (origin at its near end, running to -TILE_LENGTH): kerbs, a paved walkway along
+ * each side (where the columns, idols, arches and bushes stand) behind a low broken parapet, vines
+ * trailing down, and the deep stone pier. The paving is laid separately, slab by slab, so slabs can be
+ * missing (gaps to jump); under them is a black bed, so a missing slab reads as a crack into the depths.
+ */
+const pathMesh = (variant: number) =>
+  cached(`pr-path:${variant}`, () => {
+    const rand = random(40 + variant);
+    const box = shapeGeometry('roundedBox');
+    const parts: GeometryPart[] = [
+      { geometry: shapeGeometry('cube'), position: [0, -0.31, -TILE_LENGTH / 2], scale: [5.3, 0.04, TILE_LENGTH], color: [0.03, 0.025, 0.02, 1] }
+    ];
+    for (const side of [-1, 1]) {
+      // Carved kerbs along the lanes
+      for (let i = 0; i < 4; i++)
+        parts.push({
+          geometry: recolor(box, weathered(i + side * 5, 0.6)),
+          position: [side * 2.85, 0.1, -1.5 - i * 3],
+          scale: [0.42, 0.5, 2.94],
+          color: [1, 1, 1, 1]
+        });
+      // The walkway: big worn flagstones, a little below the paving
+      for (let i = 0; i < 6; i++)
+        parts.push({
+          geometry: recolor(box, weathered(20 + i + side * 7 + variant * 13, 0.55)),
+          position: [side * WALK_X, -0.12 + (rand() - 0.5) * 0.04, -1 - i * 2],
+          scale: [WALK_WIDTH - 0.04, 0.26, 1.94],
+          color: [1, 1, 1, 1]
+        });
+      // A low parapet on the outer edge, broken here and there
+      for (let i = 0; i < 4; i++) {
+        if (rand() < 0.25) continue;
+        const h = 0.35 + rand() * 0.2;
+        parts.push({
+          geometry: recolor(box, weathered(30 + i + side * 3, 0.7)),
+          position: [side * (WALK_OUTER - 0.18), h / 2, -1.5 - i * 3],
+          scale: [0.34, h, 2.4 + rand() * 0.4],
+          color: [1, 1, 1, 1]
+        });
+      }
+      // Vines trailing over the edge and down the pier
+      for (let i = 0; i < 3; i++) {
+        const z = -1 - rand() * (TILE_LENGTH - 2);
+        const len = 2.5 + rand() * 3.5;
+        const x = side * (WALK_OUTER + 0.05);
+        parts.push({
+          geometry: tube(
+            [
+              [x - side * 0.3, 0.05, z],
+              [x + side * 0.08, -0.3, z + 0.1],
+              [x + side * 0.12, -len * 0.5, z - 0.1],
+              [x + side * 0.05, -len, z + 0.15]
+            ],
+            {
+              radius: (t) => 0.06 - t * 0.035,
+              sides: 4,
+              smoothness: 3,
+              color: ({ v }) => rgba(mix(LEAF, LEAF_LIGHT, v * 0.6))
+            }
+          )
+        });
+      }
+    }
+    // A carved band under the deck, then the pier falling away into the chasm
+    parts.push({
+      geometry: recolor(box, weathered(3, 0.3)),
+      position: [0, -0.48, -TILE_LENGTH / 2],
+      scale: [WALK_OUTER * 2 + 0.3, 0.36, TILE_LENGTH + 0.02],
+      color: [0.85, 0.82, 0.78, 1]
+    });
+    parts.push({
+      geometry: recolor(shapeGeometry('cube'), ({ position: [x, y, z] }) =>
+        rgba(mix(mix(STONE_DARK, [0.3, 0.3, 0.27], -y * 0.08), MOSS, Math.max(0, noise(x * 0.8, z * 0.8 + y) - 0.55) * 1.6))
+      ),
+      position: [0, -4.6, -TILE_LENGTH / 2],
+      scale: [WALK_OUTER * 2 - 0.4, 8, TILE_LENGTH],
+      color: [1, 1, 1, 1]
+    });
+    return createShape(merge(parts), { center: false, shine: 0.15 });
+  });
+
+/** A paving slab (one lane wide, SLAB long), worn at the edges; tinted per slab. */
+const slabMesh = (variant: number) =>
+  cached(`pr-slab:${variant}`, () =>
+    createShape(
+      merge([
+        {
+          geometry: recolor(shapeGeometry('roundedBox'), weathered(90 + variant * 3, 0.35)),
+          position: [0, -0.15, 0],
+          scale: [1.66, 0.3, SLAB - 0.08],
+          color: [1, 1, 1, 1]
+        }
+      ]),
+      {
+        center: false,
+        shine: 0.15
+      }
+    )
+  );
+
+/** Broken slab ends either side of a gap: jagged stone teeth and loose chips. */
+const brokenEdgeMesh = () =>
+  cached('pr-broken', () => {
+    const rand = random(97);
+    const parts: GeometryPart[] = [];
+    for (const side of [-1, 1])
+      for (let i = 0; i < 5; i++)
+        parts.push({
+          geometry: recolor(shapeGeometry('roundedBox'), weathered(100 + i, 0.3)),
+          position: [-0.66 + i * 0.33 + (rand() - 0.5) * 0.1, -0.12 - rand() * 0.1, side * (SLAB / 2 - 0.08 - rand() * 0.12)],
+          rotation: quat.y(rand() * 6.3),
+          scale: [0.22 + rand() * 0.12, 0.2, 0.18 + rand() * 0.12],
+          color: [1, 1, 1, 1]
+        });
+    return createShape(merge(parts), { center: false, shine: 0.1 });
+  });
+
+/** The finish line: a checkered band across the causeway under a golden gateway with a red banner and pennants. */
+const finishMesh = () =>
+  cached('pr-finish', () => {
+    const box = shapeGeometry('roundedBox');
+    const checker = recolor(shapeGeometry('cube'), ({ position: [x, , z] }) =>
+      rgba((Math.floor((x + 0.5) * 12) + Math.floor((z + 0.5) * 3)) % 2 ? [0.96, 0.96, 0.94] : [0.08, 0.08, 0.1])
+    );
+    const pennant = (x: number, color: RGB): GeometryPart => ({
+      geometry: tube(
+        [
+          [x, 6.0, 0.4],
+          [x + 0.06, 5.45, 0.41]
+        ],
+        { radius: (t) => 0.14 * (1 - t), shape: (s) => 0.2 + 0.8 * Math.abs(Math.cos(s * Math.PI * 2)), sides: 6, color: rgba(color) }
+      )
+    });
+    return createShape(
+      merge([
+        { geometry: checker, position: [0, 0.015, 0], scale: [5.3, 0.03, 1.2], color: [1, 1, 1, 1] },
+        { geometry: box, position: [-WALK_X, 0.2, 0], scale: [1.1, 0.4, 1.1], color: rgba([0.8, 0.6, 0.16]) },
+        { geometry: box, position: [WALK_X, 0.2, 0], scale: [1.1, 0.4, 1.1], color: rgba([0.8, 0.6, 0.16]) },
+        { geometry: box, position: [-WALK_X, 3.1, 0], scale: [0.6, 6.2, 0.6], color: rgba(GOLD) },
+        { geometry: box, position: [WALK_X, 3.1, 0], scale: [0.6, 6.2, 0.6], color: rgba(GOLD) },
+        { geometry: box, position: [0, 6.25, 0], scale: [WALK_X * 2 + 0.8, 0.5, 0.7], color: rgba(GOLD) },
+        { geometry: box, position: [0, 5.35, 0.1], scale: [5.6, 1.1, 0.12], color: rgba([0.85, 0.12, 0.14]) },
+        { geometry: box, position: [0, 5.35, 0.17], scale: [4.6, 0.12, 0.04], color: rgba([1, 0.9, 0.5]) },
+        ...[-2.6, -1.3, 0, 1.3, 2.6].map((x, i) =>
+          pennant(
+            x,
+            [
+              [0.2, 0.5, 0.95],
+              [1, 0.8, 0.15],
+              [0.2, 0.75, 0.3]
+            ][i % 3] as RGB
+          )
+        )
+      ]),
+      { center: false, shine: 0.5 }
+    );
+  });
+
+/** The start line: a white band across the causeway. */
+const startMesh = () =>
+  cached('pr-start', () =>
+    createShape(merge([{ geometry: shapeGeometry('cube'), position: [0, 0.015, 0], scale: [5.3, 0.03, 0.5], color: rgba([0.96, 0.96, 0.92]) }]), {
+      center: false,
+      shine: 0.3
+    })
+  );
+
+/** A stepped jungle temple filling the causeway's end, so the track never just stops in the air. */
+const templeMesh = () =>
+  cached('pr-temple', () => {
+    const box = shapeGeometry('roundedBox');
+    const stone = (seed: number, moss = 0.5) => recolor(box, weathered(seed, moss));
+    const steps: GeometryPart[] = [0, 1, 2, 3].map((i) => ({
+      geometry: stone(150 + i, 0.6 - i * 0.1),
+      position: [0, -2 + i * 2.6, 0],
+      scale: [22 - i * 4.5, 2.6, 10 - i * 1.8],
+      color: [1, 1, 1, 1]
+    }));
+    return createShape(
+      merge([
+        { geometry: stone(160, 0.3), position: [0, -8, 0], scale: [24, 12, 12], color: [0.85, 0.82, 0.78, 1] },
+        ...steps,
+        { geometry: stone(161, 0.3), position: [0, 10.2, 0], scale: [6, 3.2, 4.4], color: [1, 1, 1, 1] },
+        { geometry: box, position: [0, 9.6, 2.22], scale: [2, 2.4, 0.1], color: [0.05, 0.04, 0.03, 1] },
+        { geometry: box, position: [0, 12.1, 0], scale: [6.6, 0.5, 5], color: rgba(GOLD) }
+      ]),
+      { center: false, shine: 0.15 }
+    );
+  });
+
+/** A fluted column on a square plinth with a carved capital; `broken` snaps it off part way up. */
+const columnMesh = (broken: boolean) =>
+  cached(`pr-column:${broken}`, () => {
+    const top = broken ? 2.2 : 4.4;
+    const box = shapeGeometry('roundedBox');
+    const shaft = lathe(
+      [
+        [0.001, top],
+        [0.36, top - (broken ? 0.25 : 0)],
+        [0.38, top - 0.3],
+        [0.4, 0.8],
+        [0.44, 0.55]
+      ],
+      {
+        segments: 24,
+        displace: (u, v) => Math.cos(u * Math.PI * 2 * 12) * 0.018 + (broken && v < 0.15 ? (noise(u * 9, 1) - 0.5) * 0.4 : 0),
+        color: weathered(broken ? 7 : 2, 0.45)
+      }
+    );
+    const parts: GeometryPart[] = [
+      { geometry: recolor(box, weathered(1, 0.7)), position: [0, 0.28, 0], scale: [1.2, 0.56, 1.2], color: [1, 1, 1, 1] },
+      { geometry: shaft }
+    ];
+    if (!broken) {
+      parts.push({ geometry: recolor(box, weathered(4, 0.3)), position: [0, top + 0.12, 0], scale: [1.1, 0.24, 1.1], color: [1, 1, 1, 1] });
+      parts.push({
+        geometry: recolor(shapeGeometry('cylinder'), weathered(5, 0.3)),
+        position: [0, top - 0.1, 0],
+        scale: [0.95, 0.22, 0.95],
+        color: [1, 1, 1, 1]
+      });
+    } else {
+      // Fallen drum lying at its foot
+      parts.push({
+        geometry: recolor(shapeGeometry('cylinder'), weathered(8, 0.6)),
+        position: [0.55, 0.32, 0.5],
+        rotation: quat.z(Math.PI / 2),
+        scale: [0.72, 0.8, 0.72],
+        color: [1, 1, 1, 1]
+      });
+    }
+    return createShape(merge(parts), { center: false, shine: 0.1 });
+  });
+
+/** A stone idol: a great carved head with heavy brows, hollow eyes and a grim mouth, on a plinth. */
+const idolMesh = () =>
+  cached('pr-idol', () => {
+    const box = shapeGeometry('roundedBox');
+    const stone = (seed: number) => recolor(box, weathered(seed, 0.55));
+    const dark: Color = [0.12, 0.11, 0.1, 1];
+    return createShape(
+      merge([
+        { geometry: stone(1), position: [0, 0.35, 0], scale: [1.5, 0.7, 1.3], color: [1, 1, 1, 1] },
+        { geometry: stone(2), position: [0, 1.5, 0], scale: [1.2, 1.6, 1.05], color: [1, 1, 1, 1] },
+        { geometry: stone(3), position: [0, 2.05, 0.5], scale: [1.15, 0.22, 0.2], color: [1, 1, 1, 1] },
+        { geometry: box, position: [-0.28, 1.82, 0.52], scale: [0.3, 0.18, 0.08], color: dark },
+        { geometry: box, position: [0.28, 1.82, 0.52], scale: [0.3, 0.18, 0.08], color: dark },
+        { geometry: stone(4), position: [0, 1.5, 0.58], scale: [0.26, 0.5, 0.2], color: [1, 1, 1, 1] },
+        { geometry: box, position: [0, 1.05, 0.53], scale: [0.62, 0.12, 0.08], color: dark },
+        { geometry: stone(5), position: [-0.64, 1.55, 0], scale: [0.14, 0.6, 0.35], color: [1, 1, 1, 1] },
+        { geometry: stone(6), position: [0.64, 1.55, 0], scale: [0.14, 0.6, 0.35], color: [1, 1, 1, 1] }
+      ]),
+      { center: false, shine: 0.1 }
+    );
+  });
+
+/** A bronze torch stand: a twisted post and a bowl at the top (the flame is a separate glowing sprite). */
+const torchMesh = () =>
+  cached('pr-torch', () =>
+    createShape(
+      merge([
+        {
+          geometry: tube(
+            [
+              [0, 0, 0],
+              [0.03, 0.6, 0.02],
+              [-0.02, 1.2, 0],
+              [0, 1.55, 0]
+            ],
+            { radius: (t) => 0.07 - t * 0.025, sides: 8, color: rgba([0.35, 0.24, 0.12]) }
+          )
+        },
+        {
+          geometry: lathe(
+            [
+              [0.001, 1.5],
+              [0.18, 1.55],
+              [0.26, 1.75],
+              [0.22, 1.76],
+              [0.001, 1.65]
+            ],
+            { segments: 14, color: rgba([0.55, 0.38, 0.16]) }
+          )
+        },
+        { geometry: shapeGeometry('cylinder'), position: [0, 0.05, 0], scale: [0.35, 0.1, 0.35], color: rgba([0.3, 0.22, 0.12]) }
+      ]),
+      { center: false, shine: 0.6 }
+    )
+  );
+
+/**
+ * A lumpy clump of leaves about one unit across: a sphere pushed in and out (the same every time for a
+ * seed), dark underneath and inside, catching the light on top.
+ */
+const leafClump = (seed: number, dark: RGB = LEAF_DARK, light: RGB = LEAF_LIGHT) => {
+  const profile: [number, number][] = Array.from({ length: 7 }, (_, i) => {
+    const a = Math.PI / 2 - (i / 6) * Math.PI;
+    return [Math.max(0.001, Math.cos(a) * 0.5), Math.sin(a) * 0.5];
+  });
+  return lathe(profile, {
+    segments: 10,
+    // Periodic around (no seam): big lumps, then smaller ones
+    displace: (u, v) =>
+      0.08 * Math.sin(u * Math.PI * 2 * 3 + seed) * Math.sin(v * Math.PI * 3 + seed * 0.7) +
+      0.04 * Math.sin(u * Math.PI * 2 * 7 + seed * 1.9) * Math.sin(v * Math.PI * 6),
+    color: ({ position: [x, y, z] }) => rgba(mix(dark, light, 0.35 + y * 1.1 + (noise(x * 5 + seed, z * 5 - seed) - 0.5) * 0.5))
+  });
+};
+
+/** A small round bead one unit across (blossoms, coconuts): a handful of triangles, unlike the built-in sphere. */
+const bead = () =>
+  lathe(
+    [
+      [0.001, 0.5],
+      [0.35, 0.35],
+      [0.5, 0],
+      [0.35, -0.35],
+      [0.001, -0.5]
+    ],
+    { segments: 6 }
+  );
+
+/** Bark: deep grooves running up the trunk, moss on its lower part. */
+const bark =
+  (seed: number) =>
+  ({ u, v }: { u: number; v: number }) =>
+    rgba(mix(mix([0.3, 0.21, 0.13], BARK, 0.4 + noise(u * 14 + seed, v * 3) * 0.8), MOSS, Math.max(0, 0.35 - v) * 1.6 * noise(u * 6, v * 9 + seed)));
+
+/**
+ * A giant jungle tree rising out of the canopy below (its base at the origin, about 15 high): a tall,
+ * slightly leaning trunk flaring into buttress roots, limbs branching off its upper half, each ending in
+ * lumpy clumps of leaves, and lianas hanging from them.
+ */
+const treeMesh = (variant: number) =>
+  cached(`pr-tree:${variant}`, () => {
+    const rand = random(70 + variant);
+    const lean = (rand() - 0.5) * 0.8;
+    const height = 13 + rand() * 2;
+    const at = (t: number): Vec3 => [lean * t * t, t * height, Math.sin(t * 3 + variant) * 0.3];
+    const parts: GeometryPart[] = [
+      {
+        geometry: tube(
+          Array.from({ length: 6 }, (_, i) => at(i / 5)),
+          { radius: (t) => 0.62 * (1 - t * 0.6) + Math.max(0, 0.12 - t) * 4, sides: 10, smoothness: 4, color: bark(variant) }
+        )
+      }
+    ];
+    // Buttress roots flaring out at the foot
+    for (let i = 0; i < 5; i++) {
+      const a = (i / 5) * Math.PI * 2 + rand() * 0.5;
+      const r = 1.8 + rand() * 0.8;
+      parts.push({
+        geometry: tube(
+          [
+            [0, 2.4, 0],
+            [Math.cos(a) * 0.8, 0.9, Math.sin(a) * 0.8],
+            [Math.cos(a) * r, 0, Math.sin(a) * r]
+          ],
+          { radius: (t) => 0.4 - t * 0.3, sides: 6, smoothness: 3, color: bark(variant + i) }
+        )
+      });
+    }
+    // Limbs off the upper trunk, each with its clumps of leaves (and the crown on top)
+    const crowns: Vec3[] = [at(1)];
+    const limbs = 3 + Math.floor(rand() * 2);
+    for (let i = 0; i < limbs; i++) {
+      const t = 0.55 + (i / limbs) * 0.35 + rand() * 0.05;
+      const from = at(t);
+      const a = (i / limbs) * Math.PI * 2 + rand();
+      const reach = 1.6 + rand() * 1.0;
+      const to: Vec3 = [from[0] + Math.cos(a) * reach, from[1] + 1.4 + rand() * 1.6, from[2] + Math.sin(a) * reach];
+      parts.push({
+        geometry: tube([from, [(from[0] + to[0]) / 2, from[1] + 0.9, (from[2] + to[2]) / 2], to], {
+          radius: (k) => 0.28 * (1 - t * 0.5) * (1 - k * 0.6),
+          sides: 6,
+          smoothness: 3,
+          color: bark(variant + 10 + i)
+        })
+      });
+      crowns.push(to);
+    }
+    crowns.forEach((c, i) => {
+      const clumps = i === 0 ? 4 : 3;
+      for (let k = 0; k < clumps; k++) {
+        const a = rand() * Math.PI * 2;
+        const r = k === 0 ? 0 : 0.6 + rand() * 0.5;
+        const size = (i === 0 ? 3.6 : 2.8) + rand() * 1.2;
+        parts.push({
+          geometry: leafClump(variant * 10 + i * 3 + k),
+          position: [c[0] + Math.cos(a) * r, c[1] + 0.4 + rand() * 0.6, c[2] + Math.sin(a) * r],
+          rotation: quat.y(rand() * 6.3),
+          scale: [size, size * (0.5 + rand() * 0.15), size],
+          color: [1, 1, 1, 1]
+        });
+      }
+      // A liana or two hanging from the limb
+      if (i > 0 && rand() < 0.8) {
+        const len = 4 + rand() * 4;
+        parts.push({
+          geometry: tube(
+            [
+              [c[0], c[1], c[2]],
+              [c[0] + 0.15, c[1] - len * 0.5, c[2] - 0.1],
+              [c[0] - 0.1, c[1] - len, c[2] + 0.12]
+            ],
+            {
+              radius: 0.045,
+              sides: 4,
+              smoothness: 3,
+              color: rgba(mix(BARK, LEAF, 0.55))
+            }
+          )
+        });
+      }
+    });
+    return createShape(merge(parts), { center: false, shine: 0.05 });
+  });
+
+/** A palm rising out of the canopy (base at the origin, about 11 high): a curving ringed trunk and a crown of drooping fronds, with coconuts. */
+const palmMesh = (variant: number) =>
+  cached(`pr-palm:${variant}`, () => {
+    const rand = random(170 + variant);
+    const bend = (rand() < 0.5 ? -1 : 1) * (0.6 + rand() * 0.6);
+    const height = 10 + rand() * 2;
+    const trunkAt = (t: number): Vec3 => [bend * t * t, t * height, 0];
+    const top = trunkAt(1);
+    const parts: GeometryPart[] = [
+      {
+        geometry: tube(
+          Array.from({ length: 6 }, (_, i) => trunkAt(i / 5)),
+          {
+            radius: (t) => 0.32 - t * 0.1 + Math.max(0, 0.08 - t) * 2,
+            sides: 8,
+            smoothness: 5,
+            color: ({ v }) => rgba(mix([0.42, 0.33, 0.22], [0.6, 0.5, 0.34], 0.5 + Math.sin(v * 90) * 0.5))
+          }
+        )
+      }
+    ];
+    const fronds = 9;
+    for (let i = 0; i < fronds; i++) {
+      const a = (i / fronds) * Math.PI * 2 + rand() * 0.3;
+      const reach = 3.6 + rand() * 1.2;
+      const dir: Vec3 = [Math.cos(a), 0, Math.sin(a)];
+      const p = (k: number, up: number): Vec3 => [top[0] + dir[0] * reach * k, top[1] + up, top[2] + dir[2] * reach * k];
+      parts.push({
+        geometry: tube([p(0, 0), p(0.35, 0.7), p(0.7, 0.2), p(1, -1.3 - rand() * 0.6)], {
+          radius: (t) => 0.42 * Math.max(0.05, Math.sin(Math.PI * Math.min(1, t * 1.15))) ** 0.6,
+          // A flat blade with a ridge down the middle
+          shape: (s) => 0.08 + 0.92 * Math.abs(Math.cos(s * Math.PI * 2)) ** 3,
+          sides: 6,
+          smoothness: 5,
+          color: ({ v }) => rgba(mix(PALM, [0.62, 0.74, 0.3], v * 0.8))
+        })
+      });
+    }
+    for (let i = 0; i < 3; i++) {
+      const a = (i / 3) * Math.PI * 2;
+      parts.push({
+        geometry: bead(),
+        position: [top[0] + Math.cos(a) * 0.28, top[1] - 0.25, top[2] + Math.sin(a) * 0.28],
+        scale: 0.32,
+        color: rgba([0.4, 0.27, 0.12])
+      });
+    }
+    return createShape(merge(parts), { center: false, shine: 0.1 });
+  });
+
+/** A flowering bush for the walkway: a few clumps of leaves dotted with blossoms. */
+const bushMesh = (variant: number) =>
+  cached(`pr-bush:${variant}`, () => {
+    const rand = random(210 + variant);
+    const parts: GeometryPart[] = [];
+    for (let i = 0; i < 5; i++) {
+      const a = (i / 5) * Math.PI * 2 + rand();
+      const r = i === 0 ? 0 : 0.35 + rand() * 0.2;
+      const size = 0.7 + rand() * 0.35;
+      parts.push({
+        geometry: leafClump(300 + variant * 7 + i),
+        position: [Math.cos(a) * r, size * 0.32, Math.sin(a) * r],
+        scale: [size, size * 0.75, size],
+        color: [1, 1, 1, 1]
+      });
+    }
+    const blossom: RGB = variant ? [1, 0.45, 0.6] : [1, 0.82, 0.25];
+    for (let i = 0; i < 7; i++) {
+      const a = rand() * Math.PI * 2;
+      const r = 0.2 + rand() * 0.45;
+      parts.push({ geometry: bead(), position: [Math.cos(a) * r, 0.45 + rand() * 0.35, Math.sin(a) * r], scale: 0.11, color: rgba(blossom) });
+    }
+    return createShape(merge(parts), { center: false, shine: 0.1 });
+  });
+
+/** The jungle canopy far below: a wide bed of leafy crowns in several greens. */
+const canopyMesh = (variant: number) =>
+  cached(`pr-canopy:${variant}`, () => {
+    const rand = random(250 + variant);
+    const parts: GeometryPart[] = [];
+    for (let i = 0; i < 9; i++) {
+      const size = 4 + rand() * 3.5;
+      const shade = rand();
+      parts.push({
+        geometry: leafClump(400 + variant * 11 + i, mix(LEAF_DARK, [0.08, 0.2, 0.08], shade), mix(LEAF, LEAF_LIGHT, shade)),
+        position: [(rand() - 0.5) * 12, rand() * 1.5, (rand() - 0.5) * 12],
+        scale: [size, size * 0.55, size],
+        color: [1, 1, 1, 1]
+      });
+    }
+    return createShape(merge(parts), { center: false, shine: 0.03 });
+  });
+
+/** An archway over the causeway: two square piers standing on the walkways and a carved lintel, hung with vines. */
+const archMesh = () =>
+  cached('pr-arch', () => {
+    const box = shapeGeometry('roundedBox');
+    const vine = (x: number, len: number) => ({
+      geometry: tube(
+        [
+          [x, 5.3, 0.45],
+          [x + 0.05, 5.3 - len * 0.5, 0.5],
+          [x - 0.04, 5.3 - len, 0.48]
+        ],
+        { radius: 0.04, sides: 5, color: rgba(LEAF) }
+      )
+    });
+    return createShape(
+      merge([
+        { geometry: recolor(box, weathered(15, 0.8)), position: [-WALK_X, 0.25, 0], scale: [1.35, 0.5, 1.35], color: [1, 1, 1, 1] },
+        { geometry: recolor(box, weathered(16, 0.8)), position: [WALK_X, 0.25, 0], scale: [1.35, 0.5, 1.35], color: [1, 1, 1, 1] },
+        { geometry: recolor(box, weathered(11, 0.6)), position: [-WALK_X, 2.8, 0], scale: [1.05, 5.0, 1.05], color: [1, 1, 1, 1] },
+        { geometry: recolor(box, weathered(12, 0.6)), position: [WALK_X, 2.8, 0], scale: [1.05, 5.0, 1.05], color: [1, 1, 1, 1] },
+        { geometry: recolor(box, weathered(13, 0.4)), position: [0, 5.6, 0], scale: [WALK_OUTER * 2 - 0.2, 0.9, 1.3], color: [1, 1, 1, 1] },
+        { geometry: recolor(box, weathered(14, 0.2)), position: [0, 6.25, 0], scale: [WALK_OUTER * 2 + 0.2, 0.4, 1.5], color: [1, 1, 1, 1] },
+        { geometry: box, position: [0, 5.6, 0.66], scale: [1.2, 0.5, 0.06], color: rgba(GOLD) },
+        vine(-2.2, 1.6),
+        vine(-1.1, 0.9),
+        vine(0.9, 1.3),
+        vine(2.4, 2.0)
+      ]),
+      { center: false, shine: 0.15 }
+    );
+  });
+
+// Obstacles: gateways span the whole causeway (gaps are missing slabs, laid with the paving)
+
+/**
+ * A gateway spanning the whole causeway: massive end piers, a long carved lintel fringed with stone
+ * spikes and vines, its underside about 1 m up: the only way through is to slide.
+ */
+const wideGateMesh = () =>
+  cached('pr-wide-gate', () => {
+    const box = shapeGeometry('roundedBox');
+    const cone = shapeGeometry('cone');
+    const spikes: GeometryPart[] = Array.from({ length: 17 }, (_, i) => ({
+      geometry: recolor(cone, weathered(120 + i, 0.2)),
+      position: [-2.4 + i * 0.3, 0.95, 0.04],
+      rotation: quat.x(Math.PI),
+      scale: [0.13, 0.2 + (i % 2) * 0.06, 0.13],
+      color: [1, 1, 1, 1]
+    }));
+    const vines: GeometryPart[] = [-2.1, -1.2, -0.4, 0.7, 1.5, 2.3].map((x, i) => ({
+      geometry: tube(
+        [
+          [x, 1.08, 0.32],
+          [x + 0.03, 0.95 - (i % 3) * 0.04, 0.35],
+          [x - 0.02, 0.84 - (i % 2) * 0.1, 0.33]
+        ],
+        { radius: 0.022, sides: 5, color: rgba(LEAF) }
+      )
+    }));
+    const glyphs: GeometryPart[] = [-1.8, -0.9, 0, 0.9, 1.8].map((x) => ({
+      geometry: shapeGeometry('cylinder'),
+      position: [x, 1.32, 0.31],
+      rotation: quat.x(Math.PI / 2),
+      scale: [0.22, 0.04, 0.22],
+      color: rgba(GOLD)
+    }));
+    return createShape(
+      merge([
+        ...[-2.85, 2.85].flatMap((x, i): GeometryPart[] => [
+          { geometry: recolor(box, weathered(130 + i, 0.75)), position: [x, 0.25, 0], scale: [0.7, 0.5, 0.8], color: [1, 1, 1, 1] },
+          { geometry: recolor(box, weathered(132 + i, 0.5)), position: [x, 1.25, 0], scale: [0.5, 2.5, 0.6], color: [1, 1, 1, 1] }
+        ]),
+        { geometry: recolor(box, weathered(134, 0.35)), position: [0, 1.38, 0], scale: [6.3, 0.6, 0.62], color: [1, 1, 1, 1] },
+        { geometry: recolor(box, weathered(135, 0.25)), position: [0, 1.06, 0], scale: [5.4, 0.14, 0.5], color: [0.9, 0.86, 0.8, 1] },
+        { geometry: recolor(box, weathered(136, 0.2)), position: [0, 1.76, 0], scale: [6.6, 0.18, 0.72], color: [1, 1, 1, 1] },
+        ...glyphs,
+        ...spikes,
+        ...vines
+      ]),
+      { center: false, shine: 0.15 }
+    );
+  });
+
+const coinMesh = () =>
+  cached('pr-coin', () =>
+    createShape(
+      merge([
+        { geometry: shapeGeometry('cylinder'), rotation: quat.x(Math.PI / 2), scale: [0.5, 0.08, 0.5], color: rgba(GOLD) },
+        { geometry: shapeGeometry('cylinder'), rotation: quat.x(Math.PI / 2), scale: [0.34, 0.1, 0.34], color: rgba([1, 0.86, 0.36]) }
+      ]),
+      { shine: 1 }
+    )
+  );
+
+const gemMesh = () =>
+  cached('pr-gem', () =>
+    createShape(
+      lathe(
+        [
+          [0.001, 0.3],
+          [0.3, 0.14],
+          [0.34, 0.06],
+          [0.001, -0.38]
+        ],
+        { segments: 8, color: [1, 1, 1, 1] }
+      ),
+      { shine: 1 }
+    )
+  );
+
+/** Builds every mesh ahead of time (each is made once per app). */
+export function prepareRunMeshes() {
+  for (const build of warmAssets()) build();
+}
+
+/** Each cached scenery mesh can be warmed independently without constructing a track. */
+export function* warmAssets(): Iterable<() => unknown> {
+  yield () => pathMesh(0);
+  yield () => pathMesh(1);
+  yield () => columnMesh(false);
+  yield () => columnMesh(true);
+  yield () => idolMesh();
+  yield () => torchMesh();
+  yield () => treeMesh(0);
+  yield () => treeMesh(1);
+  yield () => treeMesh(2);
+  yield () => palmMesh(0);
+  yield () => palmMesh(1);
+  yield () => bushMesh(0);
+  yield () => bushMesh(1);
+  yield () => canopyMesh(0);
+  yield () => canopyMesh(1);
+  yield () => archMesh();
+  yield () => slabMesh(0);
+  yield () => slabMesh(1);
+  yield () => slabMesh(2);
+  yield () => brokenEdgeMesh();
+  yield () => finishMesh();
+  yield () => startMesh();
+  yield () => templeMesh();
+  yield () => wideGateMesh();
+  yield () => coinMesh();
+  yield () => gemMesh();
+}
+
+// ── Track plan ────────────────────────────────────────────────────────
+
+export type ObstacleKind = 'gap' | 'beam';
+/** `wide`: part of a row spanning all three lanes (drawn once, as one piece, on the middle lane). */
+export type PlanObstacle = { kind: ObstacleKind; lane: number; z: number; wide?: boolean };
+export type PlanPickup = { lane: number; z: number; gem: boolean };
+export type TrackPlan = { seed: number; obstacles: PlanObstacle[]; pickups: PlanPickup[] };
+
+/** Centre z of paving row `k` (rows are SLAB long, from the start line toward -z). */
+const slabZ = (k: number) => -(k + 0.5) * SLAB;
+
+/**
+ * Lays out the TRACK_LENGTH metres in rows of obstacles. Some rows span the whole causeway (a crack
+ * you must jump, or a gateway you must slide under: gateways always span it); the rest break one or
+ * two lanes with gaps, never all three. Rows come closer and harder the further along the track, always
+ * leaving room to land and react. A trail of coins hops between lanes, steering clear of obstacles.
+ * A new seed gives a new layout every attempt.
+ */
+export function generateTrack(seed: number): TrackPlan {
+  const rand = random(seed);
+  const obstacles: PlanObstacle[] = [];
+  const lastRow = Math.floor((TRACK_LENGTH - FINISH_CLEAR) / SLAB);
+  for (let k = Math.ceil(START_CLEAR / SLAB); k <= lastRow;) {
+    const z = slabZ(k);
+    const progress = (k * SLAB) / TRACK_LENGTH;
+    if (rand() < 0.4 + progress * 0.15) {
+      const kind: ObstacleKind = rand() < 0.5 ? 'gap' : 'beam';
+      for (let lane = 0; lane < 3; lane++) obstacles.push({ kind, lane, z, wide: true });
+    } else {
+      const lanes = [0, 1, 2].sort(() => rand() - 0.5);
+      const blocked = rand() < 0.15 + progress * 0.5 ? 2 : 1;
+      for (let i = 0; i < blocked; i++) obstacles.push({ kind: 'gap', lane: lanes[i]!, z });
+    }
+    // 10-22 m to the next row early on, 8-14 m near the finish: room to land a jump and react
+    k += Math.max(4, 5 - Math.floor(progress * 2)) + Math.floor(rand() * (4 - Math.floor(progress * 2)));
+  }
+
+  const near = (lane: number, z: number, margin: number) =>
+    obstacles.some((o) => o.lane === lane && Math.abs(o.z - z) < (o.kind === 'gap' ? SLAB / 2 : 0.5) + margin);
+  const pickups: PlanPickup[] = [];
+  let lane = Math.floor(rand() * 3);
+  let nextHop = 8 + rand() * 6;
+  for (let d = 6; d < TRACK_LENGTH - 2; d += 1.6) {
+    const z = -d;
+    if (d >= nextHop) {
+      lane = (lane + 1 + Math.floor(rand() * 2)) % 3;
+      nextHop = d + 6 + rand() * 8;
+    }
+    if (near(lane, z, 0.9)) {
+      const free = [0, 1, 2].filter((l) => !near(l, z, 1.6));
+      if (!free.length) continue;
+      lane = free[Math.floor(rand() * free.length)]!;
+    }
+    pickups.push({ lane, z, gem: rand() < 0.04 });
+  }
+  return { seed, obstacles, pickups };
+}
+
+// ── Tiles ─────────────────────────────────────────────────────────────
+
+export type Obstacle = PlanObstacle & { e: Entity | null };
+export type Pickup = { gem: boolean; lane: number; y: number; z: number; e: Entity; taken: boolean };
+export type Tile = { index: number; z: number; entities: Entity[]; obstacles: Obstacle[]; pickups: Pickup[] };
+
+/**
+ * Builds tile `index` (its near end at z = -index * TILE_LENGTH) from the run's plan: the causeway
+ * slab by slab (broken out where there is a gap), its scenery, and the plan's obstacles, coins and
+ * finish line that fall in it.
+ */
+export function spawnTile(world: World, index: number, theme: GameTheme, plan: TrackPlan): Tile {
+  const isNight = night(theme);
+  const z0 = -index * TILE_LENGTH;
+  const z1 = z0 - TILE_LENGTH;
+  const inTile = (z: number) => z <= z0 && z > z1;
+  const rand = random(plan.seed * 31 + index * 17);
+  const tint: Color = isNight ? [0.8, 0.85, 1, 1] : [1, 1, 1, 1];
+  const entities: Entity[] = [];
+  const add = (
+    mesh: Model | 'sphere' | 'puff' | 'flame',
+    position: Vec3,
+    scale: Vec3 | number = 1,
+    yaw = 0,
+    color: Color = tint,
+    extra: object = {}
+  ) => {
+    const e = world.spawn({ mesh, position, scale, rotation: quat.y(yaw), color, pickable: false, ...extra });
+    entities.push(e);
+    return e;
+  };
+
+  add(pathMesh(Math.abs(index) % 2), [0, 0, z0]);
+
+  // Paving: every slab its own shade, a jagged hole where the plan breaks the track
+  const rowsPerTile = Math.round(TILE_LENGTH / SLAB);
+  for (let r = 0; r < rowsPerTile; r++) {
+    const z = slabZ(index * rowsPerTile + r);
+    for (let lane = 0; lane < 3; lane++) {
+      const gap = plan.obstacles.some((o) => o.kind === 'gap' && o.lane === lane && Math.abs(o.z - z) < 0.01);
+      if (gap) {
+        add(brokenEdgeMesh(), [LANE_X[lane]!, 0, z], 1, 0);
+        continue;
+      }
+      const shade = 0.88 + rand() * 0.2;
+      add(slabMesh(Math.floor(rand() * 3)), [LANE_X[lane]!, (rand() - 0.5) * 0.02, z], 1, (rand() - 0.5) * 0.015, [
+        tint[0] * shade,
+        tint[1] * shade,
+        tint[2] * shade,
+        1
+      ]);
+    }
+  }
+
+  // Scenery: columns, idols and flowering bushes on the walkways, torches on the kerbs; jungle giants
+  // and palms rising out of the canopy beyond
+  for (const side of [-1, 1] as const) {
+    const pick = rand();
+    const z = z0 - 2 - rand() * 8;
+    if (pick < 0.45) add(columnMesh(rand() < 0.35), [side * WALK_X, -0.02, z], 0.85 + rand() * 0.15, rand() * 6.3);
+    else if (pick < 0.65) add(idolMesh(), [side * WALK_X, -0.02, z], 0.72, side < 0 ? 0.9 : -0.9);
+    for (let i = 0; i < 2; i++) {
+      const bz = z0 - 1 - rand() * 10;
+      if (rand() < 0.6 && Math.abs(bz - z) > 1.6)
+        add(bushMesh(Math.floor(rand() * 2)), [side * (WALK_X + (rand() - 0.3) * 0.35), -0.02, bz], 0.75 + rand() * 0.35, rand() * 6.3);
+    }
+    const tz = z0 - 1 - rand() * 10;
+    if (rand() < 0.75) {
+      add(torchMesh(), [side * 2.85, 0.35, tz]);
+      add('flame', [side * 2.85, 2.05, tz], 0.55, 0, [2.6, 1.3, 0.45, 1], {
+        bob: { amplitude: [0.02, 0.06, 0.02], speed: 9 + rand() * 4, phase: rand() * 6 }
+      });
+      add('puff', [side * 2.85, 2.3, tz], 0.6, 0, [1.4, 0.8, 0.4, 0.35], { bob: { amplitude: [0.03, 0.12, 0.03], speed: 3, phase: rand() * 6 } });
+    }
+    // Far enough out that even the widest crown (about TREE_SPREAD across its trunk) stays clear of the walkway
+    for (let i = 0; i < 2; i++) {
+      const at: Vec3 = [side * (WALK_OUTER + TREE_SPREAD + rand() * 7), CANOPY_Y - 1, z0 - rand() * TILE_LENGTH];
+      if (rand() < 0.35) add(palmMesh(Math.floor(rand() * 2)), at, 0.9 + rand() * 0.3, rand() * 6.3);
+      else add(treeMesh(Math.floor(rand() * 3)), at, 0.85 + rand() * 0.35, rand() * 6.3);
+    }
+    add(canopyMesh(Math.floor(rand() * 2)), [side * (10 + rand() * 6), CANOPY_Y, z0 - 6], 1 + rand() * 0.4, rand() * 6.3, tint);
+  }
+  if (index > 0 && index % 5 === 0) add(archMesh(), [0, 0, z0 - 6]);
+  if (rand() < 0.5)
+    add('puff', [(rand() - 0.5) * 16, -3, z0 - rand() * 12], 6 + rand() * 4, 0, isNight ? [0.4, 0.45, 0.6, 0.25] : [1.1, 1.15, 1.1, 0.35]);
+  if (inTile(-TRACK_LENGTH)) add(finishMesh(), [0, 0, -TRACK_LENGTH]);
+  if (inTile(0)) add(startMesh(), [0, 0, -0.3]);
+  // The temples closing both ends of the causeway
+  if (index === -TILES_BEFORE_START) add(templeMesh(), [0, 0, z0 + 4]);
+  if (index === LAST_TILE) add(templeMesh(), [0, 0, z1 - 4]);
+
+  const obstacles: Obstacle[] = plan.obstacles
+    .filter((o) => inTile(o.z))
+    .map((o) => {
+      if (o.kind === 'gap' || o.lane !== 1) return { ...o, e: null };
+      return { ...o, e: add(wideGateMesh(), [0, 0, o.z], 1, 0) };
+    });
+  const pickups = plan.pickups.filter((p) => inTile(p.z)).map((p) => spawnPickup(world, entities, p.lane, p.gem ? 1.0 : 0.9, p.z, p.gem));
+  return { index, z: z0, entities, obstacles, pickups };
+}
+
+function spawnPickup(world: World, entities: Entity[], lane: number, y: number, z: number, gem: boolean): Pickup {
+  const e = world.spawn({
+    mesh: gem ? gemMesh() : coinMesh(),
+    position: [LANE_X[lane]!, y, z],
+    scale: gem ? 0.9 : 0.85,
+    color: gem ? [0.35, 0.8, 1.6, 1] : [1.25, 1.1, 0.75, 1],
+    spin: [0, gem ? 1.8 : 3.2, 0],
+    bob: { amplitude: [0, 0.1, 0], speed: 3, phase: z },
+    pickable: false
+  });
+  entities.push(e);
+  return { gem, lane, y, z, e, taken: false };
+}
+
+export function despawnTile(world: World, tile: Tile) {
+  for (const e of tile.entities) world.despawn(e);
+}
+
+// ── Effects ───────────────────────────────────────────────────────────
+
+export function coinSparkle(world: World, position: Vec3, gem: boolean) {
+  world.burst({
+    position,
+    count: gem ? 16 : 7,
+    mesh: 'flame',
+    size: gem ? 0.22 : 0.14,
+    speed: gem ? 3 : 2,
+    lifetime: 0.35,
+    gravity: 0,
+    color: gem ? [0.5, 1.2, 2.4, 1] : [2.4, 1.9, 0.7, 1],
+    endSize: 0
+  });
+}
+
+export function crashDust(world: World, position: Vec3) {
+  world.burst({
+    position,
+    count: 14,
+    mesh: 'sphere',
+    size: 0.1,
+    speed: 4,
+    lifetime: 0.6,
+    gravity: -9,
+    color: [rgba(STONE), rgba(STONE_DARK)],
+    endSize: 0.05
+  });
+  effects.dust(world, { position, count: 6, size: 0.6, speed: 1.2, lifetime: 0.9, color: [0.8, 0.75, 0.65, 0.7], endSize: 2.2 });
+}