@aethervtt/shard-render 0.0.1 → 0.2.0

package/dist/post-scene.d.ts

@@ -0,0 +1,130 @@
+import { type World } from '@aethervtt/shard-core';
+/** Each post effect's component and settings, by the name `?effects=` uses. */
+export declare const POST_EFFECTS: {
+    readonly bloom: readonly [import("@aethervtt/shard-core").ComponentDef<{
+        readonly intensity: import("@aethervtt/shard-core").FieldType<number, "f32">;
+        readonly threshold: import("@aethervtt/shard-core").FieldType<number, "f32">;
+        readonly knee: import("@aethervtt/shard-core").FieldType<number, "f32">;
+        readonly radius: import("@aethervtt/shard-core").FieldType<number, "f32">;
+    }>, {
+        readonly intensity: 0.12;
+    }];
+    readonly exposure: readonly [import("@aethervtt/shard-core").ComponentDef<{
+        readonly minEv: import("@aethervtt/shard-core").FieldType<number, "f32">;
+        readonly maxEv: import("@aethervtt/shard-core").FieldType<number, "f32">;
+        readonly compensation: import("@aethervtt/shard-core").FieldType<number, "f32">;
+        readonly speedUp: import("@aethervtt/shard-core").FieldType<number, "f32">;
+        readonly speedDown: import("@aethervtt/shard-core").FieldType<number, "f32">;
+        readonly metering: import("@aethervtt/shard-core").FieldType<"average" | "center" | "spot", "u8">;
+    }>, {
+        readonly compensation: 0.5;
+    }];
+    readonly dof: readonly [import("@aethervtt/shard-core").ComponentDef<{
+        readonly mode: import("@aethervtt/shard-core").FieldType<"bokeh" | "gaussian", "u8">;
+        readonly focusDistance: import("@aethervtt/shard-core").FieldType<number, "f32">;
+        readonly maxBlur: import("@aethervtt/shard-core").FieldType<number, "f32">;
+    }>, {
+        readonly focusDistance: 9;
+        readonly maxBlur: 0.012;
+    }];
+    readonly 'motion-blur': readonly [import("@aethervtt/shard-core").ComponentDef<{
+        readonly samples: import("@aethervtt/shard-core").FieldType<number, "u32">;
+        readonly maxBlur: import("@aethervtt/shard-core").FieldType<number, "f32">;
+    }>, {}];
+    readonly taa: readonly [import("@aethervtt/shard-core").ComponentDef<{
+        readonly mode: import("@aethervtt/shard-core").FieldType<"fxaa" | "msaa" | "none" | "taa", "u8">;
+    }>, {
+        readonly mode: 'taa';
+    }];
+    readonly fxaa: readonly [import("@aethervtt/shard-core").ComponentDef<{
+        readonly mode: import("@aethervtt/shard-core").FieldType<"fxaa" | "msaa" | "none" | "taa", "u8">;
+    }>, {
+        readonly mode: 'fxaa';
+    }];
+    readonly noaa: readonly [import("@aethervtt/shard-core").ComponentDef<{
+        readonly mode: import("@aethervtt/shard-core").FieldType<"fxaa" | "msaa" | "none" | "taa", "u8">;
+    }>, {
+        readonly mode: 'none';
+    }];
+    readonly ssao: readonly [import("@aethervtt/shard-core").ComponentDef<{
+        readonly radius: import("@aethervtt/shard-core").FieldType<number, "f32">;
+        readonly intensity: import("@aethervtt/shard-core").FieldType<number, "f32">;
+        readonly quality: import("@aethervtt/shard-core").FieldType<"high" | "low" | "medium", "u8">;
+    }>, {
+        readonly radius: 0.6;
+    }];
+    readonly fog: readonly [import("@aethervtt/shard-core").ComponentDef<{
+        readonly color: import("@aethervtt/shard-core").FieldType<import("@aethervtt/shard-core").Color, "f32">;
+        readonly density: import("@aethervtt/shard-core").FieldType<number, "f32">;
+        readonly heightFalloff: import("@aethervtt/shard-core").FieldType<number, "f32">;
+        readonly start: import("@aethervtt/shard-core").FieldType<number, "f32">;
+        readonly sunScattering: import("@aethervtt/shard-core").FieldType<number, "f32">;
+        readonly mode: import("@aethervtt/shard-core").FieldType<"add" | "default", "u8">;
+    }>, {
+        readonly density: 0.015;
+        readonly heightFalloff: 0.08;
+        readonly sunScattering: 0.6;
+    }];
+    readonly grading: readonly [import("@aethervtt/shard-core").ComponentDef<{
+        readonly temperature: import("@aethervtt/shard-core").FieldType<number, "f32">;
+        readonly tint: import("@aethervtt/shard-core").FieldType<number, "f32">;
+        readonly saturation: import("@aethervtt/shard-core").FieldType<number, "f32">;
+        readonly contrast: import("@aethervtt/shard-core").FieldType<number, "f32">;
+        readonly lift: import("@aethervtt/shard-core").FieldType<import("@aethervtt/shard-core").Vec3, "f32">;
+        readonly gamma: import("@aethervtt/shard-core").FieldType<import("@aethervtt/shard-core").Vec3, "f32">;
+        readonly gain: import("@aethervtt/shard-core").FieldType<import("@aethervtt/shard-core").Vec3, "f32">;
+        readonly lut: import("@aethervtt/shard-core").FieldType<import("@aethervtt/shard-core").AssetRef<"Texture"> | null, "object">;
+    }>, {
+        readonly temperature: 0.1;
+        readonly saturation: 1.1;
+        readonly contrast: 1.05;
+    }];
+    readonly vignette: readonly [import("@aethervtt/shard-core").ComponentDef<{
+        readonly intensity: import("@aethervtt/shard-core").FieldType<number, "f32">;
+        readonly smoothness: import("@aethervtt/shard-core").FieldType<number, "f32">;
+    }>, {
+        readonly intensity: 0.25;
+    }];
+};
+export type PostEffectName = keyof typeof POST_EFFECTS;
+/** The full stack: every effect but the other anti-aliasing modes (TAA is on). */
+export declare const ALL_POST_EFFECTS: readonly PostEffectName[];
+/** The components for effect names; unknown names are skipped. */
+export declare function postEffects(names: readonly string[]): unknown[];
+/** A ball on a circle round the courtyard. */
+export declare const PostSpin: import("@aethervtt/shard-core").ComponentDef<{
+    readonly radius: import("@aethervtt/shard-core").FieldType<number, "f32"> & ((options?: import("@aethervtt/shard-core").FieldOptions<number> | undefined) => import("@aethervtt/shard-core").FieldType<number, "f32">);
+    readonly speed: import("@aethervtt/shard-core").FieldType<number, "f32"> & ((options?: import("@aethervtt/shard-core").FieldOptions<number> | undefined) => import("@aethervtt/shard-core").FieldType<number, "f32">);
+    readonly height: import("@aethervtt/shard-core").FieldType<number, "f32"> & ((options?: import("@aethervtt/shard-core").FieldOptions<number> | undefined) => import("@aethervtt/shard-core").FieldType<number, "f32">);
+}>;
+/** Moves PostSpin balls along their circles by `Time.elapsed`. */
+export declare const postSpin: import("@aethervtt/shard-core").SystemDef<{
+    q: import("@aethervtt/shard-core").Query;
+}>;
+/** The courtyard's moving parts: PostSpin and its system. Add it with the render plugins. */
+export declare const postScenePlugin: import("@aethervtt/shard-runtime").Plugin;
+/** Where the courtyard is looked at from: 9 m out, 2.2 m up. */
+export declare const POST_EYE: [number, number, number];
+export declare const POST_TARGET: [number, number, number];
+/**
+ * The `post-stack` camera path: from POST_EYE, swinging 30° either side of the courtyard's axis
+ * once every 20 s and drifting 1.5 m in and out, always looking at POST_TARGET. `seconds` along it.
+ */
+export declare function postCamera(seconds: number): {
+    eye: [number, number, number];
+    target: [number, number, number];
+};
+/** The camera's lens: a physical exposure, so auto exposure and DoF read real values. */
+export declare const POST_LENS: readonly [import("@aethervtt/shard-core").ComponentDef<{
+    readonly aperture: import("@aethervtt/shard-core").FieldType<number, "f32">;
+    readonly shutterSpeed: import("@aethervtt/shard-core").FieldType<number, "f32">;
+    readonly iso: import("@aethervtt/shard-core").FieldType<number, "f32">;
+    readonly sensorHeight: import("@aethervtt/shard-core").FieldType<number, "f32">;
+    readonly focalLength: import("@aethervtt/shard-core").FieldType<number, "f32">;
+}>, {
+    readonly aperture: 5.6;
+    readonly shutterSpeed: number;
+    readonly iso: 100;
+}];
+/** The courtyard, its sun and sky; the camera is the caller's. */
+export declare function spawnPostScene(world: World): void;

package/dist/post-scene.js

@@ -0,0 +1,164 @@
+import {
+  defineComponent,
+  defineSystem,
+  quat,
+  Rng,
+  t,
+  Update
+} from "@aethervtt/shard-core";
+import { cube, plane, sphere } from "@aethervtt/shard-mesh";
+import { definePlugin, Time } from "@aethervtt/shard-runtime";
+import { Transform } from "@aethervtt/shard-transform";
+import { MaterialAsset, Materials, Meshes } from "./assets.js";
+import { PhysicalCamera } from "./camera.js";
+import { DefaultEnvironment } from "./environment.js";
+import { Mesh3d, MeshMaterial } from "./instances.js";
+import { DirectionalLight } from "./lights.js";
+import {
+  Antialiasing,
+  AutoExposure,
+  Bloom,
+  ColorGrading,
+  DepthOfField,
+  Fog,
+  MotionBlur,
+  Ssao,
+  Vignette
+} from "./post.js";
+const POST_EFFECTS = {
+  bloom: [Bloom, { intensity: 0.12 }],
+  exposure: [AutoExposure, { compensation: 0.5 }],
+  dof: [DepthOfField, { focusDistance: 9, maxBlur: 0.012 }],
+  "motion-blur": [MotionBlur, {}],
+  taa: [Antialiasing, { mode: "taa" }],
+  fxaa: [Antialiasing, { mode: "fxaa" }],
+  noaa: [Antialiasing, { mode: "none" }],
+  ssao: [Ssao, { radius: 0.6 }],
+  fog: [Fog, { density: 0.015, heightFalloff: 0.08, sunScattering: 0.6 }],
+  grading: [ColorGrading, { temperature: 0.1, saturation: 1.1, contrast: 1.05 }],
+  vignette: [Vignette, { intensity: 0.25 }]
+};
+const ALL_POST_EFFECTS = Object.keys(POST_EFFECTS).filter((n) => n !== "fxaa" && n !== "noaa");
+function postEffects(names) {
+  return names.map((n) => POST_EFFECTS[n]).filter((e) => e !== void 0);
+}
+const PostSpin = defineComponent("render/PostSpin", {
+  radius: t.f32,
+  speed: t.f32,
+  height: t.f32
+});
+const postSpin = defineSystem({
+  name: "render/post-spin",
+  setup: (world) => ({ q: world.query({ with: [PostSpin, Transform] }) }),
+  run: ({ q }, world) => {
+    const time = world.resource(Time).elapsed;
+    for (const table of q.tables) {
+      const r = table.column(PostSpin, "radius");
+      const s = table.column(PostSpin, "speed");
+      const h = table.column(PostSpin, "height");
+      const tr = table.column(Transform, "translation");
+      for (let i = 0; i < table.count; i++) {
+        const a = time * s[i];
+        tr[i * 3] = Math.cos(a) * r[i];
+        tr[i * 3 + 1] = h[i];
+        tr[i * 3 + 2] = Math.sin(a) * r[i] - 4;
+      }
+      table.markChanged(Transform);
+    }
+  }
+});
+const postScenePlugin = definePlugin({
+  name: "render/post-scene",
+  dependencies: ["render"],
+  provides: [PostSpin],
+  build(app) {
+    app.addSystems(Update, postSpin);
+  }
+});
+const POST_EYE = [0, 2.2, 9];
+const POST_TARGET = [0, 1.2, -2];
+function postCamera(seconds) {
+  const [tx, ty, tz] = POST_TARGET;
+  const dx = POST_EYE[0] - tx;
+  const dy = POST_EYE[1] - ty;
+  const dz = POST_EYE[2] - tz;
+  const flat = Math.sqrt(dx * dx + dz * dz);
+  const yaw = Math.atan2(dx, dz) + Math.PI / 6 * Math.sin(seconds * 2 * Math.PI / 20);
+  const distance = flat + 1.5 * Math.sin(seconds * 2 * Math.PI / 13);
+  return {
+    eye: [tx + Math.sin(yaw) * distance, ty + dy, tz + Math.cos(yaw) * distance],
+    target: [tx, ty, tz]
+  };
+}
+const POST_LENS = [
+  PhysicalCamera,
+  { aperture: 5.6, shutterSpeed: 1 / 1e3, iso: 100 }
+];
+function spawnPostScene(world) {
+  world.resource(DefaultEnvironment).sky = { turbidity: 2.5 };
+  world.spawn(
+    [DirectionalLight, { illuminance: 1e5, shadows: true }],
+    [Transform, { rotation: quat.fromEuler([0, 0, 0, 1], -0.5, 0.9, 0) }]
+  );
+  const meshes = world.resource(Meshes);
+  const materials = world.resource(Materials);
+  const mat = (v) => materials.add(new MaterialAsset(v));
+  world.spawn(
+    [Mesh3d, { mesh: meshes.add(plane({ size: 400 })) }],
+    [MeshMaterial, { material: mat({ baseColor: [0.35, 0.33, 0.3, 1], roughness: 0.9 }) }],
+    Transform
+  );
+  const block = meshes.add(cube({ size: 1 }));
+  const ball = meshes.add(sphere({ radius: 0.5, segments: 40 }));
+  const rng = new Rng(4);
+  const stone = [
+    mat({ baseColor: [0.7, 0.68, 0.64, 1], roughness: 0.7 }),
+    mat({ baseColor: [0.55, 0.3, 0.22, 1], roughness: 0.8 }),
+    mat({ baseColor: [0.9, 0.8, 0.55, 1], metallic: 1, roughness: 0.3 })
+  ];
+  for (let i = 0; i < 60; i++) {
+    const size = rng.range(0.6, 2.2);
+    world.spawn(
+      [Mesh3d, { mesh: i % 3 === 2 ? ball : block }],
+      [MeshMaterial, { material: stone[i % 3] }],
+      [
+        Transform,
+        {
+          translation: [rng.range(-14, 14), size / 2, rng.range(-30, 2)],
+          rotation: quat.fromEuler([0, 0, 0, 1], 0, rng.float() * 6, 0),
+          scale: [size, size * rng.range(0.6, 2.4), size]
+        }
+      ]
+    );
+  }
+  const neon = (c) => mat({ baseColor: [0, 0, 0, 1], emissive: c, emissiveLuminance: 4e5 });
+  const panels = [neon([1, 0.2, 0.6, 1]), neon([0.2, 0.8, 1, 1]), neon([1, 0.7, 0.2, 1])];
+  for (let i = 0; i < 3; i++) {
+    world.spawn(
+      [Mesh3d, { mesh: block }],
+      [MeshMaterial, { material: panels[i] }],
+      [Transform, { translation: [(i - 1) * 3, 2.5, -5], scale: [2, 0.15, 0.1] }]
+    );
+  }
+  for (let i = 0; i < 4; i++) {
+    world.spawn(
+      [Mesh3d, { mesh: ball }],
+      [MeshMaterial, { material: stone[2] }],
+      [PostSpin, { radius: 3 + i, speed: 1.2 - i * 0.2, height: 0.6 + i * 0.3 }],
+      Transform
+    );
+  }
+}
+export {
+  ALL_POST_EFFECTS,
+  POST_EFFECTS,
+  POST_EYE,
+  POST_LENS,
+  POST_TARGET,
+  PostSpin,
+  postCamera,
+  postEffects,
+  postScenePlugin,
+  postSpin,
+  spawnPostScene
+};

package/dist/post-shaders.js

@@ -69,6 +69,7 @@ fn prepass_output(in: PrepassVertex, n: vec3f) -> PrepassOutput {
 import shard::prepass::common::{ PrepassVertex, PrepassOutput, prepass_vertex, prepass_output, surface_of };
 import shard::pbr::material::pbr_input;
 import shard::pbr::standard::material;
+@if(CUTAWAY) import shard::cutaway::cutaway_clip;
 
 @vertex fn vs(
   @builtin(instance_index) instance_index: u32,
@@ -84,12 +85,20 @@ import shard::pbr::standard::material;
 
 /** Depth, the shaded normal (normal maps included), and velocity. */
 @fragment fn fs(in: PrepassVertex) -> PrepassOutput {
+  @if(CUTAWAY) cutaway_clip(in.world_position, in.clip.xy, in.flags);
   let p = pbr_input(surface_of(in));
   @if(MASK) if (p.alpha < material.alphaCutoff) { discard; }
   return prepass_output(in, p.normal);
+}
+
+/** Baseline (0064): depth alone, for what reads depth when the scene is multisampled. */
+@if(BASELINE) @fragment fn fs_depth(in: PrepassVertex) {
+  @if(CUTAWAY) cutaway_clip(in.world_position, in.clip.xy, in.flags);
+  @if(MASK) if (pbr_input(surface_of(in)).alpha < material.alphaCutoff) { discard; }
 }`,
   "shard::prepass::plain": `
 import shard::prepass::common::{ PrepassVertex, PrepassOutput, prepass_vertex, prepass_output };
+@if(CUTAWAY) import shard::cutaway::cutaway_clip;
 
 @vertex fn vs(
   @builtin(instance_index) instance_index: u32,
@@ -105,13 +114,19 @@ import shard::prepass::common::{ PrepassVertex, PrepassOutput, prepass_vertex, p
 
 /** Materials with their own shading: the geometric normal. */
 @fragment fn fs(in: PrepassVertex) -> PrepassOutput {
+  @if(CUTAWAY) cutaway_clip(in.world_position, in.clip.xy, in.flags);
   return prepass_output(in, normalize(in.world_normal));
+}
+
+/** Baseline (0064): depth alone. */
+@if(BASELINE) @fragment fn fs_depth(in: PrepassVertex) {
+  @if(CUTAWAY) cutaway_clip(in.world_position, in.clip.xy, in.flags);
 }`,
-  "shard::post::fog": `
+  "shard::post::fog::common": `
 import shard::view::view;
 import shard::pbr::lights::directional;
 import shard::pbr::environment::env_irradiance;
-import shard::post::common::{ uv_of, world_at };
+import shard::post::common::world_at;
 
 struct FogParams {
   color: vec4f,
@@ -121,31 +136,27 @@ struct FogParams {
   sun: f32,
 }
 
-@group(1) @binding(0) var input: texture_2d<f32>;
-@group(1) @binding(1) var depth_texture: texture_depth_2d;
-@group(1) @binding(2) var<uniform> fog: FogParams;
-
 const PI: f32 = 3.14159265;
 
 /** Optical depth of exponential height fog along the ray from t0 to t1 (meters). */
-fn optical_depth(y0: f32, dir_y: f32, t0: f32, t1: f32) -> f32 {
+fn optical_depth(fog: FogParams, y0: f32, dir_y: f32, t0: f32, t1: f32) -> f32 {
   let base = fog.density * exp(-fog.falloff * y0);
   let k = fog.falloff * dir_y;
   if (abs(k) < 1e-5) { return base * (t1 - t0); }
   return base * (exp(-k * t0) - exp(-k * t1)) / k;
 }
 
-@fragment fn fs(@builtin(position) frag: vec4f) -> @location(0) vec4f {
-  let px = vec2i(frag.xy);
-  let c = textureLoad(input, px, 0);
-  let depth = textureLoad(depth_texture, px, 0);
-  let uv = uv_of(frag.xy);
+/**
+ * Height fog over color \`c\` at a pixel (\`uv\`, its depth): the fog pass, and the atmosphere's
+ * aerial perspective when a view has both (one pass for the two).
+ */
+fn fog_apply(c: vec4f, uv: vec2f, depth: f32, fog: FogParams) -> vec4f {
   // The background is far away, not infinitely: a floor keeps the ray finite.
   let world = world_at(uv, max(depth, 1e-7));
   let to = world - view.cameraPosition;
   let dist = length(to);
   let dir = to / max(dist, 1e-6);
-  let tau = optical_depth(view.cameraPosition.y, dir.y, fog.start, max(dist, fog.start));
+  let tau = optical_depth(fog, view.cameraPosition.y, dir.y, fog.start, max(dist, fog.start));
   let transmittance = exp(-tau);
   // In-scattering: the sky (environment or ambient), plus the sun through a forward-peaked phase.
   var sky = view.ambient;
@@ -159,7 +170,22 @@ fn optical_depth(y0: f32, dir_y: f32, t0: f32, t1: f32) -> f32 {
     sun = light.color * view.sunTransmittance[0].rgb * mix(1.0 / (4.0 * PI), hg, fog.sun);
   }
   let inscatter = fog.color.rgb * (sky + sun) * view.exposure;
-  return vec4f(c.rgb * transmittance + inscatter * (1.0 - transmittance), c.a);
+  let color = c.rgb * transmittance + inscatter * (1.0 - transmittance);
+  @if(!TRANSPARENT) return vec4f(color, c.a);
+  // Premultiplied (0052): the fog is a layer of its own opacity over what's behind it.
+  @if(TRANSPARENT) return vec4f(color, c.a * transmittance + (1.0 - transmittance));
+}`,
+  "shard::post::fog": `
+import shard::post::common::{ uv_of, post_out };
+import shard::post::fog::common::{ FogParams, fog_apply };
+
+@group(1) @binding(0) var input: texture_2d<f32>;
+@group(1) @binding(1) var depth_texture: texture_depth_2d;
+@group(1) @binding(2) var<uniform> fog: FogParams;
+
+@fragment fn fs(@builtin(position) frag: vec4f) -> @location(0) vec4f {
+  let px = vec2i(frag.xy);
+  return post_out(fog_apply(textureLoad(input, px, 0), uv_of(frag.xy), textureLoad(depth_texture, px, 0), fog));
 }`,
   "shard::post::bloom": `
 import shard::color::luminance;
@@ -174,7 +200,6 @@ struct BloomParams {
 @group(0) @binding(0) var source: texture_2d<f32>;
 @group(0) @binding(1) var source_sampler: sampler;
 @group(0) @binding(2) var<uniform> params: BloomParams;
-@group(0) @binding(3) var scene: texture_2d<f32>;
 
 fn tap(uv: vec2f, dx: f32, dy: f32) -> vec3f {
   return textureSampleLevel(source, source_sampler, uv + vec2f(dx, dy) * params.threshold.zw, 0.0).rgb;
@@ -225,27 +250,24 @@ struct FullscreenInput { @builtin(position) clip: vec4f, @location(0) uv: vec2f
     + (tap(in.uv, -1.0, 0.0) + tap(in.uv, 1.0, 0.0) + tap(in.uv, 0.0, -1.0) + tap(in.uv, 0.0, 1.0)) * 2.0
     + tap(in.uv, -1.0, -1.0) + tap(in.uv, 1.0, -1.0) + tap(in.uv, -1.0, 1.0) + tap(in.uv, 1.0, 1.0);
   return vec4f(c / 16.0, 1.0);
-}
-
-/** The scene plus the glow: mixed (energy-conserving) without a threshold, added with one. */
-@fragment fn composite(in: FullscreenInput) -> @location(0) vec4f {
-  let s = textureLoad(scene, vec2i(in.clip.xy), 0);
-  let glow = textureSampleLevel(source, source_sampler, in.uv, 0.0).rgb / params.mix.y;
-  let c = select(s.rgb + glow * params.mix.x, mix(s.rgb, glow, params.mix.x), params.mix.z > 0.5);
-  return vec4f(c, s.a);
 }`,
   "shard::post::exposure": `
 import shard::view::view;
 import shard::color::luminance;
+@if(BLOOM) import shard::post::glow::add_glow;
 
 struct MeterParams {
   /** EV of bin 0, bins per EV, metering mode, 0. */
   range: vec4f,
+  /** Bloom, which the tonemap adds to the image: intensity, level count, mix (1) or add (0). */
+  glow: vec4f,
 }
 
 @group(0) @binding(1) var input: texture_2d<f32>;
 @group(0) @binding(2) var<storage, read_write> histogram: array<atomic<u32>, 256>;
 @group(0) @binding(3) var<uniform> params: MeterParams;
+@if(BLOOM) @group(0) @binding(4) var bloom: texture_2d<f32>;
+@if(BLOOM) @group(0) @binding(5) var bloom_sampler: sampler;
 
 var<workgroup> local: array<atomic<u32>, 256>;
 
@@ -261,7 +283,12 @@ fn meter(@builtin(global_invocation_id) id: vec3u, @builtin(local_invocation_ind
   let size = textureDimensions(input);
   let px = id.xy * 4u + 2u;
   if (px.x < size.x && px.y < size.y) {
-    let c = textureLoad(input, vec2i(px), 0).rgb;
+    var c = textureLoad(input, vec2i(px), 0).rgb;
+    // What the tonemap shows: the image with bloom's glow over it.
+    @if(BLOOM) {
+      let uv = (vec2f(px) + 0.5) / vec2f(size);
+      c = add_glow(c, textureSampleLevel(bloom, bloom_sampler, uv, 0.0).rgb, params.glow);
+    }
     let l = luminance(c) / max(view.exposure, 1e-20);
     let ev = log2(max(l, 1e-10) * 8.0);
     let bin = u32(clamp((ev - params.range.x) * params.range.y, 0.0, 255.0));
@@ -278,7 +305,7 @@ fn meter(@builtin(global_invocation_id) id: vec3u, @builtin(local_invocation_ind
 }`,
   "shard::post::dof": `
 import shard::view::view;
-import shard::post::common::{ uv_of, world_at, view_depth };
+import shard::post::common::{ uv_of, world_at, view_depth, post_out };
 import shard::color::luminance;
 
 struct DofParams {
@@ -359,11 +386,11 @@ const TAPS: i32 = 48;
   let sharp = textureLoad(input, px, 0);
   let blurred = textureSampleLevel(half_texture, linear_sampler, uv_of(frag.xy), 0.0);
   let t = smoothstep(0.5, 1.5, abs(coc_at(px)));
-  return vec4f(mix(sharp.rgb, blurred.rgb, t), sharp.a);
+  return post_out(vec4f(mix(sharp.rgb, blurred.rgb, t), sharp.a));
 }`,
   "shard::post::motion_blur": `
 import shard::view::view;
-import shard::post::common::{ uv_of, motion };
+import shard::post::common::{ uv_of, motion, post_out };
 
 struct MotionParams {
   /** Shutter fraction of a frame, max blur in pixels, samples, 0. */
@@ -385,14 +412,14 @@ struct MotionParams {
   let cap = motion_params.params.y;
   if (pixels > cap) { v *= cap / pixels; }
   let center = textureLoad(input, px, 0);
-  if (pixels < 0.5) { return center; }
+  if (pixels < 0.5) { return post_out(center); }
   let n = i32(motion_params.params.z);
   var sum = vec3f(0.0);
   for (var i = 0; i < n; i++) {
     let t = (f32(i) + 0.5) / f32(n) - 0.5;
     sum += textureSampleLevel(input, linear_sampler, uv + v * t, 0.0).rgb;
   }
-  return vec4f(sum / f32(n), center.a);
+  return post_out(vec4f(sum / f32(n), center.a));
 }`,
   "shard::post::taa": `
 import shard::view::view;
@@ -411,11 +438,6 @@ struct TaaParams {
 @group(0) @binding(5) var linear_sampler: sampler;
 @group(0) @binding(6) var<uniform> taa: TaaParams;
 
-struct TaaOutput {
-  @location(0) color: vec4f,
-  @location(1) history: vec4f,
-}
-
 fn rgb_to_ycocg(c: vec3f) -> vec3f {
   return vec3f(0.25 * c.r + 0.5 * c.g + 0.25 * c.b, 0.5 * c.r - 0.5 * c.b, -0.25 * c.r + 0.5 * c.g - 0.25 * c.b);
 }
@@ -451,7 +473,7 @@ fn sample_history(uv: vec2f) -> vec3f {
   return max(c / w, vec3f(0.0));
 }
 
-@fragment fn fs(@builtin(position) frag: vec4f) -> TaaOutput {
+@fragment fn fs(@builtin(position) frag: vec4f) -> @location(0) vec4f {
   let px = vec2i(frag.xy);
   let size = vec2i(textureDimensions(input));
   let uv = uv_of(frag.xy);
@@ -461,12 +483,19 @@ fn sample_history(uv: vec2f) -> vec3f {
   var hi = vec3f(-1e20);
   var nearest = 0.0;
   var nearest_px = px;
+  @if(TRANSPARENT) var alpha_lo = 1.0;
+  @if(TRANSPARENT) var alpha_hi = 0.0;
   for (var y = -1; y <= 1; y++) {
     for (var x = -1; x <= 1; x++) {
       let q = clamp(px + vec2i(x, y), vec2i(0), size - 1);
-      let c = rgb_to_ycocg(compress(textureLoad(input, q, 0).rgb));
+      let texel = textureLoad(input, q, 0);
+      let c = rgb_to_ycocg(compress(texel.rgb));
       lo = min(lo, c);
       hi = max(hi, c);
+      @if(TRANSPARENT) {
+        alpha_lo = min(alpha_lo, texel.a);
+        alpha_hi = max(alpha_hi, texel.a);
+      }
       let d = textureLoad(depth_texture, q, 0);
       if (d > nearest) { nearest = d; nearest_px = q; }
     }
@@ -486,9 +515,13 @@ fn sample_history(uv: vec2f) -> vec3f {
   if (m > 1.0) { h = center + offset / m; }
   let blended = mix(ycocg_to_rgb(h), current, alpha);
   let color = expand(max(blended, vec3f(0.0)));
-  var out: TaaOutput;
-  out.color = vec4f(color, 1.0);
-  out.history = vec4f(color, 1.0);
+  // The output is also next frame's history.
+  var out = vec4f(color, 1.0);
+  @if(TRANSPARENT) {
+    // Coverage resolves like color: history clamped to the neighborhood, blended at the same rate.
+    let past = clamp(textureSampleLevel(history, linear_sampler, prev_uv, 0.0).a, alpha_lo, alpha_hi);
+    out.a = mix(past, textureLoad(input, px, 0).a, alpha);
+  }
   return out;
 }`,
   "shard::post::ssao": `
@@ -508,7 +541,6 @@ struct SsaoParams {
 @group(0) @binding(1) var depth_texture: texture_depth_2d;
 @group(0) @binding(2) var normal_texture: texture_2d<f32>;
 @group(0) @binding(3) var<uniform> ssao: SsaoParams;
-@group(0) @binding(4) var half_ao: texture_2d<f32>;
 
 const PI: f32 = 3.14159265;
 
@@ -575,26 +607,6 @@ fn view_position(px: vec2i) -> vec3f {
   }
   let ao = clamp(visibility / f32(dirs), 0.0, 1.0);
   return vec4f(pow(ao, ssao.params.y), -p.z, 0.0, 1.0);
-}
-
-/** Back to full resolution: the four nearest half-resolution texels, weighted by depth match. */
-@fragment fn upsample(@builtin(position) frag: vec4f) -> @location(0) vec4f {
-  let px = vec2i(frag.xy);
-  let depth = textureLoad(depth_texture, px, 0);
-  if (depth <= 0.0) { return vec4f(1.0); }
-  let z = -view_position(px).z;
-  let half_size = vec2i(textureDimensions(half_ao));
-  let base = vec2i(floor((frag.xy - 1.0) * 0.5));
-  var sum = 0.0;
-  var weight = 0.0;
-  for (var k = 0; k < 4; k++) {
-    let q = clamp(base + vec2i(k & 1, k >> 1), vec2i(0), half_size - 1);
-    let s = textureLoad(half_ao, q, 0);
-    let w = 1.0 / (1e-3 + abs(s.y - z) / max(z, 1e-3));
-    sum += s.x * w;
-    weight += w;
-  }
-  return vec4f(sum / max(weight, 1e-6), 0.0, 0.0, 1.0);
 }`
 };
 const FXAA_SHADERS = {
@@ -614,6 +626,13 @@ fn at(uv: vec2f, o: vec2f, texel: vec2f) -> vec3f {
   return textureSampleLevel(input, input_sampler, uv + o * texel, 0.0).rgb;
 }
 
+/** The output at uv: opaque views write alpha 1; premultiplied ones carry it, rgb <= alpha (0052). */
+fn result(uv: vec2f) -> vec4f {
+  let c = textureSampleLevel(input, input_sampler, uv, 0.0);
+  @if(!TRANSPARENT) return vec4f(c.rgb, 1.0);
+  @if(TRANSPARENT) return vec4f(c.rgb, max(c.a, max(c.r, max(c.g, c.b))));
+}
+
 /** FXAA 3.11 (Lottes), quality preset 12: local contrast, edge direction, end search, blend. */
 @fragment fn fs(@builtin(position) frag: vec4f) -> @location(0) vec4f {
   let size = vec2f(textureDimensions(input));
@@ -628,7 +647,10 @@ fn at(uv: vec2f, o: vec2f, texel: vec2f) -> vec3f {
   let lo = min(m, min(min(n, s), min(e, w)));
   let hi = max(m, max(max(n, s), max(e, w)));
   let range = hi - lo;
-  if (range < max(0.0312, hi * 0.125)) { return vec4f(center, 1.0); }
+  if (range < max(0.0312, hi * 0.125)) {
+    @if(!TRANSPARENT) return vec4f(center, 1.0);
+    @if(TRANSPARENT) return result(uv);
+  }
   let nw = luma(at(uv, vec2f(-1.0, -1.0), texel));
   let ne = luma(at(uv, vec2f(1.0, -1.0), texel));
   let sw = luma(at(uv, vec2f(-1.0, 1.0), texel));
@@ -689,7 +711,8 @@ fn at(uv: vec2f, o: vec2f, texel: vec2f) -> vec3f {
   let blend = max(edge_blend, sub_blend);
   var final_uv = uv;
   if (horizontal) { final_uv.y += blend * step_len; } else { final_uv.x += blend * step_len; }
-  return vec4f(textureSampleLevel(input, input_sampler, final_uv, 0.0).rgb, 1.0);
+  @if(!TRANSPARENT) return vec4f(textureSampleLevel(input, input_sampler, final_uv, 0.0).rgb, 1.0);
+  @if(TRANSPARENT) return result(final_uv);
 }`
 };
 export {

package/dist/post.js

@@ -403,9 +403,19 @@ function postAliases(cam, base) {
     let flip = false;
     for (const [name, bit] of HDR_CHAIN) {
       if ((effects & bit) === 0) continue;
+      if (name === "fog" && effects & PostEffect.Atmosphere) continue;
+      if (name === "bloom") {
+        out["bloom-in"] = current;
+        continue;
+      }
+      out[`${name}-in`] = current;
+      if (name === "taa") {
+        out["taa-out"] = "taa-history";
+        current = "taa-history";
+        continue;
+      }
       const next = flip ? "post-b" : "post-a";
       flip = !flip;
-      out[`${name}-in`] = current;
       out[`${name}-out`] = next;
       current = next;
     }

package/dist/projection.d.ts

@@ -0,0 +1,24 @@
+import { type Entity, type World } from '@aethervtt/shard-core';
+/**
+ * Projects a world point to CSS pixels on `camera`'s target (origin top-left). Returns false when
+ * the point is behind the camera (`out` is left unchanged), or the camera hasn't rendered yet.
+ */
+export declare function worldToScreen(world: World, camera: Entity, point: ArrayLike<number>, out: {
+    [index: number]: number;
+}): boolean;
+/**
+ * The world ray under CSS pixel (x, y) of `camera`'s target: its origin on the near plane and its
+ * unit direction. Orthographic rays are parallel, perspective ones start at the near plane.
+ */
+export declare function screenToRay(world: World, camera: Entity, x: number, y: number, outOrigin: {
+    [index: number]: number;
+}, outDir: {
+    [index: number]: number;
+}): void;
+/**
+ * Where the ray under CSS pixel (x, y) meets the horizontal plane `y = planeY` (a floor, a ground
+ * band). Returns false when it doesn't (parallel, or behind the camera).
+ */
+export declare function screenToPlane(world: World, camera: Entity, x: number, y: number, planeY: number, out: {
+    [index: number]: number;
+}): boolean;