@opsydyn/effect-three 0.3.0 → 0.4.0

package/src/kernel/index.ts

@@ -104,12 +104,24 @@ export {
   sharedMaterial,
   sphere,
   spin,
+  points,
+  sparkles,
+  stars,
+  trail,
+  edges,
+  line,
+  catmullRomPoints,
+  catmullRomPointAt,
+  catmullRomColors,
+  cubicBezierPoints,
+  quadraticBezierPoints,
   cameraShake,
   detailed,
   billboard,
   spotLight,
   standard,
   overlay,
+  hud,
   renderTexture,
   torus,
   type TransformOptions,
@@ -199,6 +211,8 @@ export {
 export type { BodyCollision, BodyContactForce } from './bodies.ts';
 export type {
   ContactShadowPasses,
+  HostedLine,
+  HostedPoints,
   HostedShaderGrid,
   HostedSky,
   RenderKit,
@@ -277,3 +291,86 @@ export {
   type ParentKey,
   type SceneIndex,
 } from './sceneIndex.ts';
+export {
+  dragGizmo,
+  gizmo,
+  type Gizmo,
+  type GizmoGrab,
+  type GizmoHandle,
+  gizmoHandleOf,
+  type GizmoMode,
+  gizmoNodes,
+  type GizmoSpace,
+  hoverGizmo,
+  movedAlike,
+  type Placement,
+  pressGizmo,
+  releaseGizmo,
+} from './gizmo.ts';
+export { type BoxCorner, boxSelect, type CanvasSize, type Selectable } from './boxSelect.ts';
+export * as History from './history.ts';
+export * as Lockstep from './lockstep.ts';
+export {
+  describeScene,
+  formatSummary,
+  type LightSummary,
+  type SceneSummary,
+  type ThingSummary,
+  thingsBounds,
+} from './describeScene.ts';
+export {
+  type Mood,
+  moodStaging,
+  moods,
+  shotAngles,
+  type ShotAngle,
+  shotCamera,
+  type Staging,
+} from './shots.ts';
+export {
+  type FieldPath,
+  type FieldValue,
+  type InspectableAst,
+  type InspectedField,
+  type InspectHints,
+  inspectFields,
+  setAt,
+} from './inspect.ts';
+export {
+  type ChangePlace,
+  formatChanges,
+  type SceneChange,
+  type SceneChanges,
+  sceneChanges,
+  type SceneSetting,
+} from './sceneChanges.ts';
+export {
+  clearTape,
+  placeTapeEnd,
+  pointTape,
+  type Tape,
+  tape,
+  tapeLength,
+  type TapeLook,
+  tapeMiddle,
+  tapeNodes,
+} from './tape.ts';
+export {
+  dragPivot,
+  hoverPivot,
+  type Pivot,
+  pivot,
+  type PivotGrab,
+  type PivotHandle,
+  pivotHandleOf,
+  pivotNodes,
+  pressPivot,
+  releasePivot,
+} from './pivot.ts';
+export {
+  cameraAlong,
+  type ViewAxis,
+  viewportAxisOf,
+  viewportGizmoNodes,
+  type ViewportGizmoOptions,
+} from './viewportGizmo.ts';

package/src/kernel/inspect.ts

@@ -0,0 +1,214 @@
+/**
+ * The fields of a value, read from its schema (roadmap, "Beyond parity" 4: an inspector
+ * generated from the scene schemas). The runtime's `Inspector` passes a schema's AST in;
+ * this walks it beside the value and lists what an inspector shows: numbers, text,
+ * switches, choices of literals, colours, vectors, and the rest read-only (a node's
+ * kind, an absent part, a list of children). A tagged union shows the member the value
+ * is; nested structs show their fields under their name.
+ *
+ * The AST is read through the few shapes used here, so the kernel needs no schema
+ * library; colours and vectors are recognised by being the very AST nodes the caller
+ * names, not by field names.
+ *
+ * @module
+ */
+import type { Vec3 } from './description.ts';
+
+/** Where a field is in the value: property names and list indices from the top. */
+export type FieldPath = ReadonlyArray<string | number>;
+
+/** What an inspector's controls produce: a number, text, or a switch's state. */
+export type FieldValue = number | string | boolean;
+
+type Base = { readonly path: FieldPath; readonly label: string };
+
+/** A field as an inspector shows it. */
+export type InspectedField = Base &
+  (
+    | { readonly _tag: 'Number'; readonly value: number }
+    | { readonly _tag: 'Text'; readonly value: string }
+    | { readonly _tag: 'Toggle'; readonly value: boolean }
+    | { readonly _tag: 'Choice'; readonly value: string; readonly options: ReadonlyArray<string> }
+    | { readonly _tag: 'Colour'; readonly value: number }
+    | { readonly _tag: 'Vector'; readonly value: Vec3 }
+    /** Shown, not edited: a kind, an absent part, a list, or what this cannot edit. */
+    | { readonly _tag: 'Fixed'; readonly text: string }
+  );
+
+/** The parts of a schema AST read here (Effect's `SchemaAST`, structurally). */
+export type InspectableAst =
+  | { readonly _tag: 'Suspend'; readonly thunk: () => InspectableAst }
+  | {
+      readonly _tag: 'Objects';
+      readonly propertySignatures: ReadonlyArray<{
+        readonly name: PropertyKey;
+        readonly type: InspectableAst;
+      }>;
+    }
+  | {
+      readonly _tag: 'Arrays';
+      readonly elements: ReadonlyArray<InspectableAst>;
+      readonly rest: ReadonlyArray<InspectableAst>;
+    }
+  | { readonly _tag: 'Union'; readonly types: ReadonlyArray<InspectableAst> }
+  | { readonly _tag: 'Literal'; readonly literal: unknown }
+  | { readonly _tag: 'Number' | 'String' | 'Boolean' | 'Null' }
+  | { readonly _tag: string };
+
+/** AST nodes shown as a colour picker or as three numbers, by identity. */
+export type InspectHints = {
+  readonly colours: ReadonlyArray<unknown>;
+  readonly vectors: ReadonlyArray<unknown>;
+};
+
+const resolve = (ast: InspectableAst): InspectableAst =>
+  ast._tag === 'Suspend' && 'thunk' in ast ? resolve(ast.thunk()) : ast;
+
+const isRecord = (value: unknown): value is Readonly<Record<string, unknown>> =>
+  typeof value === 'object' && value !== null && !Array.isArray(value);
+
+const labelOf = (path: FieldPath): string => String(path.at(-1) ?? 'value');
+
+const literalOf = (ast: InspectableAst): unknown => ('literal' in ast ? ast.literal : undefined);
+
+/** The literal of an object member's `_tag`, if it has one. */
+const tagOf = (ast: InspectableAst): unknown => {
+  const member = resolve(ast);
+  if (!('propertySignatures' in member)) return undefined;
+  const tag = member.propertySignatures.find((property) => property.name === '_tag');
+  return tag === undefined ? undefined : literalOf(resolve(tag.type));
+};
+
+/** The union member `value` is: by its `_tag`, else the non-null one, else the first. */
+const memberFor = (
+  types: ReadonlyArray<InspectableAst>,
+  value: unknown,
+): InspectableAst | undefined => {
+  if (isRecord(value) && '_tag' in value) {
+    const tagged = types.find((member) => tagOf(member) === value['_tag']);
+    if (tagged !== undefined) return tagged;
+  }
+  if (value === null) return types.find((member) => resolve(member)._tag === 'Null');
+  return types.find((member) => resolve(member)._tag !== 'Null') ?? types[0];
+};
+
+const fixed = (path: FieldPath, text: string): InspectedField => ({
+  _tag: 'Fixed',
+  path,
+  label: labelOf(path),
+  text,
+});
+
+const isVector = (value: unknown): value is Vec3 =>
+  Array.isArray(value) && value.length === 3 && value.every((n) => typeof n === 'number');
+
+const walk = (
+  given: InspectableAst,
+  value: unknown,
+  path: FieldPath,
+  hints: InspectHints,
+): ReadonlyArray<InspectedField> => {
+  const ast = resolve(given);
+  const label = labelOf(path);
+  if (hints.colours.includes(ast) && typeof value === 'number') {
+    return [{ _tag: 'Colour', path, label, value }];
+  }
+  if (hints.vectors.includes(ast) && isVector(value)) {
+    return [{ _tag: 'Vector', path, label, value }];
+  }
+  switch (ast._tag) {
+    case 'Number':
+      return typeof value === 'number' ? [{ _tag: 'Number', path, label, value }] : [];
+    case 'String':
+      return typeof value === 'string' ? [{ _tag: 'Text', path, label, value }] : [];
+    case 'Boolean':
+      return typeof value === 'boolean' ? [{ _tag: 'Toggle', path, label, value }] : [];
+    case 'Literal':
+    case 'Null':
+      return [fixed(path, String(value))];
+    case 'Union':
+      return 'types' in ast ? unionFields(ast.types, value, path, hints) : [];
+    case 'Objects':
+      return 'propertySignatures' in ast ? objectFields(ast, value, path, hints) : [];
+    case 'Arrays':
+      return 'elements' in ast ? arrayFields(ast, value, path, hints) : [];
+    default:
+      return [fixed(path, String(value))];
+  }
+};
+
+/** A union of string literals is a choice; any other shows the member the value is. */
+const unionFields = (
+  types: ReadonlyArray<InspectableAst>,
+  value: unknown,
+  path: FieldPath,
+  hints: InspectHints,
+): ReadonlyArray<InspectedField> => {
+  const literals = types.map((member) => literalOf(resolve(member)));
+  if (typeof value === 'string' && literals.every((literal) => typeof literal === 'string')) {
+    return [{ _tag: 'Choice', path, label: labelOf(path), value, options: literals.map(String) }];
+  }
+  const member = memberFor(types, value);
+  return member === undefined ? [fixed(path, String(value))] : walk(member, value, path, hints);
+};
+
+const objectFields = (
+  ast: Extract<InspectableAst, { readonly propertySignatures: unknown }>,
+  value: unknown,
+  path: FieldPath,
+  hints: InspectHints,
+): ReadonlyArray<InspectedField> => {
+  if (!isRecord(value)) return [fixed(path, String(value))];
+  return ast.propertySignatures.flatMap((property) =>
+    propertyFields(String(property.name), property.type, value, path, hints),
+  );
+};
+
+/** One property's fields: none when absent; a tag shows what kind it is, never edited. */
+function propertyFields(
+  name: string,
+  type: InspectableAst,
+  value: Readonly<Record<string, unknown>>,
+  path: FieldPath,
+  hints: InspectHints,
+): ReadonlyArray<InspectedField> {
+  if (!(name in value)) return [];
+  if (name === '_tag') return [fixed([...path, name], String(value[name]))];
+  return walk(type, value[name], [...path, name], hints);
+}
+
+/** A fixed tuple shows each element; a list of any length shows how many it holds. */
+const arrayFields = (
+  ast: Extract<InspectableAst, { readonly elements: unknown }>,
+  value: unknown,
+  path: FieldPath,
+  hints: InspectHints,
+): ReadonlyArray<InspectedField> => {
+  if (!Array.isArray(value)) return [fixed(path, String(value))];
+  if (ast.rest.length > 0) {
+    return [fixed(path, `${value.length} ${value.length === 1 ? 'item' : 'items'}`)];
+  }
+  return ast.elements.flatMap((element, index) =>
+    walk(element, value[index], [...path, index], hints),
+  );
+};
+
+/** The fields of `value` as its schema's AST describes them, in the schema's order. */
+export const inspectFields = (
+  ast: InspectableAst,
+  value: unknown,
+  hints: InspectHints = { colours: [], vectors: [] },
+): ReadonlyArray<InspectedField> => walk(ast, value, [], hints);
+
+/** `value` with `next` at `path`, every object and list on the way copied, not changed. */
+export const setAt = (value: unknown, path: FieldPath, next: unknown): unknown => {
+  const [head, ...rest] = path;
+  if (head === undefined) return next;
+  if (Array.isArray(value) && typeof head === 'number') {
+    return value.map((item, index) => (index === head ? setAt(item, rest, next) : item));
+  }
+  if (isRecord(value) && typeof head === 'string') {
+    return { ...value, [head]: setAt(value[head], rest, next) };
+  }
+  return value;
+};

package/src/kernel/lineGeometry.ts

@@ -0,0 +1,75 @@
+/**
+ * A line's geometry, as Drei's `Line` builds it: three's `LineGeometry` through the points
+ * (or `LineSegmentsGeometry`, a segment for each pair), with a colour per point when it
+ * has them. Shared by the render kits, whose materials differ; the geometry does not.
+ *
+ * @module
+ */
+import { type BufferGeometry, Color, EdgesGeometry } from 'three';
+import type { LineSegmentsGeometry } from 'three/addons/lines/LineSegmentsGeometry.js';
+
+import type { Edges, LineNode, Vec3 } from './description.ts';
+
+/** Whether there is anything to draw: two points for a line, a pair for segments. */
+export const drawable = (line: LineNode): boolean => line.points.length >= 2;
+
+/**
+ * Fills a line's geometry: a `LineGeometry` through the points, or a
+ * `LineSegmentsGeometry` for segments. Too few points give one empty segment (hidden).
+ */
+export const fillLineGeometry = <G extends LineSegmentsGeometry>(
+  geometry: G,
+  line: LineNode,
+): G => {
+  const points = drawable(line) ? line.points : [[0, 0, 0] as const, [0, 0, 0] as const];
+  // Segments come in pairs: an odd last point has nothing to join.
+  const used = line.segments ? points.slice(0, points.length - (points.length % 2)) : points;
+  geometry.setPositions(used.flat());
+  const colors = line.vertexColors;
+  if (colors !== null) {
+    // A colour for every point: the last given carries on, as a line can't skip one.
+    const per = used.map((_, index) => colors[Math.min(index, colors.length - 1)] ?? line.color);
+    geometry.setColors(per.flatMap((color) => new Color(color).toArray()));
+  }
+  return geometry;
+};
+
+/**
+ * The line segments along a geometry's edges where faces meet at more than `threshold`
+ * degrees, as Drei's `Edges` takes them from three's `EdgesGeometry`.
+ */
+export const edgePoints = (geometry: BufferGeometry, threshold: number): ReadonlyArray<Vec3> => {
+  const found = new EdgesGeometry(geometry, threshold);
+  const position = found.getAttribute('position');
+  const points = Array.from(
+    { length: position.count },
+    (_, index): Vec3 => [position.getX(index), position.getY(index), position.getZ(index)],
+  );
+  found.dispose();
+  return points;
+};
+
+/** The line a mesh's edges are drawn as: segments in the mesh's own space. */
+export const edgeLine = (key: string, look: Edges, points: ReadonlyArray<Vec3>): LineNode => ({
+  _tag: 'Line',
+  key: `${key}:edges`,
+  position: [0, 0, 0],
+  rotation: { _tag: 'Fixed', euler: [0, 0, 0] },
+  scale: [1, 1, 1],
+  transition: { _tag: 'Instant' },
+  behaviour: null,
+  interactive: false,
+  points,
+  segments: true,
+  color: look.color,
+  vertexColors: null,
+  width: look.width,
+  worldUnits: look.worldUnits,
+  dashed: look.dashed,
+  dashSize: look.dashSize,
+  gapSize: look.gapSize,
+  dashScale: 1,
+  dashOffset: 0,
+  opacity: look.opacity,
+  transparent: look.transparent,
+});

package/src/kernel/lockstep.ts

@@ -0,0 +1,237 @@
+/**
+ * Lockstep, as data (roadmap, "Beyond parity" 2): peers that run the same `update` stay
+ * in the same state by applying the same inputs in the same order. Time is cut into
+ * turns; every member sends one packet for each turn (empty when it did nothing), and a
+ * turn applies only once every member's packet for it has arrived, its inputs in peer
+ * order. Any transport that delivers each packet to every peer will do: a
+ * `BroadcastChannel` between tabs, a socket relay between machines.
+ *
+ * Membership changes in step too. The leader (the member whose id sorts first) admits
+ * a newcomer with an entry in its own packet; when that turn applies, everywhere at
+ * once, the newcomer becomes a member `lead + 1` turns later, and the leader sends it
+ * the state as it is then (`welcomeDue`), from which it carries on. A member that leaves
+ * says which turn it sent last (`leave`); one that goes quiet is dropped by the leader
+ * from the turn everyone is waiting on, which no one can have applied.
+ *
+ * Pure functions over a value, like the rest of the kernel: an app keeps the `Lockstep`
+ * in its Model, sends what `send` gives it, passes what arrives to `receive`, and
+ * applies what `advance` returns. Use it as a namespace: `Lockstep.make(self)`.
+ *
+ * @module
+ */
+
+/** What a turn carries: an app's input, or the leader admitting a newcomer. */
+export type Entry<I> =
+  | { readonly _tag: 'Input'; readonly input: I }
+  | { readonly _tag: 'Admit'; readonly peer: string };
+
+/** One member's packet for one turn. */
+export type Packet<I> = {
+  readonly peer: string;
+  readonly turn: number;
+  readonly entries: ReadonlyArray<Entry<I>>;
+};
+
+/** A member: the first turn it sends for, and the turn it stopped before, once it has. */
+export type Member = {
+  readonly peer: string;
+  readonly from: number;
+  readonly until: number | null;
+};
+
+export type Lockstep<I> = {
+  readonly self: string;
+  readonly members: ReadonlyArray<Member>;
+  /** The next turn to apply. */
+  readonly turn: number;
+  /** The next turn this peer sends for. */
+  readonly sent: number;
+  /** How many turns ahead of the applied one a peer may send: inputs wait this long. */
+  readonly lead: number;
+  /** Entries waiting for this peer's next packet. */
+  readonly pending: ReadonlyArray<Entry<I>>;
+  /** Packets for turns not yet applied, this peer's own among them. */
+  readonly received: ReadonlyArray<Packet<I>>;
+};
+
+/** An input applied: the turn, and the peer it came from. */
+export type Applied<I> = { readonly turn: number; readonly peer: string; readonly input: I };
+
+const sortedPeers = (members: ReadonlyArray<Member>): ReadonlyArray<Member> =>
+  members.toSorted((a, b) => (a.peer < b.peer ? -1 : a.peer > b.peer ? 1 : 0));
+
+const memberAt = (member: Member, turn: number): boolean =>
+  member.from <= turn && (member.until === null || turn < member.until);
+
+/** The members a turn waits for, in the order their inputs apply. */
+export const membersAt = <I>(state: Lockstep<I>, turn: number): ReadonlyArray<string> =>
+  sortedPeers(state.members.filter((member) => memberAt(member, turn))).map(
+    (member) => member.peer,
+  );
+
+/** The member who admits and drops others at `turn`: the one whose id sorts first. */
+export const leaderAt = <I>(state: Lockstep<I>, turn: number): string | undefined =>
+  membersAt(state, turn)[0];
+
+/** A session of one: this peer alone, from turn 0. */
+export const make = <I>(self: string, lead = 2): Lockstep<I> => ({
+  self,
+  members: [{ peer: self, from: 0, until: null }],
+  turn: 0,
+  sent: 0,
+  lead,
+  pending: [],
+  received: [],
+});
+
+/**
+ * A newcomer's session, from the leader's welcome: the members and the turn it starts
+ * at, with whatever packets it heard while it waited.
+ */
+export const join = <I>(
+  self: string,
+  welcome: {
+    readonly turn: number;
+    readonly members: ReadonlyArray<Member>;
+    readonly lead: number;
+  },
+  heard: ReadonlyArray<Packet<I>> = [],
+): Lockstep<I> => ({
+  self,
+  members: welcome.members,
+  turn: welcome.turn,
+  sent: welcome.turn,
+  lead: welcome.lead,
+  pending: [],
+  received: heard.filter((packet) => packet.turn >= welcome.turn),
+});
+
+/** `input` waits for this peer's next packet. */
+export const submit = <I>(state: Lockstep<I>, input: I): Lockstep<I> => ({
+  ...state,
+  pending: [...state.pending, { _tag: 'Input', input }],
+});
+
+const known = <I>(state: Lockstep<I>, peer: string): boolean =>
+  state.members.some((member) => member.peer === peer && member.until === null) ||
+  state.pending.some((entry) => entry._tag === 'Admit' && entry.peer === peer);
+
+/** The leader asks for `peer` to be admitted; anyone else, or a known peer, changes nothing. */
+export const admit = <I>(state: Lockstep<I>, peer: string): Lockstep<I> =>
+  leaderAt(state, state.sent) !== state.self || known(state, peer)
+    ? state
+    : { ...state, pending: [...state.pending, { _tag: 'Admit', peer }] };
+
+const hasPacket = <I>(state: Lockstep<I>, peer: string, turn: number): boolean =>
+  state.received.some((packet) => packet.peer === peer && packet.turn === turn);
+
+/**
+ * A packet arriving: kept until its turn applies. Ones for turns already applied, from
+ * peers not members then, and second copies are dropped.
+ */
+export const receive = <I>(state: Lockstep<I>, packet: Packet<I>): Lockstep<I> => {
+  if (packet.turn < state.turn || hasPacket(state, packet.peer, packet.turn)) return state;
+  const member = state.members.find((each) => each.peer === packet.peer);
+  if (member !== undefined && !memberAt(member, packet.turn)) return state;
+  return { ...state, received: [...state.received, packet] };
+};
+
+/**
+ * This peer's packet for its next turn, with what is pending, when it is a member then
+ * and not more than `lead` turns ahead; it keeps its own copy.
+ */
+export const send = <I>(
+  state: Lockstep<I>,
+): { readonly state: Lockstep<I>; readonly packet: Packet<I> | undefined } => {
+  const member = state.members.find((each) => each.peer === state.self);
+  const ahead = state.sent >= state.turn + state.lead;
+  if (member === undefined || !memberAt(member, state.sent) || ahead) {
+    return { state, packet: undefined };
+  }
+  const packet: Packet<I> = { peer: state.self, turn: state.sent, entries: state.pending };
+  return {
+    state: { ...state, sent: state.sent + 1, pending: [], received: [...state.received, packet] },
+    packet,
+  };
+};
+
+/** Peers whose packet for the next turn has not arrived: what the session waits on. */
+export const waitingOn = <I>(state: Lockstep<I>): ReadonlyArray<string> =>
+  membersAt(state, state.turn).filter((peer) => !hasPacket(state, peer, state.turn));
+
+/** `peer`'s packet for `turn`, as a list of none or one. */
+const packetsOf = <I>(state: Lockstep<I>, peer: string, turn: number): ReadonlyArray<Packet<I>> =>
+  state.received.filter((packet) => packet.peer === peer && packet.turn === turn);
+
+/** One turn applied, its admissions made members `lead + 1` turns on. */
+const applyTurn = <I>(
+  state: Lockstep<I>,
+): { state: Lockstep<I>; applied: ReadonlyArray<Applied<I>> } => {
+  const turn = state.turn;
+  const packets = membersAt(state, turn).flatMap((peer) => packetsOf(state, peer, turn));
+  const entries = packets.flatMap((packet) =>
+    packet.entries.map((entry) => ({ peer: packet.peer, entry })),
+  );
+  const admitted = entries.flatMap(({ entry }) =>
+    entry._tag === 'Admit' && !state.members.some((member) => member.peer === entry.peer)
+      ? [{ peer: entry.peer, from: turn + state.lead + 1, until: null }]
+      : [],
+  );
+  const applied = entries.flatMap(({ peer, entry }) =>
+    entry._tag === 'Input' ? [{ turn, peer, input: entry.input }] : [],
+  );
+  return {
+    state: {
+      ...state,
+      turn: turn + 1,
+      members: [...state.members, ...admitted],
+      received: state.received.filter((packet) => packet.turn > turn),
+    },
+    applied,
+  };
+};
+
+/**
+ * Every turn whose packets have all arrived, applied in order: the new state, and the
+ * inputs to apply to the app, oldest first and in peer order within a turn.
+ */
+export const advance = <I>(
+  state: Lockstep<I>,
+): { readonly state: Lockstep<I>; readonly applied: ReadonlyArray<Applied<I>> } => {
+  let current = state;
+  const applied: Array<Applied<I>> = [];
+  // A turn with no members waits forever rather than passing unheard.
+  while (membersAt(current, current.turn).length > 0 && waitingOn(current).length === 0) {
+    const next = applyTurn(current);
+    current = next.state;
+    applied.push(...next.applied);
+  }
+  return { state: current, applied };
+};
+
+/**
+ * Newcomers this peer, as leader, should welcome now: those who become members at the
+ * turn about to apply, once every turn before it has (the state is then theirs to start
+ * from). Each is due once: at the moment `before` (the previous turn) is passed.
+ */
+export const welcomeDue = <I>(before: number, state: Lockstep<I>): ReadonlyArray<string> =>
+  state.members
+    .filter((member) => member.from > before && member.from <= state.turn)
+    // The leader of the turn before the newcomer counts: never the newcomer itself, whose
+    // id may sort first.
+    .filter((member) => leaderAt(state, member.from - 1) === state.self)
+    .map((member) => member.peer);
+
+/** This peer leaving: the turn it sent last, for the others to stop waiting after. */
+export const leave = <I>(state: Lockstep<I>): number => state.sent - 1;
+
+/** `peer` stops being a member from `until`; its packets from then are dropped. */
+export const remove = <I>(state: Lockstep<I>, peer: string, until: number): Lockstep<I> => ({
+  ...state,
+  members: state.members.map((member) =>
+    member.peer === peer && (member.until === null || until < member.until)
+      ? { ...member, until }
+      : member,
+  ),
+  received: state.received.filter((packet) => packet.peer !== peer || packet.turn < until),
+});

package/src/kernel/loop.ts

@@ -215,6 +215,11 @@ export const createSceneLoop = (options: SceneLoopOptions): SceneLoop => {
       const views = graph.views();
       if (views.length === 0) renderer.render(graph.scene, graph.camera);
       for (const view of views) renderer.render(graph.scene, view.camera, view.area);
+      const hud = graph.hud();
+      if (hud !== undefined && renderer.renderOver !== undefined) {
+        renderer.renderOver(hud.graph.scene, hud.graph.camera);
+        hud.graph.drawn();
+      }
       graph.drawn();
       measure();
       const overlays = graph.overlays();

package/src/kernel/materials.ts

@@ -108,6 +108,9 @@ const applyBasic = (
   textures: Textures,
 ): void => {
   material.color.setHex(description.color);
+  // Drawn over everything when not depth-tested, and leaving no depth behind.
+  material.depthTest = description.depthTest;
+  material.depthWrite = description.depthTest;
   const mapChanged = applyMap(material, description.map, textures);
   if (applySurface(material, description) || mapChanged) material.needsUpdate = true;
 };