@opsydyn/effect-three 0.3.0 → 0.4.0

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

@@ -202,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. */
@@ -378,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,
@@ -411,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. */
@@ -593,6 +623,76 @@ 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, unknown> = Schema.Union([
   Schema.TaggedStruct('Group', {
@@ -609,11 +709,14 @@ export const SceneNode: Schema.Codec<KernelSceneNode, unknown> = Schema.Union([
     detail: absentAsNull(
       Schema.Struct({ distances: Schema.Array(NonNegative), hysteresis: NonNegative }),
     ),
+    trail: Trail,
   }),
   MeshNode,
   InstancesNode,
   BorrowedNode,
   LabelNode,
+  LineNode,
+  PointsNode,
   ShaderGridNode,
   AmbientLightNode,
   DirectionalLightNode,
@@ -715,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({
@@ -794,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),
@@ -986,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),
@@ -1001,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),
@@ -1035,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();
+    },
+  };
+};

package/src/webgl/points.ts

@@ -0,0 +1,205 @@
+/**
+ * The WebGL kit's points: three's `Points` with the materials Drei draws them with
+ * (`bf6f4ad`): its `PointMaterial` (three's `PointsMaterial` with a round mask), and the
+ * shaders of its `Sparkles` and `Stars`, ported as they are. The buffers come from the
+ * kernel (`pointBuffers`), the same for every renderer.
+ *
+ * One change from Drei's `PointMaterial`: it applies tone mapping and the output colour
+ * space a second time after its mask, which brightens the dots; here the mask only sets
+ * the alpha, and fully masked corners are discarded so opaque dots are round too.
+ *
+ * @module
+ */
+import {
+  AdditiveBlending,
+  BufferAttribute,
+  BufferGeometry,
+  Group,
+  type Material,
+  Points,
+  PointsMaterial,
+  ShaderMaterial,
+} from 'three';
+
+import type { PointLook, PointsNode } from '../kernel/description.ts';
+import { type PointBuffers, pointBuffers } from '../kernel/pointBuffers.ts';
+import type { HostedPoints } from '../kernel/renderKit.ts';
+
+/** Drei's `PointMaterial` mask: 1 inside the circle, smoothed over a pixel at its edge. */
+const roundMask = /* glsl */ `
+  vec2 cxy = 2.0 * gl_PointCoord - 1.0;
+  float r = dot(cxy, cxy);
+  float delta = fwidth(r);
+  float mask = 1.0 - smoothstep(1.0 - delta, 1.0 + delta, r);
+  gl_FragColor.a *= mask;
+  if (gl_FragColor.a < 0.01) discard;
+`;
+
+/** Dots: `PointsMaterial` with a size factor a point and, round, Drei's mask. */
+const dotsMaterial = (look: Extract<PointLook, { readonly _tag: 'Dots' }>): Material => {
+  const material = new PointsMaterial({
+    color: 0xffffff,
+    vertexColors: true,
+    size: look.size,
+    sizeAttenuation: look.sizeAttenuation,
+    opacity: look.opacity,
+    transparent: look.transparent,
+  });
+  material.onBeforeCompile = (shader) => {
+    shader.vertexShader = shader.vertexShader
+      .replace('uniform float size;', 'uniform float size;\nattribute float pointSize;')
+      .replace('gl_PointSize = size;', 'gl_PointSize = size * pointSize;');
+    if (look.round) {
+      shader.fragmentShader = shader.fragmentShader.replace(
+        '#include <opaque_fragment>',
+        `#include <opaque_fragment>\n${roundMask}`,
+      );
+    }
+  };
+  material.customProgramCacheKey = () => `effect-three:dots:${look.round}`;
+  return material;
+};
+
+/** Drei's `SparklesImplMaterial`, its shaders as Drei writes them. */
+const sparklesMaterial = (): ShaderMaterial =>
+  new ShaderMaterial({
+    uniforms: { time: { value: 0 }, pixelRatio: { value: 1 } },
+    vertexShader: /* glsl */ `
+      uniform float pixelRatio;
+      uniform float time;
+      attribute float size;
+      attribute float speed;
+      attribute float opacity;
+      attribute vec3 noise;
+      attribute vec3 color;
+      varying vec3 vColor;
+      varying float vOpacity;
+      void main() {
+        vec4 modelPosition = modelMatrix * vec4(position, 1.0);
+        modelPosition.y += sin(time * speed + modelPosition.x * noise.x * 100.0) * 0.2;
+        modelPosition.z += cos(time * speed + modelPosition.x * noise.y * 100.0) * 0.2;
+        modelPosition.x += cos(time * speed + modelPosition.x * noise.z * 100.0) * 0.2;
+        vec4 viewPosition = viewMatrix * modelPosition;
+        vec4 projectionPostion = projectionMatrix * viewPosition;
+        gl_Position = projectionPostion;
+        gl_PointSize = size * 25. * pixelRatio;
+        gl_PointSize *= (1.0 / - viewPosition.z);
+        vColor = color;
+        vOpacity = opacity;
+      }`,
+    fragmentShader: /* glsl */ `
+      varying vec3 vColor;
+      varying float vOpacity;
+      void main() {
+        float distanceToCenter = distance(gl_PointCoord, vec2(0.5));
+        float strength = 0.05 / distanceToCenter - 0.1;
+        gl_FragColor = vec4(vColor, strength * vOpacity);
+        #include <tonemapping_fragment>
+        #include <colorspace_fragment>
+      }`,
+    transparent: true,
+    depthWrite: false,
+  });
+
+/** Drei's `StarfieldMaterial`, its shaders as Drei writes them. */
+const starsMaterial = (fade: boolean): ShaderMaterial =>
+  new ShaderMaterial({
+    uniforms: { time: { value: 0 }, fade: { value: fade ? 1 : 0 } },
+    vertexShader: /* glsl */ `
+      uniform float time;
+      attribute float size;
+      varying vec3 vColor;
+      void main() {
+        vColor = color;
+        vec4 mvPosition = modelViewMatrix * vec4(position, 0.5);
+        gl_PointSize = size * (30.0 / -mvPosition.z) * (3.0 + sin(time + 100.0));
+        gl_Position = projectionMatrix * mvPosition;
+      }`,
+    fragmentShader: /* glsl */ `
+      uniform float fade;
+      varying vec3 vColor;
+      void main() {
+        float opacity = 1.0;
+        if (fade == 1.0) {
+          float d = distance(gl_PointCoord, vec2(0.5, 0.5));
+          opacity = 1.0 / (1.0 + exp(16.0 * (d - 0.25)));
+        }
+        gl_FragColor = vec4(vColor, opacity);
+        #include <tonemapping_fragment>
+        #include <colorspace_fragment>
+      }`,
+    blending: AdditiveBlending,
+    depthWrite: false,
+    transparent: true,
+    vertexColors: true,
+  });
+
+/** The geometry from the kernel's buffers, with the attribute names each shader reads. */
+const pointsGeometry = (buffers: PointBuffers, look: PointLook): BufferGeometry => {
+  const geometry = new BufferGeometry();
+  geometry.setAttribute('position', new BufferAttribute(buffers.positions, 3));
+  geometry.setAttribute('color', new BufferAttribute(buffers.colors, 3));
+  geometry.setAttribute(
+    look._tag === 'Dots' ? 'pointSize' : 'size',
+    new BufferAttribute(buffers.sizes, 1),
+  );
+  if (look._tag === 'Sparkles') {
+    geometry.setAttribute('speed', new BufferAttribute(buffers.speeds, 1));
+    geometry.setAttribute('opacity', new BufferAttribute(buffers.opacities, 1));
+    geometry.setAttribute('noise', new BufferAttribute(buffers.noise, 3));
+  }
+  return geometry;
+};
+
+const materialFor = (look: PointLook): Material => {
+  switch (look._tag) {
+    case 'Dots':
+      return dotsMaterial(look);
+    case 'Sparkles':
+      return sparklesMaterial();
+    case 'Stars':
+      return starsMaterial(look.fade);
+  }
+};
+
+const draw = (look: PointLook): Points<BufferGeometry, Material> => {
+  const buffers = pointBuffers(look);
+  const drawn = new Points(pointsGeometry(buffers, look), materialFor(look));
+  drawn.visible = buffers.count > 0;
+  // Sparkles size by the device's pixel ratio, as Drei's take the viewport's `dpr`.
+  drawn.onBeforeRender = (renderer) => {
+    const material = drawn.material;
+    if (material instanceof ShaderMaterial && material.uniforms['pixelRatio'] !== undefined) {
+      material.uniforms['pixelRatio'].value = renderer.getPixelRatio();
+    }
+  };
+  return drawn;
+};
+
+export const hostPoints = (first: PointsNode): HostedPoints => {
+  const object = new Group();
+  let look = first.look;
+  let drawn = draw(look);
+  object.add(drawn);
+  const free = (): void => {
+    drawn.geometry.dispose();
+    drawn.material.dispose();
+  };
+  return {
+    object,
+    update: (next) => {
+      look = next.look;
+      drawn.removeFromParent();
+      free();
+      drawn = draw(look);
+      object.add(drawn);
+    },
+    tick: (seconds) => {
+      const time =
+        drawn.material instanceof ShaderMaterial ? drawn.material.uniforms['time'] : undefined;
+      // Drei's stars twinkle at `speed`; its sparkles carry their speed a mote.
+      if (time !== undefined) time.value = look._tag === 'Stars' ? seconds * look.speed : seconds;
+    },
+    dispose: free,
+  };
+};

package/src/webgpu/index.ts

@@ -7,6 +7,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 webgpuKit: RenderKit = {
   shading: 'tsl',
   sky: hostSky,
   shaderGrid: hostShaderGrid,
+  line: hostLine,
+  points: hostPoints,
   contactShadows: createContactShadows,
 };