HDR pipeline

import { Camera, Environment } from "ignifx";import { bootExample } from "../_kit/boot.ts";import { twoPlaces } from "../_kit/format.ts";import { attachOrbit } from "../_kit/orbit.ts";import { bind, readout, select, slider, toggle } from "../_kit/panel.ts";import { queryFlag, queryNumber, reloadSlider, reloadToggle } from "../_kit/reload.ts";import { createRoom, CURVES, FOCUS, GRADING, SHOT, START_CURVE } from "./scene.ts";/** * The HDR pipeline: the scene is lit and stored in linear floating point, and only the last pass * turns it into colours a screen can show. * * `rendering.hdr` is a project setting, read when the app is created. With it on, every material * writes its unclamped linear colour into an `rgba16float` target, and one output pass applies the * `Environment`'s exposure, contrast and tone-mapping curve at the end. With it off, each PBR * fragment is tone mapped and clamped as it is drawn. A scene with nothing past white looks the * same either way; this one has emitters at sixteen times white, a lamp and a near-black room, and * the HDR path is what lets later passes (TAA, bloom, auto exposure) see those values at all. * * Auto exposure (`rendering.autoExposure`) needs `rendering.hdr`. It meters the HDR frame on the * GPU every frame — a luminance histogram, the darkest and brightest tenth dropped — and eases the * exposure towards the average, clamped to `[minEv, maxEv]`. Orbit until the cubes leave the frame * and the room slowly brightens; swing back and it settles down again. Both records are read once, * so their rows reload the frame with the new value. The tone-mapping curve, the exposure and the * contrast are `Environment.imageProcessing` and change live. *//** Whether this page load runs the HDR path; `?hdr=0` turns it off. */const HDR = queryFlag("hdr", true);/** Auto exposure, from the query; the defaults are the engine's own. */const AUTO_EXPOSURE = {  enabled: queryFlag("autoExposure", false),  minEv: queryNumber("minEv", -6, -12, 0),  maxEv: queryNumber("maxEv", 6, 0, 12),} as const;/** * Writes an EV value with its sign. * * @param value - The value, in stops. * @returns E.g. `"+4 EV"`. */function ev(value: number): string {  return `${value > 0 ? "+" : ""}${String(value)} EV`;}bootExample({  title: "HDR pipeline",  settings: {    rendering: {      clearColor: { r: 0.01, g: 0.012, b: 0.016, a: 1 },      hdr: HDR,      autoExposure: AUTO_EXPOSURE,    },  },  async setup({ app, panel }) {    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: 2,      maxDistance: 14,    });    const lights = await createRoom(app);    // No `.env`: the component is only the exposure, contrast and curve. Under `rendering.hdr`    // the output pass applies them; without it, the PBR shaders do.    const grade = app.world.createEntity("Environment").addComponent(Environment);    grade.imageProcessing.exposure = GRADING.exposure;    grade.imageProcessing.contrast = GRADING.contrast;    grade.imageProcessing.toneMapping = CURVES[START_CURVE] ?? "agx";    panel({      title: "HDR pipeline",      groups: [        {          label: "Project settings",          controls: [            // Read by `createApp`, so these reload the frame.            reloadToggle("HDR", "hdr", HDR),            reloadToggle("Auto exposure", "autoExposure", AUTO_EXPOSURE.enabled),            reloadSlider("Min EV", "minEv", { min: -12, max: 0, step: 1, format: ev }, AUTO_EXPOSURE.minEv),            reloadSlider("Max EV", "maxEv", { min: 0, max: 12, step: 1, format: ev }, AUTO_EXPOSURE.maxEv),            readout("Metering", (): string => {              if (!AUTO_EXPOSURE.enabled) {                return "off";              }              return HDR ? "on" : "needs HDR";            }),          ],        },        {          label: "Grading",          controls: [            select("Tone mapping", Object.keys(CURVES), {              value: START_CURVE,              change: (label: string): void => {                grade.imageProcessing.toneMapping = CURVES[label] ?? "agx";              },            }),            slider(              "Exposure",              { min: 0.1, max: 4, step: 0.05, format: twoPlaces },              bind(grade.imageProcessing, "exposure"),            ),            slider(              "Contrast",              { min: 0.5, max: 2, step: 0.05, format: twoPlaces },              bind(grade.imageProcessing, "contrast"),            ),          ],        },        {          label: "Scene",          collapsed: true,          controls: [toggle("Lamp", bind(lights.lamp, "enabled")), toggle("Sky light", bind(lights.sky, "enabled"))],        },        {          label: "Frame",          collapsed: true,          controls: [readout("Draw calls", (): string => String(app.renderer.drawCalls))],        },      ],    });  },});