@opsydyn/effect-three 0.0.0-stage → 0.1.0

package/src/runtime/errors.ts

@@ -0,0 +1,18 @@
+/**
+ * Typed failures of the scene runtime.
+ *
+ * @module
+ */
+import { Data } from 'effect';
+
+import type { DescriptionError } from '../kernel/index.ts';
+
+/** A scene description was rejected. Nothing was applied. */
+export class InvalidScene extends Data.TaggedError('InvalidScene')<{
+  readonly error: DescriptionError;
+}> {}
+
+/** 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

@@ -0,0 +1,10 @@
+/**
+ * The Effect runtime: lifetimes, services and typed errors around the kernel.
+ *
+ * @module
+ */
+export { InvalidScene, RendererUnavailable } from './errors.ts';
+export * as FrameSource from './FrameSource.ts';
+export * as ResourceRegistry from './ResourceRegistry.ts';
+export * as SceneRuntime from './SceneRuntime.ts';
+export * as SceneSchema from './SceneSchema.ts';

package/src/webgl/contactShadows.ts

@@ -0,0 +1,67 @@
+/**
+ * The WebGL kit's contact shadow materials: three's depth material with its output
+ * replaced by the shadow (as Drei's `ContactShadows`, `bf6f4ad`), and three's horizontal
+ * and vertical blur shaders. The passes themselves are the kernel's.
+ *
+ * @module
+ */
+import { type Color, MeshDepthMaterial, ShaderMaterial } from 'three';
+import { HorizontalBlurShader } from 'three/addons/shaders/HorizontalBlurShader.js';
+import { VerticalBlurShader } from 'three/addons/shaders/VerticalBlurShader.js';
+
+import {
+  type BlurPass,
+  createContactShadowPasses,
+  type ShadowMaterials,
+} from '../kernel/contactShadowPasses.ts';
+import type { SceneRenderer } from '../kernel/renderer.ts';
+import type { ContactShadowPasses, ShadowedScene } from '../kernel/renderKit.ts';
+
+/**
+ * The shadow pass's edit to three's depth shader: its basic-packing output, and the
+ * shadow written instead (darkest where an object touches the plane).
+ */
+const shadowShader = {
+  depthOutput: 'gl_FragColor = vec4( vec3( 1.0 - fragCoordZ ), opacity );',
+  shadowOutput: 'gl_FragColor = vec4( shadowColor * fragCoordZ * 2.0, 1.0 - fragCoordZ );',
+} as const;
+
+const depth = (color: Color): MeshDepthMaterial => {
+  const material = new MeshDepthMaterial();
+  material.depthTest = false;
+  material.depthWrite = false;
+  material.onBeforeCompile = (shader) => {
+    shader.uniforms['shadowColor'] = { value: color };
+    shader.fragmentShader = `uniform vec3 shadowColor;\n${shader.fragmentShader.replace(
+      shadowShader.depthOutput,
+      shadowShader.shadowOutput,
+    )}`;
+  };
+  return material;
+};
+
+/** three's blur shaders: `h` (horizontal) or `v` (vertical) is the step, `tDiffuse` the source. */
+const blurShaders = {
+  horizontal: { shader: HorizontalBlurShader, step: 'h' },
+  vertical: { shader: VerticalBlurShader, step: 'v' },
+} as const;
+
+const blur = (direction: 'horizontal' | 'vertical'): BlurPass => {
+  const { shader, step } = blurShaders[direction];
+  const material = new ShaderMaterial({ ...shader, depthTest: false });
+  return {
+    material,
+    set: (source, amount) => {
+      Reflect.set(material.uniforms['tDiffuse'] ?? {}, 'value', source);
+      Reflect.set(material.uniforms[step] ?? {}, 'value', amount);
+    },
+  };
+};
+
+const webglShadowMaterials: ShadowMaterials = { depth, blur, flippedTargets: false };
+
+/** Creates the contact shadow passes for one scene graph and renderer, in GLSL. */
+export const createContactShadows = (
+  graph: ShadowedScene,
+  renderer: SceneRenderer,
+): ContactShadowPasses => createContactShadowPasses(graph, renderer, webglShadowMaterials);

package/src/webgl/index.ts

@@ -0,0 +1,19 @@
+/**
+ * The WebGL render kit: the scene parts written in GLSL (the sky, the shader grid,
+ * contact shadows), for renderers drawing with three.js's `WebGLRenderer`. The Foldkit
+ * adapter's `webglRendererFactory` carries it; pass it to `createSceneGraph({ kit })`
+ * when using the kernel directly.
+ *
+ * @module
+ */
+import type { RenderKit } from '../kernel/renderKit.ts';
+import { createContactShadows } from './contactShadows.ts';
+import { hostShaderGrid } from './shaderGrid.ts';
+import { hostSky } from './sky.ts';
+
+export const webglKit: RenderKit = {
+  drawsLabels: true,
+  sky: hostSky,
+  shaderGrid: hostShaderGrid,
+  contactShadows: createContactShadows,
+};

package/src/webgl/shaderGrid.ts

@@ -0,0 +1,196 @@
+/**
+ * Drei's `Grid` (`src/core/Grid.tsx` at `bf6f4ad`, MIT; itself after Fyrestar's
+ * `THREE.InfiniteGridHelper` and threlte's `Grid`): a plane whose shader draws thin cell
+ * lines and thicker section lines from screen-space derivatives, fading with distance
+ * from the camera's foot on the plane. An infinite grid stretches the plane by the fade
+ * distance; one that follows the camera slides under it.
+ *
+ * Each frame the material needs the camera drawing it projected onto the grid's plane.
+ * Drei sets that in `useFrame`; here `onBeforeRender` does it, so every view (and each
+ * eye in XR) gets its own camera.
+ *
+ * @module
+ */
+import {
+  BackSide,
+  Color,
+  DoubleSide,
+  FrontSide,
+  Mesh,
+  Plane,
+  PlaneGeometry,
+  ShaderMaterial,
+  type Side,
+  Vector3,
+} from 'three';
+
+import type { MaterialSide, ShaderGridNode } from '../kernel/description.ts';
+import type { HostedShaderGrid } from '../kernel/renderKit.ts';
+
+/** The mesh a shader grid is hosted as. */
+export type HostShaderGrid = Mesh<PlaneGeometry, ShaderMaterial>;
+
+const sides = { front: FrontSide, back: BackSide, double: DoubleSide } satisfies Record<
+  MaterialSide,
+  Side
+>;
+
+const vertexShader = /* glsl */ `
+  uniform vec3 cameraOnPlane;
+  uniform vec3 planeOrigin;
+  uniform float fadeDistance;
+  uniform bool infiniteGrid;
+  uniform bool followCamera;
+
+  varying vec3 gridPosition;
+  varying vec4 worldPosition;
+
+  void main() {
+    // The plane geometry lies in XY; the grid lies in XZ.
+    gridPosition = position.xzy;
+    if (infiniteGrid) gridPosition *= 1.0 + fadeDistance;
+    worldPosition = modelMatrix * vec4(gridPosition, 1.0);
+    if (followCamera) {
+      worldPosition.xyz += cameraOnPlane - planeOrigin;
+      gridPosition = (inverse(modelMatrix) * worldPosition).xyz;
+    }
+    gl_Position = projectionMatrix * viewMatrix * worldPosition;
+  }
+`;
+
+const fragmentShader = /* glsl */ `
+  uniform vec3 cameraOnPlane;
+  uniform float cellSize;
+  uniform float cellThickness;
+  uniform vec3 cellColor;
+  uniform float sectionSize;
+  uniform float sectionThickness;
+  uniform vec3 sectionColor;
+  uniform float fadeDistance;
+  uniform float fadeStrength;
+  uniform float fadeFrom;
+
+  varying vec3 gridPosition;
+  varying vec4 worldPosition;
+
+  // 1 on a line of a grid with this spacing, 0 between, antialiased over a pixel.
+  float lines(float spacing, float thickness) {
+    vec2 at = gridPosition.xz / spacing;
+    vec2 away = abs(fract(at - 0.5) - 0.5) / fwidth(at);
+    return 1.0 - min(min(away.x, away.y) + 1.0 - thickness, 1.0);
+  }
+
+  void main() {
+    float cell = lines(cellSize, cellThickness);
+    float section = lines(sectionSize, sectionThickness);
+    float distanceAway = distance(cameraOnPlane * fadeFrom, worldPosition.xyz);
+    float fade = pow(1.0 - min(distanceAway / fadeDistance, 1.0), fadeStrength);
+    vec3 color = mix(cellColor, sectionColor, min(1.0, sectionThickness * section));
+    float alpha = (cell + section) * fade;
+    alpha = mix(0.75 * alpha, alpha, section);
+    if (alpha <= 0.0) discard;
+    gl_FragColor = vec4(color, alpha);
+    #include <tonemapping_fragment>
+    #include <colorspace_fragment>
+  }
+`;
+
+const up = new Vector3(0, 1, 0);
+const origin = new Vector3();
+const plane = new Plane();
+const cameraPosition = new Vector3();
+
+/** Writes a node's settings into its material's uniforms. */
+const writeUniforms = (material: ShaderMaterial, node: ShaderGridNode): void => {
+  const { uniforms } = material;
+  const set = (name: string, value: unknown): void => {
+    const uniform = uniforms[name];
+    if (uniform !== undefined) uniform.value = value;
+  };
+  set('cellSize', node.cellSize);
+  set('cellThickness', node.cellThickness);
+  set('sectionSize', node.sectionSize);
+  set('sectionThickness', node.sectionThickness);
+  set('fadeDistance', node.fadeDistance);
+  set('fadeStrength', node.fadeStrength);
+  set('fadeFrom', node.fadeFrom);
+  set('infiniteGrid', node.infinite);
+  set('followCamera', node.followCamera);
+  uniforms['cellColor']?.value.setHex(node.cellColor);
+  uniforms['sectionColor']?.value.setHex(node.sectionColor);
+  material.side = sides[node.side];
+};
+
+/** Places the grid and its plane from its description. */
+const writePlacement = (mesh: HostShaderGrid, node: ShaderGridNode): void => {
+  mesh.position.fromArray(node.position);
+  mesh.rotation.fromArray([...node.rotation]);
+};
+
+/** Creates the grid mesh for a node. */
+export const createShaderGrid = (node: ShaderGridNode): HostShaderGrid => {
+  const material = new ShaderMaterial({
+    uniforms: {
+      cellSize: { value: 0 },
+      cellThickness: { value: 0 },
+      cellColor: { value: new Color() },
+      sectionSize: { value: 0 },
+      sectionThickness: { value: 0 },
+      sectionColor: { value: new Color() },
+      fadeDistance: { value: 0 },
+      fadeStrength: { value: 0 },
+      fadeFrom: { value: 0 },
+      infiniteGrid: { value: false },
+      followCamera: { value: false },
+      cameraOnPlane: { value: new Vector3() },
+      planeOrigin: { value: new Vector3() },
+    },
+    vertexShader,
+    fragmentShader,
+    transparent: true,
+  });
+  writeUniforms(material, node);
+  const mesh: HostShaderGrid = new Mesh(new PlaneGeometry(...node.size), material);
+  // The shader moves vertices (infinite, following): the plane's own bounds mean nothing.
+  mesh.frustumCulled = false;
+  writePlacement(mesh, node);
+  mesh.onBeforeRender = (_renderer, _scene, camera) => {
+    plane.setFromNormalAndCoplanarPoint(up, origin).applyMatrix4(mesh.matrixWorld);
+    plane.projectPoint(
+      cameraPosition.setFromMatrixPosition(camera.matrixWorld),
+      material.uniforms['cameraOnPlane']?.value,
+    );
+    material.uniforms['planeOrigin']?.value.set(0, 0, 0).applyMatrix4(mesh.matrixWorld);
+  };
+  return mesh;
+};
+
+/** Applies a new description to a grid mesh. */
+export const updateShaderGrid = (
+  mesh: HostShaderGrid,
+  previous: ShaderGridNode,
+  next: ShaderGridNode,
+): void => {
+  if (previous.size[0] !== next.size[0] || previous.size[1] !== next.size[1]) {
+    mesh.geometry.dispose();
+    mesh.geometry = new PlaneGeometry(...next.size);
+  }
+  writeUniforms(mesh.material, next);
+  writePlacement(mesh, next);
+};
+
+/** Frees the grid's geometry and material, which are its own. */
+export const disposeShaderGrid = (mesh: HostShaderGrid): void => {
+  mesh.geometry.dispose();
+  mesh.material.dispose();
+};
+
+/** The WebGL kit's shader grid: the mesh, updated in place and freed with it. */
+export const hostShaderGrid = (node: ShaderGridNode): HostedShaderGrid => {
+  const mesh = createShaderGrid(node);
+  return {
+    object: mesh,
+    update: (previous, next) => updateShaderGrid(mesh, previous, next),
+    dispose: () => disposeShaderGrid(mesh),
+  };
+};

package/src/webgl/sky.ts

@@ -0,0 +1,42 @@
+/**
+ * The WebGL kit's sky: three.js's `Sky` (Preetham, `addons/objects/Sky.js` at 0.186.1),
+ * as Drei's `Sky` draws it (`bf6f4ad`, `src/core/Sky.tsx`): a box scaled to `distance`
+ * whose shader paints the daylight sky for a sun position. Never picked.
+ *
+ * @module
+ */
+import { Vector3 } from 'three';
+import { Sky as SkyMesh } from 'three/addons/objects/Sky.js';
+
+import type { Sky } from '../kernel/description.ts';
+import type { HostedSky } from '../kernel/renderKit.ts';
+
+/** Writes a sky's description into the mesh's uniforms and scale. */
+const writeSky = (mesh: SkyMesh, description: Sky): void => {
+  const { uniforms } = mesh.material;
+  const set = (name: string, value: unknown): void => {
+    const uniform = uniforms[name];
+    if (uniform !== undefined) uniform.value = value;
+  };
+  set('turbidity', description.turbidity);
+  set('rayleigh', description.rayleigh);
+  set('mieCoefficient', description.mieCoefficient);
+  set('mieDirectionalG', description.mieDirectionalG);
+  set('cloudCoverage', description.clouds);
+  set('sunPosition', new Vector3().fromArray(description.sunPosition));
+  mesh.scale.setScalar(description.distance);
+};
+
+/** Creates the sky mesh; the scene graph adds it and writes its description. */
+export const hostSky = (): HostedSky => {
+  const mesh = new SkyMesh();
+  mesh.raycast = () => undefined;
+  return {
+    object: mesh,
+    update: (description) => writeSky(mesh, description),
+    dispose: () => {
+      mesh.geometry.dispose();
+      mesh.material.dispose();
+    },
+  };
+};

package/src/webgpu/contactShadows.ts

@@ -0,0 +1,83 @@
+/**
+ * The WebGPU kit's contact shadow materials, in TSL: the WebGL kit's shadow-from-depth
+ * output (colour `color · depth · 2`, alpha `1 − depth`) and three's horizontal and
+ * vertical blur shaders (nine taps, their weights). The passes themselves are the
+ * kernel's.
+ *
+ * @module
+ */
+import { type Color, NoBlending, Texture } from 'three';
+import { depth, float, texture, uniform, uv, vec2 } from 'three/tsl';
+import { MeshBasicNodeMaterial } from 'three/webgpu';
+
+import {
+  type BlurPass,
+  createContactShadowPasses,
+  type ShadowMaterials,
+} from '../kernel/contactShadowPasses.ts';
+import type { SceneRenderer } from '../kernel/renderer.ts';
+import type { ContactShadowPasses, ShadowedScene } from '../kernel/renderKit.ts';
+
+/** A material writing exactly what its nodes say: no blending, depth or tone mapping. */
+const plainMaterial = (): MeshBasicNodeMaterial => {
+  const material = new MeshBasicNodeMaterial();
+  material.transparent = true;
+  material.blending = NoBlending;
+  material.depthTest = false;
+  material.depthWrite = false;
+  material.toneMapped = false;
+  return material;
+};
+
+const depthMaterial = (color: Color): MeshBasicNodeMaterial => {
+  const material = plainMaterial();
+  // Darkest where an object touches the plane: `depth` is linear for the orthographic camera.
+  material.colorNode = uniform(color).mul(depth).mul(2);
+  material.opacityNode = float(1).sub(depth);
+  return material;
+};
+
+/** three's `HorizontalBlurShader` and `VerticalBlurShader` taps: offset and weight. */
+const taps = [
+  [-4, 0.051],
+  [-3, 0.0918],
+  [-2, 0.12245],
+  [-1, 0.1531],
+  [0, 0.1633],
+  [1, 0.1531],
+  [2, 0.12245],
+  [3, 0.0918],
+  [4, 0.051],
+] as const;
+
+const blur = (direction: 'horizontal' | 'vertical'): BlurPass => {
+  const source = texture(new Texture());
+  const step = uniform(0);
+  const along = direction === 'horizontal' ? vec2(step, 0) : vec2(0, step);
+  const [first, ...rest] = taps.map(([offset, weight]) =>
+    source.sample(uv().add(along.mul(offset))).mul(weight),
+  );
+  const sum = rest.reduce((total, tap) => total.add(tap), first ?? source);
+  const material = plainMaterial();
+  material.colorNode = sum.rgb;
+  material.opacityNode = sum.a;
+  return {
+    material,
+    set: (map, amount) => {
+      source.value = map;
+      step.value = amount;
+    },
+  };
+};
+
+const webgpuShadowMaterials: ShadowMaterials = {
+  depth: depthMaterial,
+  blur,
+  flippedTargets: true,
+};
+
+/** Creates the contact shadow passes for one scene graph and renderer, in TSL. */
+export const createContactShadows = (
+  graph: ShadowedScene,
+  renderer: SceneRenderer,
+): ContactShadowPasses => createContactShadowPasses(graph, renderer, webgpuShadowMaterials);

package/src/webgpu/index.ts

@@ -0,0 +1,19 @@
+/**
+ * The WebGPU render kit: the scene's shaded parts (the sky, the shader grid, contact
+ * shadows) written in TSL, for three.js's `WebGPURenderer` on either of its backends.
+ * The Foldkit adapter's `webgpuRendererFactory` carries it.
+ *
+ * @module
+ */
+import type { RenderKit } from '../kernel/renderKit.ts';
+import { createContactShadows } from './contactShadows.ts';
+import { hostShaderGrid } from './shaderGrid.ts';
+import { hostSky } from './sky.ts';
+
+export const webgpuKit: RenderKit = {
+  // troika's labels are WebGL materials; real WebGPU rejects their draw calls.
+  drawsLabels: false,
+  sky: hostSky,
+  shaderGrid: hostShaderGrid,
+  contactShadows: createContactShadows,
+};

package/src/webgpu/shaderGrid.ts

@@ -0,0 +1,158 @@
+/**
+ * The WebGPU kit's shader grid: the WebGL kit's grid (Drei's `Grid`, `bf6f4ad`, MIT; after
+ * Fyrestar's `THREE.InfiniteGridHelper` and threlte's `Grid`) written in TSL, so that
+ * three's `WebGPURenderer` can draw it on either backend. Same lines, same fade, same
+ * camera uniforms set in `onBeforeRender`.
+ *
+ * @module
+ */
+import {
+  BackSide,
+  Color,
+  DoubleSide,
+  FrontSide,
+  Mesh,
+  Plane,
+  PlaneGeometry,
+  type Side,
+  Vector3,
+} from 'three';
+import {
+  abs,
+  distance,
+  float,
+  fract,
+  fwidth,
+  min,
+  mix,
+  modelWorldMatrix,
+  modelWorldMatrixInverse,
+  positionGeometry,
+  pow,
+  select,
+  uniform,
+  varying,
+  vec4,
+} from 'three/tsl';
+import { MeshBasicNodeMaterial } from 'three/webgpu';
+
+import type { MaterialSide, ShaderGridNode } from '../kernel/description.ts';
+import type { HostedShaderGrid } from '../kernel/renderKit.ts';
+
+const sides = { front: FrontSide, back: BackSide, double: DoubleSide } satisfies Record<
+  MaterialSide,
+  Side
+>;
+
+/** The grid's uniforms: one node each, written from the description. */
+const createUniforms = () => ({
+  cellSize: uniform(0.5),
+  cellThickness: uniform(0.5),
+  cellColor: uniform(new Color()),
+  sectionSize: uniform(1),
+  sectionThickness: uniform(1),
+  sectionColor: uniform(new Color()),
+  fadeDistance: uniform(100),
+  fadeStrength: uniform(1),
+  fadeFrom: uniform(1),
+  infinite: uniform(0),
+  followCamera: uniform(0),
+  cameraOnPlane: uniform(new Vector3()),
+  planeOrigin: uniform(new Vector3()),
+});
+
+type Uniforms = ReturnType<typeof createUniforms>;
+
+/** The grid's material: the WebGL kit's vertex and fragment shaders, as TSL nodes. */
+const gridMaterial = (u: Uniforms): MeshBasicNodeMaterial => {
+  const material = new MeshBasicNodeMaterial({ transparent: true });
+  // The plane geometry lies in XY; the grid lies in XZ. Infinite grids reach the fade.
+  const lifted = positionGeometry.xzy.mul(
+    select(u.infinite.greaterThan(0.5), u.fadeDistance.add(1), 1),
+  );
+  // Following the camera slides the plane by its foot's offset, in the grid's own space.
+  const shift = modelWorldMatrixInverse.mul(vec4(u.cameraOnPlane.sub(u.planeOrigin), 0)).xyz;
+  const local = select(u.followCamera.greaterThan(0.5), lifted.add(shift), lifted);
+  material.positionNode = local;
+  const gridPosition = varying(local);
+  const worldPosition = varying(modelWorldMatrix.mul(vec4(local, 1)).xyz);
+  // 1 on a line of a grid with this spacing, 0 between, antialiased over a pixel.
+  const lines = (spacing: typeof u.cellSize, thickness: typeof u.cellThickness) => {
+    const at = gridPosition.xz.div(spacing);
+    const away = abs(fract(at.sub(0.5)).sub(0.5)).div(fwidth(at));
+    return float(1).sub(min(min(away.x, away.y).add(1).sub(thickness), 1));
+  };
+  const cell = lines(u.cellSize, u.cellThickness);
+  const section = lines(u.sectionSize, u.sectionThickness);
+  const away = distance(u.cameraOnPlane.mul(u.fadeFrom), worldPosition);
+  const fade = pow(float(1).sub(min(away.div(u.fadeDistance), 1)), u.fadeStrength);
+  const alpha = cell.add(section).mul(fade);
+  material.colorNode = mix(u.cellColor, u.sectionColor, min(1, u.sectionThickness.mul(section)));
+  material.opacityNode = mix(alpha.mul(0.75), alpha, section);
+  // Discard where there is no line, as the WebGL kit's shader does.
+  material.alphaTest = 1e-4;
+  return material;
+};
+
+/** Writes a node's settings into the uniforms and material. */
+const writeUniforms = (
+  u: Uniforms,
+  material: MeshBasicNodeMaterial,
+  node: ShaderGridNode,
+): void => {
+  u.cellSize.value = node.cellSize;
+  u.cellThickness.value = node.cellThickness;
+  u.cellColor.value.setHex(node.cellColor);
+  u.sectionSize.value = node.sectionSize;
+  u.sectionThickness.value = node.sectionThickness;
+  u.sectionColor.value.setHex(node.sectionColor);
+  u.fadeDistance.value = node.fadeDistance;
+  u.fadeStrength.value = node.fadeStrength;
+  u.fadeFrom.value = node.fadeFrom;
+  u.infinite.value = node.infinite ? 1 : 0;
+  u.followCamera.value = node.followCamera ? 1 : 0;
+  material.side = sides[node.side];
+};
+
+const up = new Vector3(0, 1, 0);
+const origin = new Vector3();
+const plane = new Plane();
+const cameraPosition = new Vector3();
+
+/** The WebGPU kit's shader grid: a plane with the grid material, placed and updated. */
+export const hostShaderGrid = (node: ShaderGridNode): HostedShaderGrid => {
+  const u = createUniforms();
+  const material = gridMaterial(u);
+  writeUniforms(u, material, node);
+  const mesh = new Mesh(new PlaneGeometry(...node.size), material);
+  // The shader moves vertices (infinite, following): the plane's own bounds mean nothing.
+  mesh.frustumCulled = false;
+  const place = (next: ShaderGridNode): void => {
+    mesh.position.fromArray(next.position);
+    mesh.rotation.fromArray([...next.rotation]);
+  };
+  place(node);
+  mesh.onBeforeRender = (_renderer, _scene, camera) => {
+    plane.setFromNormalAndCoplanarPoint(up, origin).applyMatrix4(mesh.matrixWorld);
+    plane.projectPoint(
+      cameraPosition.setFromMatrixPosition(camera.matrixWorld),
+      u.cameraOnPlane.value,
+    );
+    u.planeOrigin.value.set(0, 0, 0).applyMatrix4(mesh.matrixWorld);
+  };
+  return {
+    object: mesh,
+    update: (previous, next) => {
+      if (previous.size[0] !== next.size[0] || previous.size[1] !== next.size[1]) {
+        mesh.geometry.dispose();
+        mesh.geometry = new PlaneGeometry(...next.size);
+      }
+      writeUniforms(u, material, next);
+      place(next);
+    },
+    dispose: () => {
+      mesh.geometry.dispose();
+      material.dispose();
+    },
+  };
+};

package/src/webgpu/sky.ts

@@ -0,0 +1,35 @@
+/**
+ * The WebGPU kit's sky: three.js's `SkyMesh` (`addons/objects/SkyMesh.js` at 0.186.1), the
+ * same Preetham sky as the WebGL kit's `Sky`, written in TSL. Never picked.
+ *
+ * @module
+ */
+import { SkyMesh } from 'three/addons/objects/SkyMesh.js';
+
+import type { Sky } from '../kernel/description.ts';
+import type { HostedSky } from '../kernel/renderKit.ts';
+
+/** Writes a sky's description into the mesh's uniforms and scale. */
+const writeSky = (mesh: SkyMesh, description: Sky): void => {
+  mesh.turbidity.value = description.turbidity;
+  mesh.rayleigh.value = description.rayleigh;
+  mesh.mieCoefficient.value = description.mieCoefficient;
+  mesh.mieDirectionalG.value = description.mieDirectionalG;
+  mesh.cloudCoverage.value = description.clouds;
+  mesh.sunPosition.value.fromArray(description.sunPosition);
+  mesh.scale.setScalar(description.distance);
+};
+
+/** Creates the sky mesh; the scene graph adds it and writes its description. */
+export const hostSky = (): HostedSky => {
+  const mesh = new SkyMesh();
+  mesh.raycast = () => undefined;
+  return {
+    object: mesh,
+    update: (description) => writeSky(mesh, description),
+    dispose: () => {
+      mesh.geometry.dispose();
+      mesh.material.dispose();
+    },
+  };
+};