HDR bloom

import { Camera, Environment, PostProcessStack } from "ignifx";import { bootExample } from "../_kit/boot.ts";import { twoPlaces } from "../_kit/format.ts";import { attachOrbit } from "../_kit/orbit.ts";import { bind, readout, slider, toggle } from "../_kit/panel.ts";import { queryFlag, reloadToggle } from "../_kit/reload.ts";import { createStudioFloor } from "../_kit/stage.ts";import { CLEAR_COLOR, createEmitters, FOCUS, SHOT, START_HDR_BLOOM, START_LDR_BLOOM } from "./scene.ts";import type { PanelGroup } from "../_kit/panel.ts";/** * HDR bloom: the glow is computed on the linear scene colour, before tone mapping, from values * that can be far brighter than white. * * One `bloom` record on the camera's `PostProcessStack` drives two different passes, and * `rendering.hdr` picks which. With HDR on, a downsample/upsample chain over six `rgba16float` mips * runs right before the output pass and reads `intensity`, `radius` and `hdrThreshold`; the glow is * then exposed and tone mapped with the rest of the frame. With HDR off, Lite's LDR bloom runs after * tone mapping, on colour that never exceeds 1, and reads `threshold`, `weight` and `kernel` * instead. `rendering.hdr` is read when the app is created, so the HDR row reloads the frame, and * the panel shows whichever set of fields this load uses. All of them are live. * * With `hdrThreshold` at 0, the default, nothing is cut: every pixel spreads by its own energy and * `intensity` mixes the result back in, so a strip at white glows a little and a cube at sixteen * times white glows a lot. Raise the threshold past 1 and only the cubes keep a glow. *//** Whether this page load runs the HDR path, and therefore the HDR bloom; `?hdr=0` compares. */const HDR = queryFlag("hdr", true);bootExample({  title: "HDR bloom",  settings: {    rendering: { clearColor: CLEAR_COLOR, hdr: HDR, features: { postProcessing: true } },  },  async setup({ app, panel, afterStart }) {    const eye = app.world.createEntity("Main Camera");    eye.addComponent(Camera, { near: 0.05, far: 100, fov: SHOT.fov });    attachOrbit(app, eye, {      yaw: SHOT.yaw,      pitch: SHOT.pitch,      distance: SHOT.distance,      target: FOCUS,      minDistance: 1.6,      maxDistance: 12,    });    const grade = app.world.createEntity("Environment").addComponent(Environment);    grade.imageProcessing.exposure = 1;    grade.imageProcessing.toneMapping = "agx";    createStudioFloor(app, { color: { r: 0.01, g: 0.012, b: 0.016, a: 1 }, roughness: 0.5, fade: true });    await createEmitters(app);    const post = eye.addComponent(PostProcessStack);    post.bloom.intensity = START_HDR_BLOOM.intensity;    post.bloom.radius = START_HDR_BLOOM.radius;    post.bloom.hdrThreshold = START_HDR_BLOOM.hdrThreshold;    post.bloom.threshold = START_LDR_BLOOM.threshold;    post.bloom.weight = START_LDR_BLOOM.weight;    post.bloom.kernel = START_LDR_BLOOM.kernel;    afterStart((): void => {      post.bloom.enabled = true;    });    const hdrBloom: PanelGroup = {      label: "HDR bloom",      controls: [        slider("Intensity", { min: 0, max: 1, step: 0.01, format: twoPlaces }, bind(post.bloom, "intensity")),        slider("Radius", { min: 0, max: 1, step: 0.01, format: twoPlaces }, bind(post.bloom, "radius")),        slider("HDR threshold", { min: 0, max: 4, step: 0.05, format: twoPlaces }, bind(post.bloom, "hdrThreshold")),      ],    };    const ldrBloom: PanelGroup = {      label: "LDR bloom",      controls: [        slider("Threshold", { min: 0, max: 1, step: 0.02, format: twoPlaces }, bind(post.bloom, "threshold")),        slider("Weight", { min: 0, max: 1.5, step: 0.05, format: twoPlaces }, bind(post.bloom, "weight")),        slider("Kernel", { min: 8, max: 128, step: 4 }, bind(post.bloom, "kernel")),      ],    };    panel({      title: "HDR bloom",      groups: [        {          label: "Bloom",          controls: [            // The stack's `enabled`, which reads `true` during `setup` while `bloom.enabled` waits            // for `afterStart`.            toggle("Enabled", bind(post, "enabled")),            reloadToggle("HDR", "hdr", HDR),            readout("Pass", (): string => (HDR ? "HDR, before tone mapping" : "LDR, after tone mapping")),          ],        },        HDR ? hdrBloom : ldrBloom,        {          label: "Grading",          collapsed: true,          controls: [            // Under HDR the exposure scales the glow with the frame; without it, it moves what            // crosses the LDR threshold.            slider("Exposure", { min: 0.2, max: 3, step: 0.05, format: twoPlaces }, bind(grade.imageProcessing, "exposure")),          ],        },        {          label: "Frame",          collapsed: true,          controls: [            readout("Post-process tasks", (): string => String(post.taskCount)),            readout("Draw calls", (): string => String(app.renderer.drawCalls)),          ],        },      ],    });  },});