@opsydyn/effect-three 0.2.0 → 0.4.0

package/src/kernel/describeScene.ts

@@ -0,0 +1,224 @@
+/**
+ * What a scene contains, for an assistant (roadmap, "Beyond parity" 3): its camera, its
+ * things with their kind, size, colour and place, its lights, the box they fill and its
+ * staging, as data (`describeScene`) and as a few lines of text (`formatSummary`) an
+ * agent reads before it acts. An agent that reads the Model can describe a scene
+ * without three.js, so sizes come from the geometry's parameters and the node's scale:
+ * close enough to place things beside one another and to frame a shot.
+ *
+ * @module
+ */
+import type {
+  GeometryRef,
+  Rgb,
+  SceneDescription,
+  SceneNode,
+  ShapeGeometry,
+  Vec3,
+} from './description.ts';
+import type { Box } from './orbit.ts';
+
+export type ThingSummary = {
+  readonly key: string;
+  /** The node's kind, with its geometry's for a mesh: `Mesh (Box)`. */
+  readonly kind: string;
+  /** In its parent's space; for things at the top, the world's. */
+  readonly position: Vec3;
+  /** Width, height and depth, from the geometry and scale; `null` when not known. */
+  readonly size: Vec3 | null;
+  readonly colour: Rgb | null;
+  /** The group it is in, `null` at the top. */
+  readonly parent: string | null;
+};
+
+export type LightSummary = {
+  readonly key: string;
+  readonly kind: string;
+  readonly colour: Rgb;
+  readonly intensity: number;
+  readonly position: Vec3 | null;
+};
+
+export type SceneSummary = {
+  readonly camera: {
+    readonly kind: 'Perspective' | 'Orthographic';
+    readonly position: Vec3;
+    readonly lookAt: Vec3;
+  };
+  readonly things: ReadonlyArray<ThingSummary>;
+  readonly lights: ReadonlyArray<LightSummary>;
+  /** The box the top-level things of known size fill, `null` with none. */
+  readonly bounds: Box | null;
+  readonly staging: ReadonlyArray<string>;
+};
+
+/** Width, height and depth of a shape, unscaled; `undefined` for text and shapes. */
+const extentOf = (geometry: ShapeGeometry): Vec3 | undefined => {
+  switch (geometry._tag) {
+    case 'Box':
+    case 'RoundedBox':
+      return [geometry.width, geometry.height, geometry.depth];
+    case 'Sphere':
+      return [geometry.radius * 2, geometry.radius * 2, geometry.radius * 2];
+    case 'Cone':
+      return [geometry.radius * 2, geometry.height, geometry.radius * 2];
+    case 'Cylinder': {
+      const across = Math.max(geometry.radiusTop, geometry.radiusBottom) * 2;
+      return [across, geometry.height, across];
+    }
+    case 'Capsule':
+      return [geometry.radius * 2, geometry.height + geometry.radius * 2, geometry.radius * 2];
+    case 'Torus': {
+      const across = (geometry.radius + geometry.tube) * 2;
+      return [across, across, geometry.tube * 2];
+    }
+    case 'Plane':
+      return [geometry.width, geometry.height, 0];
+    case 'Circle':
+      return [geometry.radius * 2, geometry.radius * 2, 0];
+    case 'Ring':
+      return [geometry.outerRadius * 2, geometry.outerRadius * 2, 0];
+    default:
+      return undefined;
+  }
+};
+
+const scaled = (extent: Vec3, scale: Vec3): Vec3 => [
+  extent[0] * Math.abs(scale[0]),
+  extent[1] * Math.abs(scale[1]),
+  extent[2] * Math.abs(scale[2]),
+];
+
+/** The shape a geometry reference draws: its own, a shared one's, or none (lent). */
+const shapeOf = (
+  geometry: GeometryRef,
+  description: SceneDescription,
+): ShapeGeometry | undefined => {
+  if (geometry._tag === 'LentGeometry') return undefined;
+  if (geometry._tag !== 'SharedGeometry') return geometry;
+  return description.resources.geometries.find((entry) => entry.id === geometry.id)?.geometry;
+};
+
+const sizeOf = (node: SceneNode, description: SceneDescription): Vec3 | null => {
+  if (node._tag !== 'Mesh') return null;
+  const shape = shapeOf(node.geometry, description);
+  const extent = shape === undefined ? undefined : extentOf(shape);
+  return extent === undefined ? null : scaled(extent, node.scale);
+};
+
+const colourOf = (node: SceneNode): Rgb | null =>
+  node._tag === 'Mesh' && 'color' in node.material ? node.material.color : null;
+
+const kindOf = (node: SceneNode): string =>
+  node._tag === 'Mesh' ? `Mesh (${node.geometry._tag})` : node._tag;
+
+const isLight = (node: SceneNode): boolean => node._tag.endsWith('Light');
+
+const lightOf = (node: SceneNode): ReadonlyArray<LightSummary> => {
+  if (!isLight(node) || !('color' in node) || !('intensity' in node)) return [];
+  return [
+    {
+      key: node.key,
+      kind: node._tag,
+      colour: node.color,
+      intensity: node.intensity,
+      position: 'position' in node ? node.position : null,
+    },
+  ];
+};
+
+const thingsIn = (
+  nodes: ReadonlyArray<SceneNode>,
+  parent: string | null,
+  description: SceneDescription,
+): ReadonlyArray<ThingSummary> =>
+  nodes.flatMap((node) => [
+    ...(isLight(node)
+      ? []
+      : [
+          {
+            key: node.key,
+            kind: kindOf(node),
+            position: 'position' in node ? node.position : ([0, 0, 0] as const),
+            size: sizeOf(node, description),
+            colour: colourOf(node),
+            parent,
+          },
+        ]),
+    ...(node._tag === 'Group' ? thingsIn(node.children, node.key, description) : []),
+  ]);
+
+const lightsIn = (nodes: ReadonlyArray<SceneNode>): ReadonlyArray<LightSummary> =>
+  nodes.flatMap((node) => [
+    ...lightOf(node),
+    ...(node._tag === 'Group' ? lightsIn(node.children) : []),
+  ]);
+
+/** The box top-level things of known size fill, each taken as a box round its place. */
+export const thingsBounds = (things: ReadonlyArray<ThingSummary>): Box | null => {
+  const sized = things.filter((thing) => thing.parent === null && thing.size !== null);
+  if (sized.length === 0) return null;
+  const edge = (axis: 0 | 1 | 2, sign: 1 | -1): ReadonlyArray<number> =>
+    sized.map((thing) => thing.position[axis] + sign * ((thing.size?.[axis] ?? 0) / 2));
+  const low = (axis: 0 | 1 | 2) => Math.min(...edge(axis, -1));
+  const high = (axis: 0 | 1 | 2) => Math.max(...edge(axis, 1));
+  return { min: [low(0), low(1), low(2)], max: [high(0), high(1), high(2)] };
+};
+
+const stagingOf = (description: SceneDescription): ReadonlyArray<string> => [
+  ...(description.environment === null ? [] : ['environment lighting']),
+  ...(description.sky === null ? [] : ['sky']),
+  ...(description.render.shadows === 'off' ? [] : [`${description.render.shadows} shadows`]),
+  ...(description.contactShadows === null ? [] : ['contact shadows']),
+  ...description.render.effects.map((effect) => effect._tag.toLowerCase()),
+  ...(description.physics === null ? [] : ['physics']),
+];
+
+/** What `description` contains, for an assistant to read. */
+export const describeScene = (description: SceneDescription): SceneSummary => {
+  const things = thingsIn(description.children, null, description);
+  return {
+    camera: {
+      kind: description.camera._tag,
+      position: description.camera.position,
+      lookAt: description.camera.lookAt,
+    },
+    things,
+    lights: lightsIn(description.children),
+    bounds: thingsBounds(things),
+    staging: stagingOf(description),
+  };
+};
+
+const number = (value: number): string => String(Math.round(value * 100) / 100);
+const point = (at: Vec3): string => `(${at.map(number).join(', ')})`;
+const hex = (colour: Rgb): string => `#${colour.toString(16).padStart(6, '0')}`;
+
+const thingLine = (thing: ThingSummary): string =>
+  [
+    `- ${thing.key}: ${thing.kind}`,
+    thing.size === null ? '' : `, ${thing.size.map(number).join(' × ')}`,
+    thing.colour === null ? '' : `, ${hex(thing.colour)}`,
+    `, at ${point(thing.position)}`,
+    thing.parent === null ? '' : ` in ${thing.parent}`,
+  ].join('');
+
+const lightLine = (light: LightSummary): string =>
+  `- ${light.key}: ${light.kind}, ${hex(light.colour)} × ${number(light.intensity)}${
+    light.position === null ? '' : ` at ${point(light.position)}`
+  }`;
+
+/** The summary as a few lines of text, for a prompt or a tool's answer. */
+export const formatSummary = (summary: SceneSummary): string =>
+  [
+    `Camera: ${summary.camera.kind.toLowerCase()} at ${point(summary.camera.position)}, looking at ${point(summary.camera.lookAt)}`,
+    `Things (${summary.things.length})${
+      summary.bounds === null
+        ? ''
+        : `, within ${point(summary.bounds.min)} to ${point(summary.bounds.max)}`
+    }:`,
+    ...summary.things.map(thingLine),
+    `Lights (${summary.lights.length}):`,
+    ...summary.lights.map(lightLine),
+    `Staging: ${summary.staging.length === 0 ? 'none' : summary.staging.join(', ')}`,
+  ].join('\n');

package/src/kernel/description.ts

@@ -30,6 +30,17 @@ export type Rotation =
       readonly axis: Axis;
       readonly radiansPerSecond: number;
       readonly phase: number;
+    }
+  /**
+   * Faces the scene's camera every frame, as Drei's `Billboard`: the node turns so its
+   * world rotation is the camera's. A locked axis stays at 0 in the node's own Euler
+   * angles (Drei keeps its previous value, which starts at 0).
+   */
+  | {
+      readonly _tag: 'Billboard';
+      readonly lockX: boolean;
+      readonly lockY: boolean;
+      readonly lockZ: boolean;
     };
 
 /** Box geometry parameters. */
@@ -90,6 +101,36 @@ export type CapsuleGeometry = {
   readonly radialSegments: number;
 };
 
+/**
+ * A box with rounded edges and corners, centred, as Drei's `RoundedBox`: a rounded
+ * rectangle extruded and bevelled, with normals creased at `creaseAngle`.
+ */
+export type RoundedBoxGeometry = {
+  readonly _tag: 'RoundedBox';
+  readonly width: number;
+  readonly height: number;
+  readonly depth: number;
+  readonly radius: number;
+  /** Segments in each rounded corner of the outline. */
+  readonly smoothness: number;
+  /** Segments across the bevel, which Drei doubles. */
+  readonly bevelSegments: number;
+  readonly steps: number;
+  /** Faces meeting at more than this angle (radians) keep a hard edge. */
+  readonly creaseAngle: number;
+};
+
+/**
+ * A photo backdrop, as Drei's `Backdrop`: a floor that sweeps up into a wall behind it,
+ * one unit each way (scale it to size). The floor lies along +Z towards the viewer, the
+ * wall rises at its back, and `floor` extends the flat front.
+ */
+export type BackdropGeometry = {
+  readonly _tag: 'Backdrop';
+  readonly floor: number;
+  readonly segments: number;
+};
+
 /** A flat ring (annulus) in the XY plane, facing +Z. */
 export type RingGeometry = {
   readonly _tag: 'Ring';
@@ -150,7 +191,9 @@ export type ShapeGeometry =
   | ConeGeometry
   | CapsuleGeometry
   | RingGeometry
-  | CircleGeometry;
+  | CircleGeometry
+  | RoundedBoxGeometry
+  | BackdropGeometry;
 
 /** Which faces a material draws. */
 export type MaterialSide = 'front' | 'back' | 'double';
@@ -165,6 +208,11 @@ export type BasicMaterial = {
   readonly transparent: boolean;
   readonly side: MaterialSide;
   readonly wireframe: boolean;
+  /**
+   * Whether it is hidden behind what is nearer, as usual; `false` draws it over
+   * everything (and writes no depth), as three's gizmos and helpers are drawn.
+   */
+  readonly depthTest: boolean;
 };
 
 /** A matte (Lambertian) material: cheap per-vertex lighting, no highlights. */
@@ -342,6 +390,24 @@ export type GroupNode = {
    * not tracked (or no session presents). `null` for the group's own transform.
    */
   readonly follow: XrSpace | null;
+  /**
+   * Levels of detail: the group shows one child at a time, chosen by the camera's
+   * distance (Drei's `Detailed`, three's `LOD`), or `null` to show them all.
+   */
+  readonly detail: Detail | null;
+  /** A ribbon behind the group as it moves (Drei's `Trail`), or `null` for none. */
+  readonly trail: Trail | null;
+};
+
+/**
+ * Levels of detail for a group's children, in order: child `i` shows from
+ * `distances[i]` (scene units from the camera, divided by its zoom) until the next level's
+ * distance. `hysteresis` (a fraction) keeps a shown level until the camera is that much
+ * nearer than its distance, so the switch does not flicker at the boundary.
+ */
+export type Detail = {
+  readonly distances: ReadonlyArray<number>;
+  readonly hysteresis: number;
 };
 
 /** The joints of a tracked hand, as WebXR names them (`XRHandJoint`). */
@@ -411,6 +477,47 @@ export type MeshNode = {
   readonly receiveShadow: boolean;
   /** A rigid body simulating the mesh, when the scene has `physics`; `null` for none. */
   readonly body: Body | null;
+  /** Lines along the mesh's hard edges (Drei's `Edges`), or `null` for none. */
+  readonly edges: Edges | null;
+  /** A ribbon behind the mesh as it moves (Drei's `Trail`), or `null` for none. */
+  readonly trail: Trail | null;
+};
+
+/**
+ * A trail behind a moving node, as Drei's `Trail`: `length × 10` points of where it has
+ * been, a new one every `interval` steps (60 a second of scene time) when it has moved at
+ * least `stride`, `decay` of them at a time; drawn as a ribbon facing the camera, a tenth
+ * of `width` wide in scene units, narrowing (`taper`) and fading (`fade`) to the tail.
+ * `local` follows the node's own position rather than its world position, as Drei's
+ * does; the ribbon is drawn in the scene's space either way.
+ */
+export type Trail = {
+  readonly width: number;
+  readonly length: number;
+  readonly decay: number;
+  readonly local: boolean;
+  readonly stride: number;
+  readonly interval: number;
+  readonly color: Rgb;
+  readonly taper: 'none' | 'linear' | 'quadratic';
+  readonly fade: boolean;
+};
+
+/**
+ * Lines along a mesh's edges where its faces meet at more than `threshold` degrees
+ * (three's `EdgesGeometry`, as Drei's `Edges`), drawn as a line (`width` pixels, or scene
+ * units with `worldUnits`) by the render kit. Never picked: hits go to the mesh.
+ */
+export type Edges = {
+  readonly threshold: number;
+  readonly color: Rgb;
+  readonly width: number;
+  readonly worldUnits: boolean;
+  readonly dashed: boolean;
+  readonly dashSize: number;
+  readonly gapSize: number;
+  readonly opacity: number;
+  readonly transparent: boolean;
 };
 
 /**
@@ -656,6 +763,13 @@ export type BorrowedNode = {
   readonly animation: Animation | null;
   /** A rigid body whose colliders are the model's meshes, once it is lent; or `null`. */
   readonly body: Body | null;
+  /**
+   * Every mesh in what it shows casts (receives) shadows, as Drei's `Clone` shorthands;
+   * `false` leaves each mesh's own setting. Set on the lent object itself where it is
+   * shown as lent rather than cloned.
+   */
+  readonly castShadow: boolean;
+  readonly receiveShadow: boolean;
 };
 
 /** Where a label's origin is along its width: an edge, the middle, or a fraction of it. */
@@ -862,8 +976,106 @@ export type ShaderGridNode = {
   readonly side: MaterialSide;
 };
 
+/**
+ * A line through points, as Drei's `Line` (three's fat lines, `Line2`): `width` pixels
+ * wide on screen, or scene units with `worldUnits`; one colour, or one per point; solid
+ * or dashed. With `segments` each pair of points is its own segment (Drei's `Segments`).
+ * A render kit draws it; without one it is an empty group.
+ */
+export type LineNode = {
+  readonly _tag: 'Line';
+  readonly key: string;
+  readonly position: Vec3;
+  readonly rotation: Rotation;
+  readonly scale: Vec3;
+  readonly transition: Transition;
+  readonly behaviour: Behave | null;
+  /** Makes the line pickable, within its width. */
+  readonly interactive: boolean;
+  readonly points: ReadonlyArray<Vec3>;
+  readonly segments: boolean;
+  readonly color: Rgb;
+  /** A colour for each point, blended along the line, or `null` for `color` throughout. */
+  readonly vertexColors: ReadonlyArray<Rgb> | null;
+  readonly width: number;
+  readonly worldUnits: boolean;
+  readonly dashed: boolean;
+  readonly dashSize: number;
+  readonly gapSize: number;
+  readonly dashScale: number;
+  readonly dashOffset: number;
+  readonly opacity: number;
+  readonly transparent: boolean;
+};
+
+/**
+ * Points, drawn by the render kit as round or square dots, Drei's sparkles or its
+ * stars. The look says which, and carries everything needed to draw them: given
+ * points, or a seed that scatters them the same way every time.
+ */
+export type PointsNode = {
+  readonly _tag: 'Points';
+  readonly key: string;
+  readonly position: Vec3;
+  readonly rotation: Rotation;
+  readonly scale: Vec3;
+  readonly transition: Transition;
+  readonly behaviour: Behave | null;
+  readonly look: PointLook;
+};
+
+/**
+ * What points look like:
+ *
+ * - `Dots`: Drei's `Points` with its `PointMaterial` (three's `PointsMaterial`, `round`
+ *   to circles): `size` pixels across, smaller with distance under `sizeAttenuation`;
+ *   one colour or one a point, one size or a factor a point.
+ * - `Sparkles`: Drei's `Sparkles`: `count` glowing motes scattered through a box of
+ *   `scale`, drifting by `noise` at `speed`.
+ * - `Stars`: Drei's `Stars`: `count` stars in a shell from `radius` to `radius + depth`,
+ *   `factor` sizing them, twinkling at `speed`, `fade` softening their edges.
+ */
+export type PointLook =
+  | {
+      readonly _tag: 'Dots';
+      readonly positions: ReadonlyArray<Vec3>;
+      readonly colors: ReadonlyArray<Rgb> | null;
+      readonly sizes: ReadonlyArray<number> | null;
+      readonly color: Rgb;
+      readonly size: number;
+      readonly sizeAttenuation: boolean;
+      readonly round: boolean;
+      readonly opacity: number;
+      readonly transparent: boolean;
+    }
+  | {
+      readonly _tag: 'Sparkles';
+      readonly count: number;
+      readonly speed: number;
+      readonly opacity: number;
+      readonly scale: Vec3;
+      /** Each mote's size, or `null` for Drei's: random, up to 1. */
+      readonly size: number | null;
+      readonly color: Rgb;
+      readonly noise: Vec3;
+      readonly seed: number;
+    }
+  | {
+      readonly _tag: 'Stars';
+      readonly radius: number;
+      readonly depth: number;
+      readonly count: number;
+      readonly factor: number;
+      readonly saturation: number;
+      readonly fade: boolean;
+      readonly speed: number;
+      readonly seed: number;
+    };
+
 /** Any node in a scene. Keys are unique across the whole scene. */
 export type SceneNode =
+  | PointsNode
+  | LineNode
   | GridNode
   | ShaderGridNode
   | GroupNode
@@ -902,6 +1114,8 @@ export type PerspectiveCamera = {
    * (`autoRotated(camera, detail)`). A new position or `lookAt` turns on from there.
    */
   readonly autoRotate: number;
+  /** Shakes the rendered camera (Drei's `CameraShake`), or `null` for none. */
+  readonly shake: CameraShake | null;
 };
 
 /**
@@ -919,6 +1133,28 @@ export type OrthographicCamera = {
   readonly damping: number;
   /** As on `PerspectiveCamera`. */
   readonly autoRotate: number;
+  /** As on `PerspectiveCamera`. */
+  readonly shake: CameraShake | null;
+};
+
+/**
+ * Camera shake, as Drei's `CameraShake`: yaw, pitch and roll of up to `max*` radians,
+ * from noise at `*Frequency`, scaled by `intensity` squared (0 to 1). With `decay` the
+ * intensity falls by `decayRate` a second from when the shake began, so a decaying shake
+ * is a one-off: it begins when it first appears or changes, and `trigger` (a count the
+ * Model bumps) begins the same shake again. Reduced motion holds the camera still.
+ */
+export type CameraShake = {
+  readonly intensity: number;
+  readonly decay: boolean;
+  readonly decayRate: number;
+  readonly maxYaw: number;
+  readonly maxPitch: number;
+  readonly maxRoll: number;
+  readonly yawFrequency: number;
+  readonly pitchFrequency: number;
+  readonly rollFrequency: number;
+  readonly trigger: number;
 };
 
 /** The single active camera. */
@@ -990,6 +1226,33 @@ export type ViewRect = {
  */
 export type View = { readonly key: string; readonly camera: Camera; readonly rect: ViewRect };
 
+/** Where a HUD's origin sits on the canvas: a corner, an edge's middle, or the centre. */
+export type HudAlignment =
+  | 'top-left'
+  | 'top-center'
+  | 'top-right'
+  | 'center-left'
+  | 'center-center'
+  | 'center-right'
+  | 'bottom-left'
+  | 'bottom-center'
+  | 'bottom-right';
+
+/**
+ * Nodes drawn over the scene, Drei's `Hud`, as data: a scene of their own (keys apart
+ * from the scene's), drawn after it with only its depth cleared, through an orthographic
+ * camera measured in CSS pixels, y up, whose origin sits `margin` pixels in from the
+ * `alignment`'s edges (Drei's `GizmoHelper` places its gizmo so). Pointer events reach
+ * its interactive meshes before anything behind them; their points and rays are in the
+ * HUD's own space. Scene lighting and fog do not reach it.
+ */
+export type Hud = {
+  readonly alignment: HudAlignment;
+  /** CSS pixels in from the aligned edges, `[x, y]`: unused for a centred direction. */
+  readonly margin: readonly [number, number];
+  readonly children: ReadonlyArray<SceneNode>;
+};
+
 /**
  * A small scene rendered into a texture that materials use as `map: id`: Drei's
  * `RenderTexture`, as data. Its nodes have their own key namespace and may use the
@@ -1174,6 +1437,8 @@ export type SceneDescription = {
   readonly views: ReadonlyArray<View>;
   /** Scenes rendered into textures for materials to use. */
   readonly renderTextures: ReadonlyArray<RenderTexture>;
+  /** Nodes drawn over the scene, or `null` for none. */
+  readonly hud: Hud | null;
   /** Points to show HTML at, placed every frame the scene draws. */
   readonly overlays: ReadonlyArray<Overlay>;
   /** Image-based lighting and background, or `null` for none. */

package/src/kernel/diff.ts

@@ -31,6 +31,11 @@ import {
   labelMaterialEquals,
   labelTypeEquals,
   xrSpaceEquals,
+  lineLookEquals,
+  edgesEquals,
+  trailEquals,
+  pointLookEquals,
+  detailEquals,
   shaderGridLookEquals,
   instancesEqual,
   materialRefEquals,
@@ -81,8 +86,18 @@ export type Field =
   | 'text'
   /** A shader grid's look: anything but where it is. */
   | 'grid'
+  /** A line's points or look: anything but where it is. */
+  | 'line'
+  /** A mesh's edge lines. */
+  | 'edges'
+  /** A group's or mesh's trail. */
+  | 'trail'
+  /** Points' look: what they are and where, within the node. */
+  | 'look'
   /** The tracked space a group follows. */
-  | 'follow';
+  | 'follow'
+  /** A group's levels of detail. */
+  | 'detail';
 
 /** A single change to apply to the hosted scene graph. */
 export type Op =
@@ -91,6 +106,9 @@ export type Op =
   /** A render texture was created, resized or its scene changed (its own operations). */
   | { readonly _tag: 'UpdateRenderTexture'; readonly id: string; readonly ops: ReadonlyArray<Op> }
   | { readonly _tag: 'RemoveRenderTexture'; readonly id: string }
+  /** The HUD was created or its scene changed (its own operations). */
+  | { readonly _tag: 'UpdateHud'; readonly ops: ReadonlyArray<Op> }
+  | { readonly _tag: 'RemoveHud' }
   | { readonly _tag: 'SetRenderSettings'; readonly settings: RenderSettings }
   | { readonly _tag: 'DefineResources'; readonly resources: ResourceDefinitions }
   | { readonly _tag: 'Create'; readonly node: SceneNode; readonly parent: ParentKey }
@@ -131,6 +149,8 @@ export const changedFields = (
       if (prev.interactive !== next.interactive) fields.push('interactive');
       if (!bodyEquals(prev.body, next.body)) fields.push('body');
       if (!xrSpaceEquals(prev.follow, next.follow)) fields.push('follow');
+      if (!detailEquals(prev.detail, next.detail)) fields.push('detail');
+      if (!trailEquals(prev.trail, next.trail)) fields.push('trail');
       return fields;
     }
     case 'Mesh': {
@@ -146,6 +166,8 @@ export const changedFields = (
       if (prev.castShadow !== next.castShadow) fields.push('castShadow');
       if (prev.receiveShadow !== next.receiveShadow) fields.push('receiveShadow');
       if (!bodyEquals(prev.body, next.body)) fields.push('body');
+      if (!edgesEquals(prev.edges, next.edges)) fields.push('edges');
+      if (!trailEquals(prev.trail, next.trail)) fields.push('trail');
       return fields;
     }
     case 'Instances': {
@@ -175,6 +197,8 @@ export const changedFields = (
       if (!animationEquals(prev.animation, next.animation)) fields.push('animation');
       if (prev.interactive !== next.interactive) fields.push('interactive');
       if (!bodyEquals(prev.body, next.body)) fields.push('body');
+      if (prev.castShadow !== next.castShadow) fields.push('castShadow');
+      if (prev.receiveShadow !== next.receiveShadow) fields.push('receiveShadow');
       return fields;
     }
     case 'Label': {
@@ -233,6 +257,27 @@ export const changedFields = (
       if (!Object.is(prev.shadowBias, next.shadowBias)) fields.push('shadowBias');
       return fields;
     }
+    case 'Points': {
+      if (prev._tag !== 'Points') return undefined;
+      if (!behaviourEquals(prev.behaviour, next.behaviour)) fields.push('behaviour');
+      if (!vec3Equals(prev.position, next.position)) fields.push('position');
+      if (!rotationEquals(prev.rotation, next.rotation)) fields.push('rotation');
+      if (!vec3Equals(prev.scale, next.scale)) fields.push('scale');
+      if (!transitionEquals(prev.transition, next.transition)) fields.push('transition');
+      if (!pointLookEquals(prev.look, next.look)) fields.push('look');
+      return fields;
+    }
+    case 'Line': {
+      if (prev._tag !== 'Line') return undefined;
+      if (!behaviourEquals(prev.behaviour, next.behaviour)) fields.push('behaviour');
+      if (!vec3Equals(prev.position, next.position)) fields.push('position');
+      if (!rotationEquals(prev.rotation, next.rotation)) fields.push('rotation');
+      if (!vec3Equals(prev.scale, next.scale)) fields.push('scale');
+      if (!transitionEquals(prev.transition, next.transition)) fields.push('transition');
+      if (prev.interactive !== next.interactive) fields.push('interactive');
+      if (!lineLookEquals(prev, next)) fields.push('line');
+      return fields;
+    }
     case 'ShaderGrid': {
       if (prev._tag !== 'ShaderGrid') return undefined;
       if (!vec3Equals(prev.position, next.position)) fields.push('position');