Procedural worlds, field graphs and mesh recipes

import { FieldGraph } from "@nayan-ui/engine";

const route = { kind: "segment", ax: -30, az: 0, bx: 38, bz: 0 } as const;

export function islandFields() {
  const f = new FieldGraph();
  const { x, z } = f;
  const shore = f.sub(f.hypot(x, z), 40); // negative on the island
  const hills = f.mul(
    f.bumps(x, z, [[-15, 12, 5, 9, 7, 0.3], [14, -14, 4, 8, 8, 0]]),
    f.falloff(x, z, [{ ...route, offset: 2, width: 5 }]), // 0 on the path
  );
  const ripples = f.sines(x, z, 0, [[0.21, 0.13, 0, 0.2], [0.07, -0.18, 1.2, 0.3]]);
  const land = f.sum(1, hills, ripples, f.mul(f.noise(f.mul(x, 0.2), f.mul(z, 0.2)), 0.3));
  const coast = f.smooth(f.div(f.add(shore, 4), 6)); // 0 inland, 1 out at sea
  f.output("height", f.select(f.sub(shore, 2), f.mix(land, -1.5, coast), -1.5));
  f.output("path", f.distance(x, z, [{ ...route, offset: 1.5 }])); // negative on the path
  f.output("shore", shore);
  f.output("hills", hills);
  return f;
}

import { FieldGraph, type MeshRecipe, type WorldRecipe } from "@nayan-ui/engine";

export const GRASS = 1, SAND = 2, PATH = 3, WOOD = 4; // surface codes; 0 means outside

export function islandRecipe(seed: number, rock: MeshRecipe): WorldRecipe {
  const f = new FieldGraph();
  const { x, z } = f;
  const shore = f.sub(f.hypot(x, z), 40);
  const route = { kind: "segment", ax: -30, az: 0, bx: 38, bz: 0 } as const;
  const hills = f.mul(f.bumps(x, z, [[-15, 12, 5, 9, 7, 0.3], [14, -14, 4, 8, 8, 0]]), f.falloff(x, z, [{ ...route, offset: 2, width: 5 }]));
  const land = f.sum(1, hills, f.mul(f.noise(f.mul(x, 0.2), f.mul(z, 0.2)), 0.3));
  f.output("height", f.mix(land, -1.5, f.smooth(f.div(f.add(shore, 4), 6))));
  f.output("path", f.distance(x, z, [{ ...route, offset: 1.5 }]));
  f.output("sand", f.add(shore, 3)); // the last 3 units before the water
  const pier = f.depth(x, z, [{ kind: "box", x: 44, z: 0, halfX: 6, halfZ: 1.5 }]);
  // Walkable: dry land below the hilltops, plus the pier's deck.
  f.output("clearance", f.max(f.min(f.neg(f.add(shore, 1)), f.sub(1.2, hills)), pier));
  return {
    seed,
    rotation: 0,
    fields: f,
    terrain: {
      axis: Array.from({ length: 65 }, (_, i) => -64 + i * 2),
      height: "height",
      uvSize: [4, 4],
      regions: [
        { field: "path", surface: PATH, material: 2 },
        { field: "sand", surface: SAND, material: 1 },
      ],
      fallback: { surface: GRASS, material: 0 },
      materials: 3,
    },
    platforms: [{ x: 44, z: 0, halfX: 6, halfZ: 1.5, y: 0.4, surface: WOOD }],
    templates: [rock],
    solids: [
      { kind: "circle", x: -6, z: 6, radius: 1.2, bottom: -5, top: 5 }, // a well
      { kind: "hull", template: 0, x: 10, y: 0.6, z: 10, scale: [2, 1.5, 2], yaw: 0.6 },
    ],
    walk: { boundary: 52, clearance: "clearance", height: 1.8 },
    steps: [{ kind: "spawn", near: [-20, 0], rings: 12, samples: 16, radius: 0.6, surfaces: [PATH, GRASS] }],
  };
}

import type { FieldGraph, WorldStep } from "@nayan-ui/engine";

export function islandSteps(f: FieldGraph): WorldStep[] {
  const r = (k: number) => f.input("r" + k);
  const ground = f.input("ground");
  const angle = f.mul(r(0), Math.PI * 2);
  const radius = f.mul(f.sqrt(r(1)), 36); // spread evenly over a disc
  f.output("rock.x", f.mul(f.cos(angle), radius));
  f.output("rock.z", f.mul(f.sin(angle), radius));
  f.output("rock.y", f.sub(ground, 0.1)); // sink the base a little
  f.output("rock.size", f.add(0.6, f.mul(r(2), 1.4)));
  f.output("rock.yaw", f.mul(r(3), Math.PI * 2));
  f.output("rock.template", 0);
  f.output("tuft.x", f.add(f.input("sx"), f.mul(f.sub(r(0), 0.5), 3)));
  f.output("tuft.z", f.add(f.input("sz"), f.mul(f.sub(r(1), 0.5), 3)));
  f.output("ground", ground);
  return [
    { kind: "spawn", near: [-20, 0], rings: 12, samples: 16, radius: 0.6 },
    {
      kind: "scatter", name: "rocks", count: 120, randoms: 4,
      x: "rock.x", z: "rock.z", y: "rock.y", attributes: ["rock.size", "rock.yaw"],
      filters: [{ kind: "spawn", minDistance: 6 }, { kind: "field", field: "path", min: 2 }, { kind: "walkable", radius: 1.5 }],
      solid: { shapes: [{ kind: "hull", template: "rock.template", scale: ["rock.size", "rock.size", "rock.size"], y: "rock.y", yaw: "rock.yaw" }] },
    },
    { kind: "reach", cell: 2, steps: 4, radius: 0.5, extent: 52 },
    { kind: "pick", groups: [{ name: "coins", count: 8, spacing: 8, fromSpawn: 6 }, { name: "chests", count: 2, spacing: 20, fromSpawn: 15 }] },
    {
      kind: "scatter", name: "tufts", count: 800, randoms: 2, source: "reachable",
      x: "tuft.x", z: "tuft.z", y: "ground",
      filters: [{ kind: "surface", surfaces: [1] }, { kind: "walkable", radius: 0.3 }],
    },
    { kind: "overview", size: 64, extent: 52 },
  ];
}

import { useEffect, useState } from "react";
import { generateWorldAsync, warmUpEngine, type ProceduralWorld, type WorldRecipe } from "@nayan-ui/engine";

export function useProceduralWorld(recipe: WorldRecipe, key?: string) {
  const [world, setWorld] = useState<ProceduralWorld | null>(null);
  const [error, setError] = useState<Error | null>(null);
  useEffect(() => {
    let alive = true;
    let built: ProceduralWorld | undefined;
    warmUpEngine()
      .then(() => generateWorldAsync(recipe, { key, prepareTerrain: true }))
      .then((result) => {
        if (!alive) return result.dispose();
        built = result;
        setWorld(result);
      })
      .catch((reason: unknown) => {
        if (alive) setError(reason instanceof Error ? reason : new Error(String(reason)));
      });
    return () => {
      alive = false;
      built?.dispose();
      setWorld(null);
    };
  }, [recipe, key]);
  return { world, error };
}

import { quat, type ProceduralWorld, type Spot, type Vec3 } from "@nayan-ui/engine";

export interface Walker extends Spot {
  radius: number;
  yaw: number;
}

export function stepWalker(land: ProceduralWorld, walker: Walker, others: readonly Walker[], speed: number, dt: number) {
  land.move(walker, Math.sin(walker.yaw) * speed * dt, Math.cos(walker.yaw) * speed * dt, walker.radius, others);
  const position: Vec3 = [walker.x, land.ground(walker.x, walker.z), walker.z];
  const rotation = quat.multiply(land.tilt(walker.x, walker.z), quat.y(walker.yaw)); // turn, then tilt
  return { position, rotation, onPier: land.platformAt(walker.x, walker.z) >= 0 };
}

export const guardSees = (land: ProceduralWorld, guard: Spot, target: Spot) =>
  land.canSee(guard, target, { radius: 0.3, rise: 1.5 });

import { createShape, quat, type Model, type ProceduralWorld, type Texture, type World, type WorldRecipe } from "@nayan-ui/engine";

export function spawnIsland(scene: World, land: ProceduralWorld, recipe: WorldRecipe, textures: readonly Texture[], rock: Model) {
  const turn = quat.y(recipe.rotation ?? 0); // terrain meshes are in the local frame
  for (let material = 0; material < recipe.terrain.materials; material++) {
    const mesh = createShape(land.terrain(material), { center: false });
    scene.spawn({ mesh, texture: textures[material] ?? null, rotation: turn, pickable: false });
  }
  const rocks = land.layer("rocks"); // [x, y, z, size, yaw] per rock
  const stride = land.layers.rocks?.stride ?? 5;
  for (let i = 0; i + stride <= rocks.length; i += stride) {
    const [x, y, z, size, yaw] = rocks.subarray(i, i + stride);
    scene.spawn({ mesh: rock, position: [x, y, z], scale: size, rotation: quat.y(yaw), pickable: false });
  }
}

import { ProceduralCache, createShape, generateWorldAsync, isWorldKept, type Model, type WorldRecipe } from "@nayan-ui/engine";

const cache = new ProceduralCache("island:4");

export async function openIsland(recipe: WorldRecipe, slot: number, onStatus: (label: string) => void) {
  const key = cache.storageKey("island/world:" + slot);
  onStatus(isWorldKept(key) ? "Loading island" : "Generating island");
  const terrainKey = "island/terrain:" + slot;
  const needsTerrain = cache.peek<Model[]>(terrainKey) === undefined;
  const land = await generateWorldAsync(recipe, { key, prepareTerrain: needsTerrain });
  const terrain = cache.get(terrainKey, () =>
    Array.from({ length: recipe.terrain.materials }, (_, material) => createShape(land.terrain(material), { center: false })),
  );
  return { land, terrain };
}

import { FieldGraph, createShape, generateMesh, type MeshRecipe } from "@nayan-ui/engine";

export function rockRecipe(seed: number): MeshRecipe {
  const f = new FieldGraph();
  const u = f.input("u"), v = f.input("v");
  const around = f.mul(u, Math.PI * 2), down = f.mul(v, Math.PI);
  const nx = f.mul(f.sin(down), f.cos(around)), ny = f.cos(down), nz = f.mul(f.sin(down), f.sin(around));
  const detail = f.sum(f.mul(f.sin(f.sum(f.mul(around, 3), f.mul(down, 4), seed)), 0.12), f.mul(f.noise(f.mul(u, 8), f.mul(v, 4), 8), 0.15));
  const lump = f.add(1, f.mul(f.sin(down), detail)); // no lumps at the poles; noise wraps in u
  f.output("px", f.mul(nx, lump));
  f.output("py", f.max(-0.3, f.product(ny, lump, 0.75))); // flat base
  f.output("pz", f.mul(nz, lump));
  f.output("nx", nx); f.output("ny", ny); f.output("nz", nz);
  f.output("tu", f.mul(u, 2)); f.output("tv", v);
  f.output("grey", 0.6);
  return {
    fields: f,
    parts: [{ kind: "surface", rows: 16, cols: 24, position: ["px", "py", "pz"], normal: ["nx", "ny", "nz"], uv: ["tu", "tv"], color: ["grey", "grey", "grey"] }],
  };
}

export function tuftRecipe(seed: number): MeshRecipe {
  const f = new FieldGraph();
  const r = (k: number) => f.input("r" + k);
  const angle = f.add(f.mul(f.input("i"), 2.399), r(0));
  const [cos, sin] = [f.cos(angle), f.sin(angle)];
  const half = f.mul(f.add(0.3, f.mul(r(1), 0.25)), 0.5); // half the blade's height
  const lean = f.add(0.15, f.mul(r(2), 0.3));
  const shade = f.add(0.7, f.mul(r(3), 0.3));
  f.output("cx", f.mul(cos, 0.05)); f.output("cy", half); f.output("cz", f.mul(sin, 0.05));
  f.output("rx", f.mul(sin, -0.03)); f.output("rz", f.mul(cos, 0.03));
  f.output("ux", f.product(cos, lean, half)); f.output("uz", f.product(sin, lean, half));
  f.output("zero", 0); f.output("one", 1);
  f.output("r", f.mul(shade, 0.3)); f.output("g", f.mul(shade, 0.6)); f.output("b", f.mul(shade, 0.2));
  return {
    fields: f,
    parts: [{
      kind: "cards", count: 12, seed, randoms: 4,
      corners: [[-1, -1, 0, 1], [1, -1, 1, 1], [1, 1, 1, 0], [-1, 1, 0, 0]],
      center: ["cx", "cy", "cz"], right: ["rx", "zero", "rz"], up: ["ux", "cy", "uz"],
      normal: ["zero", "one", "zero"], color: ["r", "g", "b"], double: true,
    }],
  };
}

export const rockModel = () => createShape(generateMesh(rockRecipe(7)), { center: false });
export const tuftModel = () => createShape(generateMesh(tuftRecipe(3)), { center: false });

import { createShape, faceColor, lathe, sectionColor, surfaceColor, surfaceDisplacement, tube } from "@nayan-ui/engine";

const profile = Array.from({ length: 17 }, (_, i): [number, number] => {
  const a = (i / 16) * Math.PI; // [radius, height], top to bottom
  return [Math.sin(a) * 0.5, Math.cos(a) * 0.45];
});
const rind = surfaceColor((f, p) => {
  const stripe = f.smooth(f.mul(f.sub(f.abs(f.sin(f.mul(p.u, Math.PI * 12))), 0.6), 4));
  return [f.mix(0.3, 0.1, stripe), f.mix(0.6, 0.35, stripe), f.mix(0.2, 0.1, stripe)];
});
const ribs = surfaceDisplacement((f, p) => f.mul(f.cos(f.mul(p.u, Math.PI * 24)), 0.006));
const flesh = sectionColor((f, p) => {
  const edge = f.smooth(f.mul(f.sub(p.r, 0.88), 12)); // 1 near the skin
  return [f.mix(0.95, 0.85, edge), f.mix(0.3, 0.9, edge), f.mix(0.3, 0.6, edge)];
});
export const melon = () =>
  createShape(lathe(profile, { segments: 48, sweep: Math.PI * 1.5, color: rind, displace: ribs, cutColor: flesh }), { shine: 0.4 });

const bark = surfaceColor((f, p) => {
  const n = f.noise(f.mul(p.u, 12), f.mul(p.v, 6), 12); // period 12: no seam around the log
  return [f.add(0.25, f.mul(n, 0.15)), f.add(0.17, f.mul(n, 0.1)), f.add(0.1, f.mul(n, 0.06))];
});
const rings = faceColor((f, p) => {
  const dark = f.smooth(f.mul(f.sub(f.fract(f.mul(p.r, 6)), 0.75), 5));
  return [f.mix(0.85, 0.6, dark), f.mix(0.68, 0.45, dark), f.mix(0.45, 0.28, dark)];
});
export const log = () => createShape(tube([[0, 0, -1], [0, 0, 1]], { radius: 0.3, sides: 16, color: bark, capColor: rings }));