@nayan-ui/games 1.19.0 → 1.20.0

package/src/games/dino-jump/DinoJumpScene.ts

@@ -0,0 +1,686 @@
+// Everything Dino Jump runs on and into, under its desert sky (EngineMeadow, desert, without its own
+// ground). Screen points (y down) land on the play plane ahead of a low camera, where the original game drew
+// them; the real desert floor meets that plane exactly on the ground line, so the dino and the obstacles
+// stand on the sand. The near desert (the floor, saguaros, barrel cacti, rocks, dry brush, tufts and
+// pebbles) comes in three tiles that scroll past at the dino's running speed, which gives real
+// parallax, and wrap round. The dino, a tyrannosaur-like theropod, is built from shapes; its legs run and its body bobs in the
+// engine's core. Every part is a shared mesh: mesh ids are app-wide and limited.
+import {
+  type Color,
+  effects,
+  type Entity,
+  type Geometry,
+  lathe,
+  merge,
+  type Model,
+  type Quat,
+  quat,
+  recolor,
+  shapeGeometry,
+  type TransformBatch,
+  tube,
+  type Vec3,
+  type World
+} from '@nayan-ui/engine';
+import type { GameTheme } from '../../services/ThemeService';
+import { at, bushMesh, fbm, HAZE, noise, pointSize, random, rockMesh, sceneryTint, tuftMesh, type View3D } from '../shared/EngineMeadow';
+import { cacheGameAsset, createGameMesh as createShape } from '../shared/EngineMeshes';
+import { toColor } from '../shared/EngineUtils';
+import { DINO_HEIGHT, DINO_WIDTH, type Layout, OBSTACLE_SIZE, type ObstacleKind, STRIDE_TIME, TILE } from './DinoJumpConstants';
+
+// ── Helpers ───────────────────────────────────────────────────────────
+
+const meshes = new Map<string, Model>();
+const cached = (key: string, build: () => Model) => {
+  let m = meshes.get(key);
+  if (!m) {
+    m = cacheGameAsset('dino-jump/DinoJumpScene:' + key, build);
+    meshes.set(key, m);
+  }
+  return m;
+};
+type RGB = [number, number, number];
+const rgb = (css: string): RGB => {
+  const [r, g, b] = toColor(css);
+  return [r, g, b];
+};
+const mix = (a: RGB, b: RGB, t: number): RGB => [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t, a[2] + (b[2] - a[2]) * t];
+const sphere = () => shapeGeometry('sphere');
+
+/** Cactus skin: ribs (`count` round), darker in the grooves. */
+const ribbed = (count: number, depth: number) => ({
+  displace: (u: number) => depth * Math.cos(u * Math.PI * 2 * count),
+  color: ({ u }: { u: number }): Color => mix(rgb('#2f6b2c'), rgb('#5aa646'), 0.5 + 0.5 * Math.cos(u * Math.PI * 2 * count))
+});
+
+// ── Cacti and the mushroom (unit boxes, scaled to their collision size) ──
+
+/** A small cactus: a stout ribbed column with a stubby arm, one unit wide and tall. */
+const smallCactusMesh = () =>
+  cached('dj-cactus-small', () =>
+    createShape(
+      merge([
+        {
+          geometry: lathe(
+            [
+              [0.34, 0],
+              [0.36, 0.55],
+              [0.33, 0.82],
+              [0.22, 0.96],
+              [0.001, 1]
+            ],
+            { segments: 24, ...ribbed(10, 0.025) }
+          )
+        },
+        {
+          geometry: tube(
+            [
+              [0.25, 0.4, 0],
+              [0.42, 0.42, 0],
+              [0.45, 0.62, 0]
+            ],
+            { radius: 0.1, color: rgb('#3f8a38') }
+          )
+        }
+      ]),
+      { center: false, shine: 0.25 }
+    )
+  );
+
+/** A tall saguaro with an arm each side, one unit wide (arm to arm) and tall. */
+const largeCactusMesh = () =>
+  cached('dj-cactus-large', () =>
+    createShape(
+      merge([
+        {
+          geometry: lathe(
+            [
+              [0.22, 0],
+              [0.24, 0.6],
+              [0.22, 0.86],
+              [0.15, 0.97],
+              [0.001, 1]
+            ],
+            { segments: 24, ...ribbed(12, 0.018) }
+          )
+        },
+        {
+          geometry: tube(
+            [
+              [-0.18, 0.36, 0],
+              [-0.4, 0.38, 0],
+              [-0.42, 0.66, 0]
+            ],
+            { radius: 0.085, color: rgb('#3f8a38') }
+          )
+        },
+        {
+          geometry: tube(
+            [
+              [0.18, 0.46, 0],
+              [0.38, 0.48, 0],
+              [0.4, 0.76, 0]
+            ],
+            { radius: 0.08, color: rgb('#3f8a38') }
+          )
+        }
+      ]),
+      { center: false, shine: 0.25 }
+    )
+  );
+
+/** The bonus mushroom: a red spotted cap on a cream stem, one unit wide and tall. */
+const mushroomMesh = () =>
+  cached('dj-mushroom', () => {
+    const spots: { geometry: Geometry; position: Vec3; scale: number; color: RGB }[] = [];
+    const rand = random(5);
+    for (let i = 0; i < 9; i++) {
+      const a = rand() * Math.PI * 2;
+      const up = 0.25 + rand() * 0.6; // 0 at the rim, 1 at the crown
+      const r = 0.5 * Math.cos(up * 1.2);
+      spots.push({
+        geometry: sphere(),
+        position: [Math.cos(a) * r, 0.5 + up * 0.48, Math.sin(a) * r],
+        scale: 0.09 + rand() * 0.05,
+        color: [1, 1, 1]
+      });
+    }
+    return createShape(
+      merge([
+        {
+          geometry: lathe(
+            [
+              [0.15, 0],
+              [0.17, 0.25],
+              [0.14, 0.52]
+            ],
+            { segments: 16, color: rgb('#f3e3c3') }
+          )
+        },
+        {
+          geometry: lathe(
+            [
+              [0.001, 0.46],
+              [0.5, 0.48],
+              [0.47, 0.66],
+              [0.34, 0.86],
+              [0.16, 0.97],
+              [0.001, 1]
+            ],
+            { segments: 24, color: rgb('#e23b33') }
+          )
+        },
+        ...spots
+      ]),
+      { center: false, shine: 0.5 }
+    );
+  });
+
+const OBSTACLE_MESH: Record<ObstacleKind, () => Model> = { cactus_small: smallCactusMesh, cactus_large: largeCactusMesh, mushroom: mushroomMesh };
+
+/** An obstacle standing on the ground line, its box's left edge at screen x. */
+export function spawnObstacle(world: World, v: View3D, l: Layout, kind: ObstacleKind, x: number, tint: Color): Entity {
+  const k = pointSize(v);
+  const { width, height } = OBSTACLE_SIZE[kind];
+  return world.spawn({
+    mesh: OBSTACLE_MESH[kind](),
+    position: at(v, x + width / 2, l.groundY),
+    scale: [width * k, height * k, width * k * (kind === 'cactus_large' ? 0.6 : 1)],
+    rotation: quat.y(kind === 'mushroom' ? 0.5 : 0),
+    color: tint,
+    pickable: false
+  });
+}
+
+export function placeObstacle(world: World, v: View3D, l: Layout, e: Entity, kind: ObstacleKind, x: number, updates?: TransformBatch) {
+  const position = at(v, x + OBSTACLE_SIZE[kind].width / 2, l.groundY);
+  if (updates) updates.position(e, position[0], position[1], position[2]);
+  else world.set(e, { position });
+}
+
+// ── The dino ──────────────────────────────────────────────────────────
+
+const SKIN_TOP = rgb('#3a4527');
+const SKIN_SIDE = rgb('#6d7a43');
+const SKIN_BELLY = rgb('#cdbf8f');
+const SKIN_STRIPE = rgb('#262b17');
+const CLAW = rgb('#2a2418');
+const TOOTH = rgb('#efe5c8');
+const MOUTH = rgb('#3a1a14');
+const smooth = (a: number, b: number, x: number) => {
+  const t = Math.min(1, Math.max(0, (x - a) / (b - a)));
+  return t * t * (3 - 2 * t);
+};
+
+/** Countershaded, mottled hide: dark olive along the back, pale under the belly; `striped` adds bands across the back. */
+const hide =
+  (striped = false) =>
+  ({ position: p, normal: n }: { position: Vec3; normal: Vec3 }): Color => {
+    const up = 0.5 + 0.5 * n[1];
+    let c = mix(SKIN_BELLY, SKIN_SIDE, smooth(0.22, 0.5, up));
+    c = mix(c, SKIN_TOP, smooth(0.6, 0.95, up));
+    if (striped && up > 0.55 && p[0] < 0.14) c = mix(c, SKIN_STRIPE, smooth(0.45, 0.8, Math.sin(p[0] * 46)) * smooth(0.55, 0.8, up) * 0.75);
+    const m = 0.86 + 0.28 * noise(p[0] * 22 + 3, p[1] * 22 + p[2] * 11);
+    return [c[0] * m, c[1] * m, c[2] * m];
+  };
+const skin = (g: Geometry) => recolor(g, hide());
+
+/** Linear between [t, value] stops, eased. */
+const taper = (stops: [number, number][]) => (t: number) => {
+  for (let i = 0; i + 1 < stops.length; i++) {
+    const [a, ra] = stops[i]!;
+    const [b, rb] = stops[i + 1]!;
+    if (t <= b) return ra + (rb - ra) * smooth(a, b, t);
+  }
+  return stops[stops.length - 1]![1];
+};
+
+/** A claw (or a tooth): a tapering cone `length` long, pointing along +y from its base at the origin. */
+const claw = (length: number, base: number, color: RGB = CLAW) =>
+  lathe(
+    [
+      [base, 0],
+      [base * 0.6, length * 0.5],
+      [0.001, length]
+    ],
+    { segments: 8, color }
+  );
+
+/**
+ * The dino's body, head, arms and tail, one unit tall, facing +x, its near side toward +z: a theropod
+ * in the tyrannosaur mould, its spine level from tail tip to hips, a deep chest, an S-curved neck and a
+ * long boxy skull with a row of teeth.
+ */
+const dinoMesh = () =>
+  cached('dj-dino-rex', () => {
+    // Tail tip to the base of the skull, one smooth tapering tube, a little narrower than it is deep
+    const spine = tube(
+      [
+        [-0.54, 0.41, 0],
+        [-0.42, 0.44, 0],
+        [-0.28, 0.5, 0],
+        [-0.12, 0.55, 0],
+        [0.03, 0.57, 0],
+        [0.14, 0.63, 0],
+        [0.21, 0.73, 0],
+        [0.26, 0.83, 0]
+      ],
+      {
+        radius: taper([
+          [0, 0.01],
+          [0.16, 0.042],
+          [0.33, 0.095],
+          [0.5, 0.155],
+          [0.62, 0.165],
+          [0.76, 0.12],
+          [0.88, 0.078],
+          [1, 0.072]
+        ]),
+        sides: 24,
+        smoothness: 10,
+        color: hide(true)
+      }
+    );
+    // Upper jaw: the skull runs on into a long, deep snout
+    const snoutR = (t: number) => 0.072 - 0.026 * t;
+    const snout = tube(
+      [
+        [0.29, 0.885, 0],
+        [0.38, 0.877, 0],
+        [0.475, 0.862, 0]
+      ],
+      { radius: snoutR, sides: 18, color: hide() }
+    );
+    const jaw = tube(
+      [
+        [0.27, 0.84, 0],
+        [0.36, 0.818, 0],
+        [0.455, 0.8, 0]
+      ],
+      { radius: (t) => 0.046 - 0.016 * t, sides: 16, color: hide() }
+    );
+    const teeth: { geometry: Geometry; position: Vec3; rotation: Quat; scale: number }[] = [];
+    for (let i = 0; i < 7; i++) {
+      const x = 0.335 + i * 0.021;
+      const t = (x - 0.29) / 0.185;
+      const r = snoutR(t);
+      const y = 0.885 - 0.023 * t - r * 0.72;
+      for (const side of [1, -1])
+        teeth.push({
+          geometry: claw(0.026, 0.008, TOOTH),
+          position: [x, y, side * r * 0.62],
+          rotation: quat.z(Math.PI),
+          scale: 1 - Math.abs(i - 2) * 0.08
+        });
+    }
+    const pair = (part: { geometry: Geometry; position: Vec3; scale: number | Vec3; color?: RGB; rotation?: Quat }) => [
+      part,
+      { ...part, position: [part.position[0], part.position[1], -part.position[2]] as Vec3 }
+    ];
+    const arm = (z: number) => ({
+      geometry: skin(
+        tube(
+          [
+            [0.15, 0.57, z],
+            [0.19, 0.51, z * 1.15],
+            [0.235, 0.515, z * 1.15]
+          ],
+          { radius: (t) => 0.026 - 0.01 * t, sides: 10 }
+        )
+      )
+    });
+    const armClaws = (z: number) =>
+      [0.012, -0.012].map((dz) => ({ geometry: claw(0.022, 0.006), position: [0.235, 0.512, z * 1.15 + dz] as Vec3, rotation: quat.z(-2.0) }));
+    return createShape(
+      merge([
+        { geometry: spine, scale: [1, 1, 0.8] },
+        // A deep chest and belly hanging under the ribs
+        { geometry: skin(sphere()), position: [0.01, 0.5, 0], scale: [0.36, 0.3, 0.25] },
+        // Skull: a broad cranium behind the snout, cheek muscles bulging behind the jaw
+        { geometry: skin(sphere()), position: [0.3, 0.875, 0], scale: [0.2, 0.17, 0.16] },
+        { geometry: snout, scale: [1, 1, 0.82] },
+        { geometry: jaw, scale: [1, 1, 0.78] },
+        ...teeth,
+        ...pair({
+          geometry: tube(
+            [
+              [0.28, 0.842, 0.046],
+              [0.37, 0.828, 0.042],
+              [0.455, 0.818, 0.032]
+            ],
+            { radius: 0.006, sides: 6, caps: false }
+          ),
+          position: [0, 0, 0],
+          scale: 1,
+          color: MOUTH
+        }),
+        // Heavy brow over a small amber eye with a dark slit, a nostril at the snout's tip
+        ...pair({ geometry: skin(sphere()), position: [0.335, 0.94, 0.05], scale: [0.1, 0.032, 0.045] }),
+        ...pair({ geometry: sphere(), position: [0.34, 0.91, 0.064], scale: 0.034, color: rgb('#d79a1c') }),
+        ...pair({ geometry: sphere(), position: [0.345, 0.91, 0.079], scale: [0.009, 0.026, 0.008], color: rgb('#0b0b0b') }),
+        ...pair({ geometry: sphere(), position: [0.35, 0.918, 0.08], scale: 0.007, color: [1, 1, 1] }),
+        ...pair({ geometry: sphere(), position: [0.462, 0.88, 0.026], scale: [0.02, 0.012, 0.012], color: rgb('#1d1f12') }),
+        // Short two-fingered arms
+        arm(0.085),
+        arm(-0.085),
+        ...armClaws(0.085),
+        ...armClaws(-0.085)
+      ]),
+      { center: false, shine: 0.18 }
+    );
+  });
+
+/**
+ * A leg, pivoting at the hip (the origin): a heavy drumstick thigh, the knee forward, a slim shin back to
+ * a high ankle, then the long foot bones down to three clawed toes on the ground (it walks on its toes).
+ */
+const legMesh = () =>
+  cached('dj-leg-rex', () => {
+    const toes = [-0.032, 0, 0.032].flatMap((z) => {
+      const length = z === 0 ? 0.1 : 0.08;
+      const tip: Vec3 = [0.03 + length, -0.443, z * 1.6];
+      return [
+        {
+          geometry: skin(tube([[0.03, -0.438, z * 0.6], [0.03 + length * 0.55, -0.44, z * 1.2], tip], { radius: (t) => 0.021 - 0.009 * t, sides: 8 }))
+        },
+        { geometry: claw(0.03, 0.011), position: tip, rotation: quat.z(-1.75) }
+      ];
+    });
+    return createShape(
+      merge([
+        { geometry: skin(sphere()), position: [0.01, -0.07, 0], scale: [0.25, 0.3, 0.17], rotation: quat.z(-0.25) },
+        {
+          geometry: skin(
+            tube(
+              [
+                [0.0, -0.1, 0],
+                [0.065, -0.2, 0]
+              ],
+              { radius: (t) => 0.075 - 0.03 * t, sides: 12 }
+            )
+          )
+        },
+        {
+          geometry: skin(
+            tube(
+              [
+                [0.065, -0.2, 0],
+                [0.02, -0.27, 0],
+                [-0.03, -0.33, 0]
+              ],
+              { radius: (t) => 0.045 - 0.016 * t, sides: 12 }
+            )
+          )
+        },
+        {
+          geometry: skin(
+            tube(
+              [
+                [-0.03, -0.33, 0],
+                [-0.005, -0.39, 0],
+                [0.03, -0.437, 0]
+              ],
+              { radius: (t) => 0.028 - 0.004 * t, sides: 10 }
+            )
+          )
+        },
+        ...toes
+      ]),
+      { center: false, shine: 0.15 }
+    );
+  });
+
+export type DinoView = { root: Entity; body: Entity; near: Entity; far: Entity };
+
+const HIP: Vec3 = [-0.06, 0.46, 0];
+const SWING = 0.5;
+
+/** The dino, its feet on screen point (x, y) (its box's bottom middle). */
+export function spawnDino(world: World, v: View3D, x: number, y: number, tint: Color): DinoView {
+  const size = DINO_HEIGHT * pointSize(v);
+  const root = world.spawn({ mesh: 'none', position: at(v, x, y), pickable: false });
+  const body = world.spawn({ mesh: dinoMesh(), parent: root, scale: size, color: tint, pickable: false });
+  const leg = (z: number) =>
+    world.spawn({ mesh: legMesh(), parent: root, position: [HIP[0] * size, HIP[1] * size, z * size], scale: size, color: tint, pickable: false });
+  return { root, body, near: leg(0.1), far: leg(-0.1) };
+}
+
+export const dinoCentre = (x: number) => x + DINO_WIDTH / 2;
+
+export function placeDino(world: World, v: View3D, d: DinoView, x: number, y: number) {
+  world.set(d.root, { position: at(v, x, y) });
+}
+
+/** Running: the legs swing in turn and the body bobs; otherwise they hold a pose (tucked in the air). */
+export function setGait(world: World, v: View3D, d: DinoView, gait: 'stand' | 'run' | 'air') {
+  for (const leg of [d.near, d.far]) world.stopAnimation(leg);
+  const size = DINO_HEIGHT * pointSize(v);
+  if (gait === 'run') {
+    world.set(d.near, { rotation: quat.z(SWING) });
+    world.set(d.far, { rotation: quat.z(-SWING) });
+    world.animate(d.near, { rotation: quat.z(-SWING) }, { duration: STRIDE_TIME, easing: 'easeInOut', repeat: 'forever', yoyo: true });
+    world.animate(d.far, { rotation: quat.z(SWING) }, { duration: STRIDE_TIME, easing: 'easeInOut', repeat: 'forever', yoyo: true });
+    world.set(d.root, { bob: { amplitude: [0, size * 0.025, 0], speed: Math.PI / STRIDE_TIME } });
+    return;
+  }
+  world.set(d.root, { bob: null });
+  world.set(d.near, { rotation: quat.z(gait === 'air' ? 0.5 : 0) });
+  world.set(d.far, { rotation: quat.z(gait === 'air' ? -0.25 : 0) });
+}
+
+/** A hit: the dino flashes red and shakes. */
+export function hurtDino(world: World, d: DinoView, tint: Color) {
+  world.animate(d.body, [{ color: [1.8, 0.35, 0.35, 1], at: 0.25 }, { color: tint }], { duration: 0.4 });
+  world.animate(d.root, { shake: 0.05 }, { duration: 0.3 });
+}
+
+/** A mushroom eaten: a golden glow. */
+export function cheerDino(world: World, d: DinoView, tint: Color) {
+  world.animate(d.body, [{ color: [1.7, 1.5, 0.7, 1], at: 0.3 }, { color: tint }], { duration: 0.45 });
+}
+
+// ── Effects ───────────────────────────────────────────────────────────
+
+const SAND: Color = [0.86, 0.74, 0.55, 0.85];
+const CACTUS_BITS: Color[] = ['#2f6b2c', '#5aa646', '#c9a063'].map((c) => toColor(c));
+const MUSHROOM_BITS: Color[] = ['#e23b33', '#ffffff', '#ffd54f'].map((c) => toColor(c));
+
+/** A puff of sand at screen point (x, y): kicked up running, or a bigger one landing. */
+export function dust(world: World, v: View3D, x: number, y: number, big: boolean) {
+  const k = pointSize(v);
+  effects.dust(world, {
+    position: at(v, x, y),
+    count: big ? 5 : 1,
+    size: (big ? 22 : 14) * k,
+    speed: (big ? 60 : 30) * k,
+    direction: [-1, 0.5, 0],
+    spread: big ? 1.4 : 0.6,
+    lifetime: big ? 0.5 : 0.4,
+    color: SAND,
+    endSize: 2.2
+  });
+}
+
+/** Bits fly where the dino hit an obstacle (green and sand for a cactus, red and white for a mushroom). */
+export function hitBurst(world: World, v: View3D, x: number, y: number, mushroom: boolean) {
+  const k = pointSize(v);
+  effects.shatter(world, {
+    position: at(v, x, y, v.playDepth - 0.3),
+    count: 12,
+    mesh: mushroom ? 'sphere' : 'cube',
+    size: 8 * k,
+    speed: 220 * k,
+    lifetime: 0.55,
+    gravity: -2200 * k,
+    colors: mushroom ? MUSHROOM_BITS : CACTUS_BITS
+  });
+}
+
+// ── The scrolling desert ──────────────────────────────────────────────
+
+const SAND_LIGHT = rgb('#ecd29a');
+const SAND_DARK = rgb('#cfa86a');
+const SAND_RED = rgb('#d89a62');
+
+/** Noise that repeats every `period` along x, so tiles meet without a seam. */
+const periodic = (x: number, z: number, period: number, f: (x: number, z: number) => number) => {
+  const t = (((x % period) + period) % period) / period;
+  return f(t * period, z) * (1 - t) + f((t - 1) * period, z) * t;
+};
+
+/**
+ * The desert floor for one tile, `TILE` metres across, from just in front of the camera to past the
+ * near hills: sand in drifts and ripples, a firmer, paler strip where the dino runs, hazing with distance.
+ */
+const floorMesh = (runZ: number) =>
+  cached(`dj-floor:${runZ.toFixed(2)}`, () => {
+    const vertices: number[] = [];
+    const indices: number[] = [];
+    const rows = 44;
+    const cols = 48;
+    for (let i = 0; i < rows; i++) {
+      const z = -(1.2 + Math.pow(1.12, i) - 1);
+      for (let j = 0; j < cols; j++) {
+        const x = -TILE / 2 + (j / (cols - 1)) * TILE;
+        const drift = periodic(x, z, TILE, (a, b) => fbm(a * 0.07, b * 0.07));
+        const ripple = periodic(x, z, TILE, (a, b) => noise(a * 0.9, b * 0.35));
+        let c = mix(SAND_DARK, SAND_LIGHT, drift);
+        c = mix(c, SAND_RED, Math.max(0, 0.45 - drift) * 0.6);
+        c = mix(c, mix(c, [1, 1, 1], 0.12), ripple * 0.6);
+        const track = Math.max(0, 1 - Math.abs(-z - runZ) / 1.3);
+        c = mix(c, rgb('#f2deb0'), track * 0.45);
+        const haze = 1 - Math.exp(-((-z / 140) ** 2));
+        c = mix(c, HAZE, haze * 0.7);
+        vertices.push(x, 0, z, 0, 1, 0, c[0], c[1], c[2], 0, 0);
+      }
+    }
+    const id = (i: number, j: number) => i * cols + j;
+    for (let i = 0; i + 1 < rows; i++)
+      for (let j = 0; j + 1 < cols; j++) indices.push(id(i, j), id(i, j + 1), id(i + 1, j + 1), id(i, j), id(i + 1, j + 1), id(i + 1, j));
+    return createShape({ vertices: new Float32Array(vertices), indices: new Uint32Array(indices) }, { center: false });
+  });
+
+/** A saguaro to stand in the distance: a ribbed trunk with arms, one unit tall. */
+const saguaroMesh = () =>
+  cached('dj-saguaro', () =>
+    createShape(
+      merge([
+        {
+          geometry: lathe(
+            [
+              [0.07, 0],
+              [0.075, 0.7],
+              [0.065, 0.92],
+              [0.035, 0.99],
+              [0.001, 1]
+            ],
+            { segments: 18, ...ribbed(12, 0.006) }
+          )
+        },
+        {
+          geometry: tube(
+            [
+              [-0.06, 0.42, 0],
+              [-0.2, 0.44, 0],
+              [-0.22, 0.72, 0]
+            ],
+            { radius: 0.045, color: rgb('#3f8a38') }
+          )
+        },
+        {
+          geometry: tube(
+            [
+              [0.06, 0.52, 0],
+              [0.17, 0.54, 0],
+              [0.18, 0.8, 0]
+            ],
+            { radius: 0.04, color: rgb('#3f8a38') }
+          )
+        }
+      ]),
+      { center: false, shine: 0.2 }
+    )
+  );
+
+/** A barrel cactus with a ring of pink flowers, about half a unit tall. */
+const barrelMesh = () =>
+  cached('dj-barrel', () =>
+    createShape(
+      merge([
+        {
+          geometry: lathe(
+            [
+              [0.001, 0],
+              [0.3, 0.04],
+              [0.4, 0.22],
+              [0.36, 0.42],
+              [0.2, 0.54],
+              [0.001, 0.56]
+            ],
+            { segments: 22, ...ribbed(14, 0.02) }
+          )
+        },
+        ...[0, 1, 2, 3, 4].map((i) => ({
+          geometry: sphere(),
+          position: [Math.cos(i * 1.26) * 0.12, 0.56, Math.sin(i * 1.26) * 0.12] as Vec3,
+          scale: 0.09,
+          color: rgb('#ff6fa8')
+        }))
+      ]),
+      { center: false, shine: 0.25 }
+    )
+  );
+
+export type Tiles = { roots: Entity[] };
+
+/** Three desert tiles side by side, each its floor with its plants and rocks as children. */
+export function spawnDesert(world: World, theme: GameTheme, runZ: number): Tiles {
+  const tint = sceneryTint(theme);
+  const shade = (c: Color): Color => [c[0] * tint[0], c[1] * tint[1], c[2] * tint[2], c[3] ?? 1];
+  const roots = [0, 1, 2].map((t) => {
+    const root = world.spawn({ mesh: floorMesh(runZ), color: shade([1, 1, 1, 1]), pickable: false });
+    const rand = random(100 + t * 17);
+    const put = (mesh: Model, x: number, z: number, s: number | Vec3, color: Color = [1, 1, 1, 1], rotation: Quat = quat.y(rand() * 6.3)) =>
+      world.spawn({ mesh, parent: root, position: [x, 0, z], scale: s, rotation, color: shade(color), pickable: false });
+    const anywhere = () => (rand() - 0.5) * TILE;
+    // Keep the strip just behind the dino clear of anything that could pass for an obstacle
+    const behind = (near: number, far: number) => {
+      let z = -(near + rand() * (far - near));
+      if (Math.abs(-z - runZ) < 4) z -= 5;
+      return z;
+    };
+    for (let i = 0; i < 6; i++) put(saguaroMesh(), anywhere(), behind(18, 70), 3 + rand() * 3.5, [1, 1, 1, 1], quat.y(rand() * 0.6 - 0.3));
+    for (let i = 0; i < 6; i++) put(barrelMesh(), anywhere(), behind(13, 40), 0.5 + rand() * 0.6);
+    for (let i = 0; i < 8; i++) {
+      const s = 0.3 + rand() * 1.4;
+      put(rockMesh(), anywhere(), behind(12, 60), [s * 1.3, s, s], [0.95, 0.78, 0.6, 1]);
+    }
+    for (let i = 0; i < 8; i++) {
+      const s = 0.5 + rand() * 0.7;
+      put(bushMesh(), anywhere(), behind(12, 50), [s * 1.2, s * 0.8, s * 1.2], [0.72, 0.62, 0.36, 1]);
+    }
+    // Dry tufts and pebbles right in front. A prop d metres out stays below the dino's ground line while
+    // it's shorter than eye height x (1 - d / runZ): the tufts (up to ~0.3 m) keep within 5.5 m, the
+    // pebbles (a few cm) can go nearly to the line
+    for (let i = 0; i < 16; i++) put(tuftMesh(), anywhere(), -(2.6 + rand() * 2.9), 0.5 + rand() * 0.3, [0.82, 0.72, 0.42, 1]);
+    for (let i = 0; i < 14; i++) {
+      const s = 0.05 + rand() * 0.07;
+      put(rockMesh(), anywhere(), -(2.6 + rand() * 5.5), [s * 1.4, s, s], [0.85, 0.72, 0.58, 1]);
+    }
+    return root;
+  });
+  return { roots };
+}
+
+/** Scrolls the desert `travelled` metres: each tile wraps round to the far side once it's well out of view. */
+export function placeDesert(world: World, t: Tiles, travelled: number) {
+  t.roots.forEach((root, i) => {
+    const span = TILE * 3;
+    const x = ((((i * TILE - travelled + TILE * 1.5) % span) + span) % span) - TILE * 1.5;
+    world.set(root, { position: [x, 0, 0] });
+  });
+}
+
+export function removeDesert(world: World, t: Tiles) {
+  for (const r of t.roots) world.despawn(r);
+}