@aethervtt/shard-render 0.1.0 → 0.2.1

package/dist/ablation.d.ts

@@ -0,0 +1,74 @@
+import { type World } from '@aethervtt/shard-core';
+/**
+ * Per-pass GPU cost by ablation (0075). On tile-based GPUs passes overlap and a pass's timestamps
+ * include waiting for earlier work, so per-pass times add up to more than the frame. `gpu:frame`
+ * (first pass start to last pass end) stays true, so a pass's cost is how much `gpu:frame` drops
+ * with the pass disabled.
+ */
+export interface AblationOptions {
+    /** Render-graph nodes to measure, each on its own. */
+    passes: readonly string[];
+    /** Frames measured per pass and round (the median is kept). Default 120. */
+    frames?: number;
+    /** Rounds, each measuring every pass and the baseline; the median over rounds is kept. Default 5. */
+    rounds?: number;
+    /** Frames dropped after each change, while timings of the previous state land. Default 4. */
+    settle?: number;
+    /** Also measure every pass disabled at once. */
+    together?: boolean;
+    /**
+     * Names in `passes` that stand for several nodes, disabled together (0075's scenario tests ablate
+     * a slice: every node whose `gpu:<node>` its key covers).
+     */
+    groups?: Readonly<Record<string, readonly string[]>>;
+}
+export interface PassCost {
+    /** The node, or every node joined with '+' for `together`. */
+    pass: string;
+    /** Median over rounds of baseline `gpu:frame` minus `gpu:frame` with the pass disabled, in ms. */
+    ms: number;
+    /** Each round's difference. */
+    rounds: number[];
+}
+export interface AblationResult {
+    /** Median `gpu:frame` with every pass enabled, in ms. */
+    frameMs: number;
+    passes: PassCost[];
+    /** Every pass disabled at once, with `together`. */
+    together?: PassCost;
+    frames: number;
+    rounds: number;
+    /** GPU frame timings read, all states together. */
+    samples: number;
+}
+export interface PassCostsData {
+    /**
+     * The latest ablation in this app, and when it finished (`Time.elapsed`, s). The `perf` overlay
+     * and the playground HUD rank passes by it where their timestamps overlap (0075).
+     */
+    latest: (AblationResult & {
+        at: number;
+    }) | undefined;
+}
+/** The latest `perf.ablate` result, where the overlay, the HUD and `perf.describe` read it. */
+export declare const PassCosts: import("@aethervtt/shard-core").ResourceDef<PassCostsData>;
+/** How a measurement drives the app: what to disable, and one frame's `gpu:frame`. */
+export interface AblationDriver {
+    disable(passes: readonly string[]): void;
+    /** Renders a frame and resolves its `gpu:frame` in ms, or undefined when none landed. */
+    frame(): Promise<number | undefined>;
+}
+/**
+ * The measurement, apart from any app: each round measures the baseline, every pass disabled in
+ * turn (in reverse order on odd rounds), and the baseline again; a pass's difference in a round is
+ * the mean of the two baselines minus its median. Interleaving rounds cancels thermal drift, as
+ * `structure/src/cutaway.test.ts` does. Restores every pass before it returns or throws.
+ */
+export declare function runAblation(driver: AblationDriver, options: AblationOptions): Promise<AblationResult>;
+/**
+ * Ablates render-graph passes in a running app: `frame` produces one frame (rendering without
+ * advancing time, or waiting for the loop). Reads `gpu:frame` from the graph's `GpuTimer`, so the
+ * device needs `timestamp-query` (`render/gpu-timing-unavailable` otherwise). Unknown passes throw
+ * `render/unknown-node`.
+ */
+export declare function ablatePasses(world: World, options: AblationOptions, frame: () => Promise<void> | void): Promise<AblationResult>;

package/dist/ablation.js

@@ -0,0 +1,117 @@
+import { defineResource, ShardError } from "@aethervtt/shard-core";
+import { PerfProviders, Time } from "@aethervtt/shard-runtime";
+import { Gpu, Graph } from "./plugin.js";
+const PassCosts = defineResource("render/PassCosts", {
+  description: "The latest ablation's per-pass GPU costs (0075): what ranks passes where their timestamps overlap.",
+  init: () => ({ latest: void 0 })
+});
+function keep(world, result) {
+  const costs = world.initResource(PassCosts);
+  costs.latest = { ...result, at: world.tryResource(Time)?.elapsed ?? 0 };
+  const sections = world.initResource(PerfProviders).sections;
+  if (!sections.has("ablation")) {
+    sections.set("ablation", (w) => {
+      const latest = w.tryResource(PassCosts)?.latest;
+      if (!latest) return void 0;
+      return {
+        at: latest.at,
+        frameMs: latest.frameMs,
+        passes: [...latest.passes].sort((a, b) => b.ms - a.ms).map((p) => ({ pass: p.pass, ms: p.ms })),
+        ...latest.together ? { together: latest.together.ms } : {}
+      };
+    });
+  }
+}
+const median = (values) => {
+  if (values.length === 0) return Number.NaN;
+  const sorted = [...values].sort((a, b) => a - b);
+  const mid = sorted.length >> 1;
+  return sorted.length % 2 ? sorted[mid] : (sorted[mid - 1] + sorted[mid]) / 2;
+};
+async function runAblation(driver, options) {
+  const frames = options.frames ?? 120;
+  const rounds = options.rounds ?? 5;
+  const settle = options.settle ?? 4;
+  const sets = options.passes.map((p) => [p]);
+  if (options.together && options.passes.length > 1) sets.push(options.passes);
+  let samples = 0;
+  const measure = async (disabled) => {
+    driver.disable(disabled);
+    for (let i = 0; i < settle; i++) await driver.frame();
+    const times = [];
+    for (let i = 0; i < frames; i++) {
+      const ms = await driver.frame();
+      if (ms !== void 0) times.push(ms);
+    }
+    samples += times.length;
+    return median(times);
+  };
+  const diffs = sets.map(() => []);
+  const baselines = [];
+  try {
+    for (let round = 0; round < rounds; round++) {
+      const before = await measure([]);
+      const order = sets.map((_, i) => i);
+      if (round % 2 === 1) order.reverse();
+      const off = /* @__PURE__ */ new Map();
+      for (const i of order) off.set(i, await measure(sets[i]));
+      const after = await measure([]);
+      const base = (before + after) / 2;
+      baselines.push(base);
+      for (let i = 0; i < sets.length; i++) diffs[i].push(base - off.get(i));
+    }
+  } finally {
+    driver.disable([]);
+  }
+  const costs = sets.map(
+    (set, i) => ({ pass: set.join("+"), ms: median(diffs[i]), rounds: diffs[i] })
+  );
+  const together = options.together && options.passes.length > 1 ? costs.pop() : void 0;
+  return {
+    frameMs: median(baselines),
+    passes: costs,
+    ...together ? { together } : {},
+    frames,
+    rounds,
+    samples
+  };
+}
+async function ablatePasses(world, options, frame) {
+  const graph = world.resource(Graph);
+  const gpu = world.resource(Gpu);
+  if (!graph.timer.enabled) {
+    throw new ShardError("render/gpu-timing-unavailable", "This device can't time GPU passes", {
+      hint: "Ablation reads gpu:frame, which needs the 'timestamp-query' feature."
+    });
+  }
+  if (options.passes.length === 0) {
+    throw new ShardError("render/unknown-node", "No passes to ablate", {
+      hint: `Name render graph nodes: ${graph.nodeNames().join(", ")}.`
+    });
+  }
+  const groups = options.groups;
+  const nodesOf = (passes) => groups ? passes.flatMap((p) => groups[p] ?? [p]) : passes;
+  graph.ablate(nodesOf(options.passes));
+  graph.ablate([]);
+  const timer = graph.timer;
+  const driver = {
+    disable: (passes) => graph.ablate(nodesOf(passes)),
+    async frame() {
+      const seen = timer.frameSamples;
+      await frame();
+      for (let i = 0; i < 8 && timer.frameSamples === seen; i++) {
+        await gpu.device.queue.onSubmittedWorkDone();
+        await new Promise((resolve) => setTimeout(resolve, 0));
+      }
+      return timer.frameSamples === seen ? void 0 : timer.frameMs;
+    }
+  };
+  const result = await runAblation(driver, options);
+  keep(world, result);
+  return result;
+}
+export {
+  PassCosts,
+  ablatePasses,
+  runAblation
+};

package/dist/atmosphere-nodes.js

@@ -7,10 +7,11 @@ import {
   environmentBakers
 } from "./environment.js";
 import { addRenderFeatures } from "./features.js";
-import { ForwardStateResource, sceneColor } from "./forward.js";
+import { ForwardStateResource, sceneColor, viewBindGroup } from "./forward.js";
 import { RenderPhase } from "./graph.js";
 import { Gpu, Graph, Shaders, Views } from "./plugin.js";
 import { hasEffect, PostEffect } from "./post.js";
+import { roundsRg11, targetsFor } from "./post-common.js";
 import { bindingDimension, depthReadEntry } from "./tier.js";
 import { cameraOf } from "./view.js";
 const LUT_LAYERS = 8;
@@ -371,6 +372,21 @@ function layouts(gpu, s) {
         { binding: 7, visibility: F, texture: { sampleType: "float", viewDimension: "3d" } }
       ]
     }),
+    // The composite with fog folded in: fog's parameters after the haze's bindings.
+    compositeFog: gpu.layouts.bindGroupLayout({
+      label: "atmosphere/composite-fog",
+      entries: [
+        { binding: 0, visibility: F, texture: { sampleType: "unfilterable-float" } },
+        depthReadEntry(gpu, 1, F),
+        uniform(2, F),
+        array(3, F),
+        array(4, F),
+        filtering(5, F),
+        { binding: 6, visibility: F, texture: { sampleType: "float", viewDimension: "3d" } },
+        { binding: 7, visibility: F, texture: { sampleType: "float", viewDimension: "3d" } },
+        uniform(8, F)
+      ]
+    }),
     viewOnly: gpu.layouts.bindGroupLayout({
       label: "atmosphere/view",
       entries: [uniform(0, GPUShaderStage.VERTEX | F)]
@@ -692,12 +708,31 @@ function skyNode() {
     }
   };
 }
+const fogScratch = new Float32Array(8);
+const FOG_COMPOSITE_KEYS = [
+  "composite-fog",
+  "composite-fog/alpha",
+  "composite-fog/interior",
+  "composite-fog/alpha/interior",
+  "composite-fog/rg11",
+  "composite-fog/alpha/rg11",
+  "composite-fog/interior/rg11",
+  "composite-fog/alpha/interior/rg11"
+];
 function compositeNode() {
+  const fogBuffers = /* @__PURE__ */ new Map();
   return {
     kind: "render",
     phase: RenderPhase.Post,
     enabled: hasEffect(PostEffect.Atmosphere),
-    reads: ["atmosphere-in", "depth", "atmosphere-luts", "atmosphere-view"],
+    reads: [
+      "atmosphere-in",
+      "depth",
+      "atmosphere-luts",
+      "atmosphere-view",
+      "environment",
+      "clusters"
+    ],
     writes: ["atmosphere-out"],
     color: [{ resource: "atmosphere-out", clear: { r: 0, g: 0, b: 0, a: 1 } }],
     run: (ctx) => {
@@ -705,30 +740,43 @@ function compositeNode() {
       const ca = ctx.view.data.atmosphere;
       const s = ctx.world.resource(AtmosphereGpuResource);
       const c = cam ? s.cameras.get(cam.entity) : void 0;
-      const pv = ctx.world.resource(ForwardStateResource).views.get(ctx.view.name);
+      const forward = ctx.world.resource(ForwardStateResource);
+      const pv = forward.views.get(ctx.view.name);
       if (!cam || !ca || !c || !pv) return;
       const gpu = ctx.gpu;
       const l = layouts(gpu, s);
-      let pipeline = s.pipelines.get("composite");
+      const fog = (cam.post.effects & PostEffect.Fog) !== 0;
+      const alpha = cam.alphaOutput;
+      const out = ctx.texture("atmosphere-out");
+      const rg11 = out.format === "rg11b10ufloat";
+      const name = fog ? FOG_COMPOSITE_KEYS[(alpha ? 1 : 0) + (forward.interiorMode !== 0 ? 2 : 0) + (rg11 ? 4 : 0)] : rg11 ? "composite/rg11" : "composite";
+      let pipeline = s.pipelines.get(name);
       if (!pipeline) {
         const shaders = ctx.world.resource(Shaders);
-        const fs = shaders.module(gpu, { root: "shard::atmosphere::composite" });
+        const fs = shaders.module(gpu, {
+          root: "shard::atmosphere::composite",
+          defines: { FOG: fog, TRANSPARENT: fog && alpha, RG11_ROUND: roundsRg11(gpu, out) }
+        });
         const vs = shaders.module(gpu, { root: "shard::fullscreen" });
         if (!fs || !vs) {
           gpu.pipelines.skipped++;
           return;
         }
         pipeline = gpu.pipelines.render({
-          label: "atmosphere/composite",
+          label: `atmosphere/${name}`,
           layout: gpu.layouts.pipelineLayout({
-            label: "atmosphere/composite",
-            bindGroupLayouts: [l.viewOnly, l.composite]
+            label: `atmosphere/${name}`,
+            bindGroupLayouts: fog ? [forward.layouts.view, l.compositeFog] : [l.viewOnly, l.composite]
           }),
           vertex: { module: vs, entryPoint: "vs" },
-          fragment: { module: fs, entryPoint: "fs", targets: [{ format: "rgba16float" }] }
+          fragment: {
+            module: fs,
+            entryPoint: fog ? "fs_fog" : "fs",
+            targets: targetsFor(out)
+          }
         });
         if (!pipeline) return;
-        s.pipelines.set("composite", pipeline);
+        s.pipelines.set(name, pipeline);
       }
       const input = ctx.texture("atmosphere-in");
       const depth = ctx.texture("depth");
@@ -736,6 +784,48 @@ function compositeNode() {
       const inside = ca.inside && c.computed === s.frame;
       const scatter = inside && c.scatter ? c.scatter : e.d3;
       const trans = inside && c.transmittance ? c.transmittance : e.d3;
+      const pass = ctx.renderPass;
+      pass.setPipeline(pipeline);
+      if (fog) {
+        let buffer = fogBuffers.get(cam.entity);
+        if (!buffer) {
+          buffer = gpu.device.createBuffer({
+            label: `${ctx.view.name}/composite-fog`,
+            size: 32,
+            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+          });
+          fogBuffers.set(cam.entity, buffer);
+        }
+        const f = cam.post.fog;
+        fogScratch.set(f.color, 0);
+        fogScratch[4] = f.density;
+        fogScratch[5] = f.heightFalloff;
+        fogScratch[6] = f.start;
+        fogScratch[7] = f.sunScattering;
+        gpu.device.queue.writeBuffer(buffer, 0, fogScratch);
+        const fogBuffer = buffer;
+        const group2 = s.group(
+          gpu,
+          `${cam.entity}/composite-fog`,
+          `${gpu.generation}/${idOf(input)}/${idOf(depth)}/${c.uniform.version}/${idOf(scatter)}/${idOf(trans)}/${idOf(s.transmittance)}/${idOf(fogBuffer)}`,
+          l.compositeFog,
+          () => [
+            { binding: 0, resource: input.createView() },
+            { binding: 1, resource: depth.createView() },
+            { binding: 2, resource: { buffer: c.uniform.buffer } },
+            { binding: 3, resource: s.transmittanceArray },
+            { binding: 4, resource: s.multiscatterArray },
+            { binding: 5, resource: s.clamp },
+            { binding: 6, resource: scatter.createView() },
+            { binding: 7, resource: trans.createView() },
+            { binding: 8, resource: { buffer: fogBuffer } }
+          ]
+        );
+        pass.setBindGroup(0, viewBindGroup(gpu, ctx.world, pv, cam));
+        pass.setBindGroup(1, group2);
+        pass.draw(3);
+        return;
+      }
       const group = s.group(
         gpu,
         `${cam.entity}/composite`,
@@ -759,8 +849,6 @@ function compositeNode() {
         l.viewOnly,
         () => [{ binding: 0, resource: { buffer: pv.uniform.buffer } }]
       );
-      const pass = ctx.renderPass;
-      pass.setPipeline(pipeline);
       pass.setBindGroup(0, viewGroup);
       pass.setBindGroup(1, group);
       pass.draw(3);

package/dist/atmosphere-shaders.js

@@ -518,8 +518,9 @@ struct SkyOutput {
 }`,
   "shard::atmosphere::composite": `
 import shard::view::view;
-import shard::post::common::uv_of;
+import shard::post::common::{ uv_of, post_out };
 import shard::atmosphere::{ AtmosphereView, KCD, integrate, froxel_slice, relative_at };
+@if(FOG) 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;
@@ -529,16 +530,15 @@ import shard::atmosphere::{ AtmosphereView, KCD, integrate, froxel_slice, relati
 @group(1) @binding(5) var lut_sampler: sampler;
 @group(1) @binding(6) var ap_scatter: texture_3d<f32>;
 @group(1) @binding(7) var ap_transmittance: texture_3d<f32>;
+/** A view with fog too: fog follows in the same pass (\`fs_fog\`). */
+@if(FOG) @group(1) @binding(8) var<uniform> fog: FogParams;
 
 /**
  * Aerial perspective on geometry: color \xD7 transmittance + in-scattering for every atmosphere the
  * view ray crosses before the surface, far to near. The primary reads its froxels within their
  * range; beyond it (terrain seen from orbit), and for the others, the ray is marched.
  */
-@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);
+fn haze(frag: vec4f, c: vec4f, depth: f32) -> vec4f {
   let count = u32(atmo.info.x);
   if (depth <= 0.0 || count == 0u) { return c; }
   let uv = uv_of(frag.xy);
@@ -568,6 +568,18 @@ import shard::atmosphere::{ AtmosphereView, KCD, integrate, froxel_slice, relati
     }
   }
   return vec4f(min(color, vec3f(60000.0)), c.a);
+}
+
+@fragment fn fs(@builtin(position) frag: vec4f) -> @location(0) vec4f {
+  let px = vec2i(frag.xy);
+  return post_out(haze(frag, textureLoad(input, px, 0), textureLoad(depth_texture, px, 0)));
+}
+
+/** Aerial perspective, then height fog: the view's fog pass folded into this one. */
+@if(FOG) @fragment fn fs_fog(@builtin(position) frag: vec4f) -> @location(0) vec4f {
+  let px = vec2i(frag.xy);
+  let depth = textureLoad(depth_texture, px, 0);
+  return post_out(fog_apply(haze(frag, textureLoad(input, px, 0), depth), uv_of(frag.xy), depth, fog));
 }`,
   "shard::atmosphere::bake": `
 import shard::env::common::cube_dir;

package/dist/baseline/exposure.d.ts

@@ -20,6 +20,6 @@ export declare function meterLayout(gpu: GpuContext): GPUBindGroupLayout;
  * Renders the meter image and, when a readback is free, copies it out. Returns the readback that
  * will hold it, or undefined when all are still mapping (this frame isn't metered).
  */
-export declare function renderMeter(ctx: NodeContext, m: MeterView, pipeline: GPURenderPipeline, group: GPUBindGroup, range: Float32Array): number | undefined;
+export declare function renderMeter(ctx: NodeContext, m: MeterView, pipeline: GPURenderPipeline, group: GPUBindGroup, range: Float32Array, glow: Float32Array): number | undefined;
 /** The meter image's samples binned into the full tier's histogram: weight into its EV bin. */
 export declare function binMeter(bytes: ArrayBuffer, minEv: number, binsPerEv: number, bins: Uint32Array): Uint32Array;

package/dist/baseline/exposure.js

@@ -5,22 +5,32 @@ const BASELINE_EXPOSURE_SHADERS = {
   "shard::post::baseline::meter": `
 import shard::view::view;
 import shard::color::luminance;
+@if(BLOOM) import shard::post::glow::add_glow;
 
 struct Meter {
   /** EV of bin 0, bins per EV, metering mode, 0. */
   range: vec4f,
   /** The meter image's size. */
   size: 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<uniform> meter: Meter;
+@if(BLOOM) @group(0) @binding(3) var bloom: texture_2d<f32>;
+@if(BLOOM) @group(0) @binding(4) var bloom_sampler: sampler;
 
 /** One sample: the EV100 of the input pixel under it, and its metering weight (of 16). */
 @fragment fn main(@builtin(position) p: vec4f) -> @location(0) vec4f {
   let size = textureDimensions(input);
   let px = min(vec2u((floor(p.xy) + 0.5) / meter.size.xy * vec2f(size)), size - 1u);
-  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, meter.glow);
+  }
   let l = luminance(c) / max(view.exposure, 1e-20);
   let ev = log2(max(l, 1e-10) * 8.0);
   let q = vec2f(px) / vec2f(size) * 2.0 - 1.0;
@@ -44,7 +54,7 @@ function meterView(gpu, name, readbacks) {
     view: target.createView(),
     params: gpu.device.createBuffer({
       label: `${name}/exposure-meter`,
-      size: 32,
+      size: 48,
       usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
     }),
     readbacks: Array.from(
@@ -68,15 +78,18 @@ function meterLayout(gpu) {
     entries: [
       { binding: 0, visibility: F, buffer: { type: "uniform" } },
       { binding: 1, visibility: F, texture: { sampleType: "unfilterable-float" } },
-      { binding: 2, visibility: F, buffer: { type: "uniform" } }
+      { binding: 2, visibility: F, buffer: { type: "uniform" } },
+      { binding: 3, visibility: F, texture: { sampleType: "float" } },
+      { binding: 4, visibility: F, sampler: { type: "filtering" } }
     ]
   });
 }
-const params = new Float32Array(8);
-function renderMeter(ctx, m, pipeline, group, range) {
+const params = new Float32Array(12);
+function renderMeter(ctx, m, pipeline, group, range, glow) {
   params.set(range, 0);
   params[4] = METER_WIDTH;
   params[5] = METER_HEIGHT;
+  params.set(glow, 8);
   ctx.gpu.device.queue.writeBuffer(m.params, 0, params);
   const pass = ctx.encoder.beginRenderPass({
     label: `${ctx.view.name}/exposure`,

package/dist/crowd.d.ts

@@ -0,0 +1,21 @@
+import { type World } from '@aethervtt/shard-core';
+export interface CrowdOptions {
+    /** Instances (default 200 000). */
+    count?: number;
+    /** Every instance at full detail, no LOD (the playground's `?nolod`). */
+    flat?: boolean;
+}
+/**
+ * The crowd's turntable: 160 m out and 40 m up, looking at the field's centre, `angle` radians
+ * round (the playground turns it 2.86° a second).
+ */
+export declare function crowdCamera(angle: number): {
+    eye: [number, number, number];
+    target: [number, number, number];
+};
+/**
+ * 200k static instances of 20 mesh types over a 600 m field, under a sun with 4 shadow cascades.
+ * Most have 3 LOD levels; every fifth is a small prop hidden past 120 m. The camera is the
+ * caller's (`crowdCamera` places the turntable).
+ */
+export declare function spawnCrowd(world: World, options?: CrowdOptions): void;

package/dist/crowd.js

@@ -0,0 +1,121 @@
+import { quat, Rng } from "@aethervtt/shard-core";
+import {
+  box,
+  capsule,
+  cone,
+  cylinder,
+  plane,
+  sphere,
+  torus
+} from "@aethervtt/shard-mesh";
+import { Transform } from "@aethervtt/shard-transform";
+import { MaterialAsset, Materials, Meshes } from "./assets.js";
+import { Lod, Mesh3d, MeshMaterial, VisibilityRange } from "./instances.js";
+import { DirectionalLight } from "./lights.js";
+function kinds() {
+  const out = [];
+  for (const segments of [8, 12, 16, 24]) {
+    out.push([sphere({ radius: 0.5, segments }), sphere({ radius: 0.5, segments: 6 })]);
+  }
+  for (const y of [0.5, 0.8, 1.2]) {
+    const m = box({ x: 0.8, y, z: 0.8 });
+    out.push([m, m]);
+  }
+  for (const segments of [6, 12, 24]) {
+    out.push([
+      cylinder({ radius: 0.4, height: 1, segments }),
+      cylinder({ radius: 0.4, height: 1, segments: 5 })
+    ]);
+  }
+  for (const segments of [6, 16]) {
+    out.push([
+      cone({ radius: 0.5, height: 1.2, segments }),
+      cone({ radius: 0.5, height: 1.2, segments: 4 })
+    ]);
+  }
+  for (const segments of [8, 16]) {
+    out.push([
+      capsule({ radius: 0.3, height: 1.2, segments }),
+      capsule({ radius: 0.3, height: 1.2, segments: 4, rings: 2 })
+    ]);
+  }
+  for (const tube of [0.2, 0.1]) {
+    out.push([
+      torus({ radius: 0.4, tube }),
+      torus({ radius: 0.4, tube, radialSegments: 4, tubularSegments: 8 })
+    ]);
+  }
+  for (const y of [0.3, 0.6, 1]) {
+    const m = box({ x: 0.5, y, z: 1.2 });
+    out.push([m, m]);
+  }
+  const beam = box({ x: 1.5, y: 0.3, z: 0.3 });
+  out.push([beam, beam]);
+  return out;
+}
+function crowdCamera(angle) {
+  return { eye: [Math.sin(angle) * 160, 40, Math.cos(angle) * 160], target: [0, 0, 0] };
+}
+function spawnCrowd(world, options = {}) {
+  const count = options.count ?? 2e5;
+  const flat = options.flat ?? false;
+  world.spawn(
+    [DirectionalLight, { illuminance: 6e4, shadows: true }],
+    [Transform, { rotation: quat.fromEuler([0, 0, 0, 1], -0.8, 0.7, 0) }]
+  );
+  const meshes = world.resource(Meshes);
+  const materials = world.resource(Materials);
+  const rng = new Rng(11);
+  const stand = meshes.add(box({ x: 0.8, y: 0.8, z: 0.8 }));
+  const types = kinds().map(([hi, lo]) => {
+    const mesh = meshes.add(hi);
+    return {
+      mesh,
+      levels: [
+        { mesh, screenSize: 0.04 },
+        { mesh: meshes.add(lo), screenSize: 0.01 },
+        { mesh: stand, screenSize: 2e-3 }
+      ]
+    };
+  });
+  const looks = Array.from(
+    { length: 8 },
+    () => materials.add(
+      new MaterialAsset({
+        baseColor: [rng.range(0.2, 0.9), rng.range(0.2, 0.9), rng.range(0.2, 0.9), 1],
+        roughness: rng.range(0.2, 0.9)
+      })
+    )
+  );
+  world.spawn(
+    [Mesh3d, { mesh: meshes.add(plane({ size: 700 })) }],
+    [MeshMaterial, { material: looks[0] }],
+    Transform
+  );
+  for (let i = 0; i < count; i++) {
+    const s = rng.range(0.6, 1.8);
+    const kind = types[i % types.length];
+    const common = [
+      [MeshMaterial, { material: looks[i % looks.length] }],
+      [
+        Transform,
+        {
+          translation: [rng.range(-300, 300), s * 0.5, rng.range(-300, 300)],
+          rotation: quat.fromEuler([0, 0, 0, 1], 0, rng.float() * 6.28, 0),
+          scale: [s, s, s]
+        }
+      ]
+    ];
+    if (flat) {
+      world.spawn([Mesh3d, { mesh: kind.mesh }], ...common);
+    } else if (i % 5 === 0) {
+      world.spawn([Mesh3d, { mesh: kind.mesh }], [VisibilityRange, { end: 120 }], ...common);
+    } else {
+      world.spawn([Mesh3d, { mesh: kind.mesh }], [Lod, { levels: kind.levels }], ...common);
+    }
+  }
+}
+export {
+  crowdCamera,
+  spawnCrowd
+};

package/dist/decals-plugin.d.ts

@@ -0,0 +1,5 @@
+import { VfxRenderer } from './vfx-draw.js';
+export declare const DecalGpu: import("@aethervtt/shard-core").ResourceDef<{
+    renderer?: VfxRenderer;
+}>;
+export declare const decalsPlugin: import("@aethervtt/shard-runtime").Plugin;