Tone mapping and exposure

import { Camera, Environment, ENVIRONMENT_ASSET_TYPE, MODEL_ASSET_TYPE, Model } 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 { createLightRig, createStudioFloor } from "../_kit/stage.ts";import {  COMPARE_CURVE,  createEmissiveRamp,  CURVES,  FOCUS,  GRADING,  KEY_INTENSITY,  SHOT,  START_CURVE,  SUBJECT,} from "./scene.ts";import type { AssetHandle, EnvironmentAsset, ModelAsset } from "ignifx";/** * Tone mapping is the last step of a frame: it squeezes a scene whose brightness runs far past one * into the zero-to-one a screen can show. In ignifx it is `Environment.imageProcessing`, one record * on the world's `Environment`: an `exposure` that multiplies the scene first, a `contrast`, and the * `toneMapping` curve. * * The two kinds of change cost different amounts. Exposure and contrast are uniforms, so a slider * can drag them every frame. The curve is compiled into every PBR material's shader, so choosing a * new one rebuilds pipelines — cheap once, not something to animate. Grading is scene-wide and the * world renders through one camera, so the comparison is a toggle that flips between two curves * rather than a split screen. */bootExample({  title: "Tone mapping and exposure",  settings: {    rendering: { clearColor: { r: 0.02, g: 0.024, b: 0.032, a: 1 } },  },  async setup({ app, panel }) {    const eye = app.world.createEntity("Main Camera");    eye.addComponent(Camera, { near: 0.02, far: 200, fov: SHOT.fov });    attachOrbit(app, eye, {      yaw: SHOT.yaw,      pitch: SHOT.pitch,      distance: SHOT.distance,      target: FOCUS,      minDistance: 1.2,      maxDistance: 12,    });    // Both loads are awaited before the loop runs, so neither needs a frame pumped to settle. The    // `.env` also pulls the BRDF table Lite requires, from the `rendering.brdfLut` default address.    const model: AssetHandle<ModelAsset> = app.assets.load(SUBJECT.address, { type: MODEL_ASSET_TYPE });    const environment: AssetHandle<EnvironmentAsset> = app.assets.load("environments/studio.environment.json", {      type: ENVIRONMENT_ASSET_TYPE,    });    await Promise.all([model.promise, environment.promise]);    const sky = app.world.createEntity("Environment").addComponent(Environment, { environment });    sky.imageProcessing.exposure = GRADING.exposure;    sky.imageProcessing.contrast = GRADING.contrast;    sky.imageProcessing.toneMapping = CURVES[START_CURVE] ?? "aces";    const floor = createStudioFloor(app, { fade: true });    // No shadow, and no `features.shadows` above with it: `shadows` is the example that is about    // shadow maps, and a cast shadow here would only be one more thing the curve is not doing.    const rig = createLightRig(app, {      focus: FOCUS,      shadows: false,      keyIntensity: KEY_INTENSITY,      keyPosition: { x: -1.1, y: 4.2, z: -1.6 },      rimIntensity: 2.4,    });    // The rim shines towards the camera and would lay a broad sheen across the floor; the fill would    // lift it to grey. Both are for the corset, so the floor is left to the key and the probe.    rig.rim.exclude = [floor.entity];    rig.fill.exclude = [floor.entity];    const subject = app.world.createEntity("Corset");    subject.transform.localPosition.set(SUBJECT.x, SUBJECT.height, 0);    subject.transform.localScale.set(SUBJECT.scale, SUBJECT.scale, SUBJECT.scale);    subject.addComponent(Model, { model, castShadows: false, receiveShadows: false });    createEmissiveRamp(app);    // The A/B: two labels, and a flag saying which one the scene is compiled with right now.    let curveA = START_CURVE;    let curveB = COMPARE_CURVE;    let isShowingB = false;    /** Applies whichever of the two curves is selected. One assignment; a pipeline rebuild follows. */    const apply = (): void => {      sky.imageProcessing.toneMapping = CURVES[isShowingB ? curveB : curveA] ?? "none";    };    panel({      title: "Tone mapping and exposure",      groups: [        {          label: "Curve",          controls: [            select("Tone mapping", Object.keys(CURVES), {              value: START_CURVE,              change: (label: string): void => {                curveA = label;                isShowingB = false;                apply();              },            }),            select("Compare with", Object.keys(CURVES), {              value: COMPARE_CURVE,              change: (label: string): void => {                curveB = label;                isShowingB = true;                apply();              },            }),            // Both selects also move the flag, so the toggle reads it back rather than keeping its own.            toggle("Show the comparison", {              value: false,              change: (on: boolean): void => {                isShowingB = on;                apply();              },              read: (): boolean => isShowingB,            }),          ],        },        {          label: "Grading",          controls: [            // Exposure multiplies the scene *before* the curve, so it is what decides how much of            // the frame the curve has to deal with. Push it up and the ramp clips from the left.            slider(              "Exposure",              { min: 0.2, max: 4, step: 0.05, format: twoPlaces },              bind(sky.imageProcessing, "exposure"),            ),            slider(              "Contrast",              { min: 0.5, max: 2, step: 0.05, format: twoPlaces },              bind(sky.imageProcessing, "contrast"),            ),          ],        },        {          label: "Frame",          collapsed: true,          controls: [            readout("Showing", (): string => (isShowingB ? curveB : curveA)),            readout("Draw calls", (): string => String(app.renderer.drawCalls)),          ],        },      ],    });  },});