@opsydyn/effect-three 0.2.0 → 0.4.0

package/src/runtime/Inspector.ts

@@ -0,0 +1,43 @@
+/**
+ * An inspector generated from schemas (roadmap, "Beyond parity" 4): the fields of any
+ * value with a schema (a scene node, a material, a Model's own records) as an inspector
+ * shows them, and edits that are checked by the same schema, so an inspector can never
+ * put a value the schema rejects into a Model.
+ *
+ * `fields(schema, value)` lists them (numbers, text, switches, choices, colours, vectors,
+ * and read-only kinds and lists); `edit(schema, value, path, next)` puts `next` at
+ * `path` and decodes the result, failing with the schema's own account of what is
+ * wrong. Colours are fields typed `SceneSchema.Rgb`; vectors, `SceneSchema.Vec3`.
+ *
+ * @module
+ */
+import { Result, Schema } from 'effect';
+
+import {
+  type FieldPath,
+  type InspectableAst,
+  type InspectedField,
+  inspectFields,
+  setAt,
+} from '../kernel/inspect.ts';
+import * as SceneSchema from './SceneSchema.ts';
+
+const hints = { colours: [SceneSchema.Rgb.ast], vectors: [SceneSchema.Vec3.ast] };
+
+/** The AST, read through the shapes the inspector understands. */
+const inspectable = (schema: Schema.Top): InspectableAst => schema.ast;
+
+/** The fields of `value`, as `schema` describes it, in the schema's order. */
+export const fields = (schema: Schema.Top, value: unknown): ReadonlyArray<InspectedField> =>
+  inspectFields(inspectable(schema), value, hints);
+
+/** `value` with `next` at `path`, if `schema` accepts the result; why not, if it does not. */
+export const edit = <A>(
+  schema: Schema.Decoder<A>,
+  value: A,
+  path: FieldPath,
+  next: unknown,
+): Result.Result<A, string> =>
+  Schema.decodeUnknownResult(schema)(setAt(value, path, next)).pipe(
+    Result.mapError((error) => error.message),
+  );

package/src/runtime/SceneFile.ts

@@ -0,0 +1,46 @@
+/**
+ * Scenes saved and loaded as JSON (roadmap, "Beyond parity" 4): a description in a
+ * small versioned envelope, written and read through `SceneSchema`, so a file is either
+ * a well-typed description or a typed failure saying where it is not. Fields added since
+ * a file was written decode at their defaults, as stored descriptions always have.
+ *
+ * Decoding checks shapes, not the scene's own rules: duplicate keys and unknown
+ * behaviours are rejected whole when the scene is applied (`InvalidScene`), against the
+ * behaviours the app has registered.
+ *
+ * @module
+ */
+import { Result, Schema } from 'effect';
+
+import type { SceneDescription } from '../kernel/index.ts';
+import { UnreadableScene } from './errors.ts';
+import * as SceneSchema from './SceneSchema.ts';
+
+/**
+ * A saved scene: what it is (`format`), the envelope's `version` (a later one decodes
+ * older files, migrating them), and the description.
+ */
+export const SceneFile = Schema.Struct({
+  format: Schema.Literal('effect-three/scene'),
+  version: Schema.Literal(1),
+  scene: SceneSchema.SceneDescription,
+});
+export type SceneFile = typeof SceneFile.Type;
+
+const asJson = Schema.fromJsonString(SceneFile, { space: 2 });
+
+/** The scene as the text of a scene file, indented for reading and diffing. */
+export const save = (scene: SceneDescription): string =>
+  Schema.encodeSync(asJson)(SceneFile.make({ format: 'effect-three/scene', version: 1, scene }));
+
+const unreadable = (error: Schema.SchemaError) => new UnreadableScene({ issue: error.message });
+
+/**
+ * The scene a file's text describes, or why it cannot be read: a `Result`, which an
+ * Effect can `yield*` directly.
+ */
+export const read = (text: string): Result.Result<SceneDescription, UnreadableScene> =>
+  Schema.decodeUnknownResult(asJson)(text).pipe(
+    Result.map((file) => file.scene),
+    Result.mapError(unreadable),
+  );

package/src/runtime/SceneSchema.ts

@@ -7,7 +7,7 @@
  *
  * @module
  */
-import { Schema } from 'effect';
+import { Effect, Schema } from 'effect';
 
 import { handJoints, type SceneNode as KernelSceneNode } from '../kernel/description.ts';
 
@@ -21,10 +21,18 @@ export const Vec3 = Schema.Tuple([Schema.Finite, Schema.Finite, Schema.Finite]);
 /** A rotation axis. */
 export const Axis = Schema.Literals(['x', 'y', 'z']);
 
+/**
+ * Fields added after 0.2.0 decode as their builder's default when absent, so descriptions
+ * stored before them (a camera kept in a Model, say) still decode.
+ */
+const absentAsNull = <S extends Schema.Top>(schema: S) =>
+  Schema.NullOr(schema).pipe(Schema.withDecodingDefaultKey(Effect.succeed(null)));
+const absentAsFalse = Schema.Boolean.pipe(Schema.withDecodingDefaultKey(Effect.succeed(false)));
+
 /** A 24-bit RGB colour, for example `0x3366ff`. */
 export const Rgb = Schema.Int.check(Schema.isBetween({ minimum: 0, maximum: 0xffffff }));
 
-/** Model-owned Euler angles, or a spin behaviour that owns the rotation. */
+/** Model-owned Euler angles, a spin behaviour, or facing the camera (a billboard). */
 export const Rotation = Schema.Union([
   Schema.TaggedStruct('Fixed', { euler: Vec3 }),
   Schema.TaggedStruct('Spin', {
@@ -32,6 +40,11 @@ export const Rotation = Schema.Union([
     radiansPerSecond: Schema.Finite,
     phase: Schema.Finite,
   }),
+  Schema.TaggedStruct('Billboard', {
+    lockX: Schema.Boolean,
+    lockY: Schema.Boolean,
+    lockZ: Schema.Boolean,
+  }),
 ]);
 
 /** Box geometry parameters. */
@@ -84,6 +97,24 @@ export const CapsuleGeometry = Schema.TaggedStruct('Capsule', {
   radialSegments: Segments,
 });
 
+/** Rounded box geometry parameters (Drei's `RoundedBox`). */
+export const RoundedBoxGeometry = Schema.TaggedStruct('RoundedBox', {
+  width: Positive,
+  height: Positive,
+  depth: Positive,
+  radius: NonNegative,
+  smoothness: Schema.Int.check(Schema.isGreaterThanOrEqualTo(1)),
+  bevelSegments: Schema.Int.check(Schema.isGreaterThanOrEqualTo(1)),
+  steps: Schema.Int.check(Schema.isGreaterThanOrEqualTo(1)),
+  creaseAngle: NonNegative,
+});
+
+/** Backdrop geometry parameters (Drei's `Backdrop`). */
+export const BackdropGeometry = Schema.TaggedStruct('Backdrop', {
+  floor: NonNegative,
+  segments: Schema.Int.check(Schema.isGreaterThanOrEqualTo(1)),
+});
+
 /** Ring geometry parameters. */
 export const RingGeometry = Schema.TaggedStruct('Ring', {
   innerRadius: NonNegative,
@@ -132,6 +163,8 @@ export const ShapeGeometry = Schema.Union([
   CapsuleGeometry,
   RingGeometry,
   CircleGeometry,
+  RoundedBoxGeometry,
+  BackdropGeometry,
 ]);
 
 /** A registered behaviour, by name, with numeric parameters. */
@@ -169,6 +202,7 @@ export const BasicMaterial = Schema.TaggedStruct('Basic', {
   color: Rgb,
   map: TextureId,
   ...surface,
+  depthTest: Schema.Boolean.pipe(Schema.withDecodingDefaultKey(Effect.succeed(true))),
 });
 
 /** Matte material parameters. */
@@ -345,6 +379,21 @@ export const JointKind = Schema.Union([
   }),
 ]);
 
+/** A trail behind a moving node (Drei's `Trail`). */
+export const Trail = absentAsNull(
+  Schema.Struct({
+    width: NonNegative,
+    length: NonNegative,
+    decay: NonNegative,
+    local: Schema.Boolean,
+    stride: NonNegative,
+    interval: NonNegative,
+    color: Rgb,
+    taper: Schema.Literals(['none', 'linear', 'quadratic']),
+    fade: Schema.Boolean,
+  }),
+);
+
 /** A joint between two bodies. */
 export const Joint = Schema.Struct({
   key: Schema.String,
@@ -378,6 +427,20 @@ export const MeshNode = Schema.TaggedStruct('Mesh', {
   castShadow: Schema.Boolean,
   receiveShadow: Schema.Boolean,
   body: Schema.NullOr(Body),
+  edges: absentAsNull(
+    Schema.Struct({
+      threshold: NonNegative,
+      color: Rgb,
+      width: NonNegative,
+      worldUnits: Schema.Boolean,
+      dashed: Schema.Boolean,
+      dashSize: NonNegative,
+      gapSize: NonNegative,
+      opacity: NonNegative,
+      transparent: Schema.Boolean,
+    }),
+  ),
+  trail: Trail,
 });
 
 /** One instance of an instances node. */
@@ -424,6 +487,8 @@ export const BorrowedNode = Schema.TaggedStruct('Borrowed', {
   behaviour: Schema.NullOr(Behave),
   interactive: Schema.Boolean,
   body: Schema.NullOr(Body),
+  castShadow: absentAsFalse,
+  receiveShadow: absentAsFalse,
 });
 
 /** Distance-field text. */
@@ -558,8 +623,78 @@ export const HemisphereLightNode = Schema.TaggedStruct('HemisphereLight', {
   position: Vec3,
 });
 
+/** What points look like: dots, Drei's sparkles, or its stars. */
+export const PointLook = Schema.Union([
+  Schema.TaggedStruct('Dots', {
+    positions: Schema.Array(Vec3),
+    colors: Schema.NullOr(Schema.Array(Rgb)),
+    sizes: Schema.NullOr(Schema.Array(NonNegative)),
+    color: Rgb,
+    size: NonNegative,
+    sizeAttenuation: Schema.Boolean,
+    round: Schema.Boolean,
+    opacity: NonNegative,
+    transparent: Schema.Boolean,
+  }),
+  Schema.TaggedStruct('Sparkles', {
+    count: Schema.Int.check(Schema.isGreaterThanOrEqualTo(0)),
+    speed: Schema.Finite,
+    opacity: NonNegative,
+    scale: Vec3,
+    size: Schema.NullOr(NonNegative),
+    color: Rgb,
+    noise: Vec3,
+    seed: Schema.Finite,
+  }),
+  Schema.TaggedStruct('Stars', {
+    radius: NonNegative,
+    depth: NonNegative,
+    count: Schema.Int.check(Schema.isGreaterThanOrEqualTo(0)),
+    factor: NonNegative,
+    saturation: NonNegative,
+    fade: Schema.Boolean,
+    speed: Schema.Finite,
+    seed: Schema.Finite,
+  }),
+]);
+
+/** Points (Drei's `Points`, `Sparkles` or `Stars`), drawn by the render kit. */
+export const PointsNode = Schema.TaggedStruct('Points', {
+  key: Schema.String,
+  position: Vec3,
+  rotation: Rotation,
+  scale: Vec3,
+  transition: Transition,
+  behaviour: Schema.NullOr(Behave),
+  look: PointLook,
+});
+
+/** A line through points (Drei's `Line`), drawn by the render kit. */
+export const LineNode = Schema.TaggedStruct('Line', {
+  key: Schema.String,
+  position: Vec3,
+  rotation: Rotation,
+  scale: Vec3,
+  transition: Transition,
+  behaviour: Schema.NullOr(Behave),
+  interactive: Schema.Boolean,
+  points: Schema.Array(Vec3),
+  segments: Schema.Boolean,
+  color: Rgb,
+  vertexColors: Schema.NullOr(Schema.Array(Rgb)),
+  width: NonNegative,
+  worldUnits: Schema.Boolean,
+  dashed: Schema.Boolean,
+  dashSize: NonNegative,
+  gapSize: NonNegative,
+  dashScale: NonNegative,
+  dashOffset: Schema.Finite,
+  opacity: NonNegative,
+  transparent: Schema.Boolean,
+});
+
 /** Any scene node. Groups nest recursively. */
-export const SceneNode: Schema.Codec<KernelSceneNode> = Schema.Union([
+export const SceneNode: Schema.Codec<KernelSceneNode, unknown> = Schema.Union([
   Schema.TaggedStruct('Group', {
     key: Schema.String,
     position: Vec3,
@@ -568,14 +703,20 @@ export const SceneNode: Schema.Codec<KernelSceneNode> = Schema.Union([
     transition: Transition,
     behaviour: Schema.NullOr(Behave),
     interactive: Schema.Boolean,
-    children: Schema.Array(Schema.suspend((): Schema.Codec<KernelSceneNode> => SceneNode)),
+    children: Schema.Array(Schema.suspend((): Schema.Codec<KernelSceneNode, unknown> => SceneNode)),
     body: Schema.NullOr(Body),
     follow: Schema.NullOr(XrSpace),
+    detail: absentAsNull(
+      Schema.Struct({ distances: Schema.Array(NonNegative), hysteresis: NonNegative }),
+    ),
+    trail: Trail,
   }),
   MeshNode,
   InstancesNode,
   BorrowedNode,
   LabelNode,
+  LineNode,
+  PointsNode,
   ShaderGridNode,
   AmbientLightNode,
   DirectionalLightNode,
@@ -588,6 +729,20 @@ export const SceneNode: Schema.Codec<KernelSceneNode> = Schema.Union([
 /** The fraction of the way a camera closes every sixtieth of a second: 0 jumps. */
 const CameraDamping = Schema.Finite.check(Schema.isGreaterThanOrEqualTo(0), Schema.isLessThan(1));
 
+/** Camera shake (Drei's `CameraShake`). */
+export const CameraShake = Schema.Struct({
+  intensity: NonNegative,
+  decay: Schema.Boolean,
+  decayRate: NonNegative,
+  maxYaw: NonNegative,
+  maxPitch: NonNegative,
+  maxRoll: NonNegative,
+  yawFrequency: NonNegative,
+  pitchFrequency: NonNegative,
+  rollFrequency: NonNegative,
+  trigger: Schema.Finite,
+});
+
 /** A perspective camera. */
 export const PerspectiveCamera = Schema.TaggedStruct('Perspective', {
   fov: Schema.Finite.check(Schema.isBetween({ minimum: 0, maximum: 180, exclusiveMinimum: true })),
@@ -597,6 +752,7 @@ export const PerspectiveCamera = Schema.TaggedStruct('Perspective', {
   lookAt: Vec3,
   damping: CameraDamping,
   autoRotate: Schema.Finite,
+  shake: absentAsNull(CameraShake),
 });
 
 /** An orthographic camera; `zoom` is CSS pixels per world unit. */
@@ -608,6 +764,7 @@ export const OrthographicCamera = Schema.TaggedStruct('Orthographic', {
   lookAt: Vec3,
   damping: CameraDamping,
   autoRotate: Schema.Finite,
+  shake: absentAsNull(CameraShake),
 });
 
 /** The active camera. */
@@ -661,6 +818,26 @@ export const RenderTexture = Schema.Struct({
   children: Schema.Array(SceneNode),
 });
 
+/** Where a HUD's origin sits on the canvas. */
+export const HudAlignment = Schema.Literals([
+  'top-left',
+  'top-center',
+  'top-right',
+  'center-left',
+  'center-center',
+  'center-right',
+  'bottom-left',
+  'bottom-center',
+  'bottom-right',
+]);
+
+/** Nodes drawn over the scene, with their own camera in CSS pixels. */
+export const Hud = Schema.Struct({
+  alignment: HudAlignment,
+  margin: Schema.Tuple([Schema.Finite, Schema.Finite]),
+  children: Schema.Array(SceneNode),
+});
+
 /** A complete scene description. */
 /** A point to show HTML at. */
 export const Overlay = Schema.Struct({
@@ -740,6 +917,7 @@ export const SceneDescription = Schema.Struct({
   gestures: Gestures,
   views: Schema.Array(View),
   renderTextures: Schema.Array(RenderTexture),
+  hud: absentAsNull(Hud),
   overlays: Schema.Array(Overlay),
   environment: Schema.NullOr(Environment),
   sky: Schema.NullOr(Sky),
@@ -932,6 +1110,14 @@ export const AutoRotatedDetail = Schema.Struct({
 /** Detail of gesture events. */
 export const GestureDetail = Schema.Struct({ gesture: Gesture });
 
+/** Detail of the end of a gesture that moved: the press's button, modifiers, mesh and view. */
+export const GestureEndDetail = Schema.Struct({
+  button: Schema.Int,
+  modifiers: Modifiers,
+  key: Schema.optionalKey(Schema.String),
+  view: Schema.optionalKey(Schema.String),
+});
+
 /** A pointer interaction with an interactive mesh, or a miss. */
 export const SceneEvent = Schema.Union([
   Schema.TaggedStruct('PointerEnter', HitDetail.fields),
@@ -947,6 +1133,7 @@ export const SceneEvent = Schema.Union([
   Schema.TaggedStruct('Drag', DragDetail.fields),
   Schema.TaggedStruct('DragEnd', DragDetail.fields),
   Schema.TaggedStruct('Gesture', GestureDetail.fields),
+  Schema.TaggedStruct('GestureEnd', GestureEndDetail.fields),
   Schema.TaggedStruct('AutoRotated', AutoRotatedDetail.fields),
   Schema.TaggedStruct('Collision', CollisionDetail.fields),
   Schema.TaggedStruct('Measured', MeasuredDetail.fields),
@@ -981,3 +1168,117 @@ export const DescriptionError = Schema.Union([
   Schema.TaggedStruct('UnknownJointBody', { joint: Schema.String, body: Schema.String }),
   Schema.TaggedStruct('DuplicateRenderTextureId', { id: Schema.String }),
 ]);
+
+/** Where an object is, for a transform gizmo: position, Euler angles and scale. */
+export const Placement = Schema.Struct({ position: Vec3, rotation: Vec3, scale: Vec3 });
+
+const GizmoHandle = Schema.Literals(['x', 'y', 'z', 'xy', 'yz', 'xz', 'xyz']);
+
+/** A transform gizmo's state, for keeping in a Model. */
+export const Gizmo = Schema.Struct({
+  mode: Schema.Literals(['translate', 'rotate', 'scale']),
+  space: Schema.Literals(['world', 'local']),
+  size: Positive,
+  translationSnap: Schema.NullOr(Positive),
+  rotationSnap: Schema.NullOr(Positive),
+  scaleSnap: Schema.NullOr(Positive),
+  showX: Schema.Boolean,
+  showY: Schema.Boolean,
+  showZ: Schema.Boolean,
+  hovered: Schema.NullOr(GizmoHandle),
+  grab: Schema.NullOr(
+    Schema.Struct({
+      handle: GizmoHandle,
+      start: Placement,
+      from: Vec3,
+      plane: Schema.Struct({ normal: Vec3, constant: Schema.Finite }),
+      eye: Vec3,
+      distance: Schema.Finite,
+    }),
+  ),
+});
+
+/** A branching history of `value`s (`History.make`), for a Model that keeps one. */
+export const History = <S extends Schema.Top>(value: S) =>
+  Schema.Struct({
+    entries: Schema.Array(
+      Schema.Struct({
+        id: Schema.Int,
+        parent: Schema.NullOr(Schema.Int),
+        label: Schema.String,
+        value,
+        next: Schema.NullOr(Schema.Int),
+      }),
+    ),
+    current: Schema.Int,
+  });
+
+/** A lockstep entry: an app's input, or the leader admitting a peer. */
+const LockstepEntry = <S extends Schema.Top>(input: S) =>
+  Schema.Union([
+    Schema.TaggedStruct('Input', { input }),
+    Schema.TaggedStruct('Admit', { peer: Schema.String }),
+  ]);
+
+/** One peer's lockstep packet for one turn, carrying the app's `input`s. */
+export const LockstepPacket = <S extends Schema.Top>(input: S) =>
+  Schema.Struct({
+    peer: Schema.String,
+    turn: Schema.Int,
+    entries: Schema.Array(LockstepEntry(input)),
+  });
+
+/** A lockstep member: the first turn it sends for, and the turn it stopped before. */
+export const LockstepMember = Schema.Struct({
+  peer: Schema.String,
+  from: Schema.Int,
+  until: Schema.NullOr(Schema.Int),
+});
+
+/** A lockstep session (`Lockstep.make`) over the app's `input`s, for a Model. */
+export const Lockstep = <S extends Schema.Top>(input: S) =>
+  Schema.Struct({
+    self: Schema.String,
+    members: Schema.Array(LockstepMember),
+    turn: Schema.Int,
+    sent: Schema.Int,
+    lead: Schema.Int,
+    pending: Schema.Array(LockstepEntry(input)),
+    received: Schema.Array(LockstepPacket(input)),
+  });
+
+/** A measuring tape as data (`tape`), for a Model that keeps it. */
+export const Tape = Schema.Struct({
+  from: Schema.NullOr(Vec3),
+  to: Schema.NullOr(Vec3),
+  pointer: Schema.NullOr(Vec3),
+  snap: Schema.NullOr(Positive),
+});
+
+/** A pivot handle: what it does, and its axis. */
+export const PivotHandle = Schema.Literals(
+  (['arrow', 'slider', 'rotator', 'sphere'] as const).flatMap((kind) =>
+    (['x', 'y', 'z'] as const).map((axis) => `${kind}-${axis}` as const),
+  ),
+);
+
+/** Pivot controls as data (`pivot`), for a Model that keeps them. */
+export const Pivot = Schema.Struct({
+  scale: Positive,
+  depthTest: Schema.Boolean,
+  disableAxes: Schema.Boolean,
+  disableSliders: Schema.Boolean,
+  disableRotations: Schema.Boolean,
+  disableScaling: Schema.Boolean,
+  hovered: Schema.NullOr(PivotHandle),
+  grab: Schema.NullOr(
+    Schema.Struct({
+      handle: PivotHandle,
+      start: Placement,
+      point: Vec3,
+      e1: Vec3,
+      e2: Vec3,
+      normal: Vec3,
+    }),
+  ),
+});

package/src/runtime/errors.ts

@@ -12,6 +12,12 @@ export class InvalidScene extends Data.TaggedError('InvalidScene')<{
   readonly error: DescriptionError;
 }> {}
 
+/** A scene file could not be read: not JSON, not a scene file, or not a scene. */
+export class UnreadableScene extends Data.TaggedError('UnreadableScene')<{
+  /** Where and why, as the schema reports it. */
+  readonly issue: string;
+}> {}
+
 /** The renderer backend could not be created (for example, no WebGL2 context). */
 export class RendererUnavailable extends Data.TaggedError('RendererUnavailable')<{
   readonly cause: unknown;

package/src/runtime/index.ts

@@ -3,8 +3,10 @@
  *
  * @module
  */
-export { InvalidScene, RendererUnavailable } from './errors.ts';
+export { InvalidScene, RendererUnavailable, UnreadableScene } from './errors.ts';
 export * as FrameSource from './FrameSource.ts';
+export * as Inspector from './Inspector.ts';
 export * as ResourceRegistry from './ResourceRegistry.ts';
+export * as SceneFile from './SceneFile.ts';
 export * as SceneRuntime from './SceneRuntime.ts';
 export * as SceneSchema from './SceneSchema.ts';

package/src/webgl/index.ts

@@ -8,6 +8,8 @@
  */
 import type { RenderKit } from '../kernel/renderKit.ts';
 import { createContactShadows } from './contactShadows.ts';
+import { hostLine } from './line.ts';
+import { hostPoints } from './points.ts';
 import { hostShaderGrid } from './shaderGrid.ts';
 import { hostSky } from './sky.ts';
 
@@ -15,5 +17,7 @@ export const webglKit: RenderKit = {
   shading: 'webgl',
   sky: hostSky,
   shaderGrid: hostShaderGrid,
+  line: hostLine,
+  points: hostPoints,
   contactShadows: createContactShadows,
 };

package/src/webgl/line.ts

@@ -0,0 +1,66 @@
+/**
+ * The WebGL kit's lines: three's fat lines (`Line2`, `LineSegments2` and `LineMaterial`,
+ * which Drei's `Line` takes from three-stdlib), which size themselves to the viewport
+ * before each draw.
+ *
+ * @module
+ */
+import { Group } from 'three';
+import { Line2 } from 'three/addons/lines/Line2.js';
+import { LineGeometry } from 'three/addons/lines/LineGeometry.js';
+import { LineMaterial } from 'three/addons/lines/LineMaterial.js';
+import { LineSegments2 } from 'three/addons/lines/LineSegments2.js';
+import { LineSegmentsGeometry } from 'three/addons/lines/LineSegmentsGeometry.js';
+
+import type { LineNode } from '../kernel/description.ts';
+import { drawable, fillLineGeometry } from '../kernel/lineGeometry.ts';
+import type { HostedLine } from '../kernel/renderKit.ts';
+
+/** The material's look from the description; vertex colours want white, as Drei sets. */
+const style = (material: LineMaterial, line: LineNode): void => {
+  material.color.setHex(line.vertexColors === null ? line.color : 0xffffff);
+  if (material.vertexColors !== (line.vertexColors !== null)) {
+    material.vertexColors = line.vertexColors !== null;
+    material.needsUpdate = true;
+  }
+  material.linewidth = line.width;
+  material.worldUnits = line.worldUnits;
+  material.dashed = line.dashed;
+  material.dashSize = line.dashSize;
+  material.gapSize = line.gapSize;
+  material.dashScale = line.dashScale;
+  material.dashOffset = line.dashOffset;
+  material.opacity = line.opacity;
+  material.transparent = line.transparent;
+};
+
+const draw = (line: LineNode, material: LineMaterial): LineSegments2 => {
+  const drawn = line.segments
+    ? new LineSegments2(fillLineGeometry(new LineSegmentsGeometry(), line), material)
+    : new Line2(fillLineGeometry(new LineGeometry(), line), material);
+  drawn.computeLineDistances();
+  drawn.visible = drawable(line);
+  return drawn;
+};
+
+export const hostLine = (first: LineNode): HostedLine => {
+  const object = new Group();
+  const material = new LineMaterial();
+  style(material, first);
+  let drawn = draw(first, material);
+  object.add(drawn);
+  return {
+    object,
+    update: (next) => {
+      style(material, next);
+      drawn.removeFromParent();
+      drawn.geometry.dispose();
+      drawn = draw(next, material);
+      object.add(drawn);
+    },
+    dispose: () => {
+      drawn.geometry.dispose();
+      material.dispose();
+    },
+  };
+};