@v12-engine/create 0.1.1 → 0.4.0

package/starters/examples/src/examples/post/looks.ts

@@ -0,0 +1,884 @@
+/**
+ * The post-processing examples on the client's side: each changes how the picture is finished after the scene is
+ * drawn (`client.picture`, `WorldPicture`), and puts it back as it is left. The look (`picture.look`: tone, exposure,
+ * colours, a grade, bloom, vignette, sharpening, ambient occlusion) is the game's look of the picture; the lens
+ * (`picture.cinematic`: depth of field, grain, the colours split) is what a cinematic asks; outlines, ink and the
+ * screen's bars are the client's too; passes of our own go on with `picture.addPass` (`./passes.ts`)
+ */
+import type { CinematicPicture, GameClientApi, MapPictureLook } from '@v12-engine/client'
+import { button, type CategoryLooks, readout, select, slider, toggle } from '../../shell/look'
+import { PLAYER } from '../common/units'
+import { stand } from '../nature/camera'
+import { gradePath, GRADES, teachGrades } from './grades'
+import { SQUARE } from '../nature/maps'
+import { addShader, type OwnPass, SHADERS, type ShaderName } from './passes'
+
+// ---- the picture, changed and put back
+
+/** What the picture was before an example changed it: its look, its lens and how it smooths edges, to put back */
+interface Before {
+	look: MapPictureLook
+	cinematic: CinematicPicture | null
+	antialias: GameClientApi['picture']['antialias']
+	occlusion: GameClientApi['picture']['occlusion']
+	resolve: GameClientApi['picture']['resolve']
+}
+
+/** Keeps what the picture is now, and gives back what puts it back so */
+function keep(client: GameClientApi): () => void {
+	const { picture } = client
+	const before: Before = {
+		look: picture.look,
+		cinematic: picture.cinematic,
+		antialias: picture.antialias,
+		occlusion: picture.occlusion,
+		resolve: picture.resolve
+	}
+	const scale = client.renderScale
+	return () => {
+		picture.look = before.look
+		picture.cinematic = before.cinematic
+		picture.antialias = before.antialias
+		picture.occlusion = before.occlusion
+		picture.resolve = before.resolve
+		client.renderScale = scale
+	}
+}
+
+/** The picture's look changed field by field, over what it is now (`picture.look`, the game's look of the picture) */
+const look = (client: GameClientApi, change: MapPictureLook) => {
+	client.picture.look = { ...client.picture.look, ...change }
+}
+
+/** The lens changed field by field (`picture.cinematic`: what only a cinematic asks, depth of field, grain, the colours split) */
+const lens = (client: GameClientApi, change: CinematicPicture) => {
+	client.picture.cinematic = { ...client.picture.cinematic, ...change }
+}
+
+/** The people about the square, by side */
+const people = (client: GameClientApi, owner: number) => client.session.snapshot().entities.filter((each) => each.owner === owner && each.health > 0)
+
+/** The knight in the middle of the square: what the lens focuses on */
+const knight = (client: GameClientApi) => client.session.snapshot().entities.find((each) => each.type === 'knight')
+
+/** The square seen from the south-east, near and low */
+const onSquare = (client: GameClientApi, distance = 22, pitch = 30) => stand(client, { x: SQUARE.x, z: SQUARE.z + 1 }, distance, 200, pitch)
+
+/** What the picture says now, in short */
+const lookNow = (client: GameClientApi) => {
+	const now = client.picture.now
+	const parts = [
+		now.tone && now.tone !== 'none' ? now.tone : '',
+		now.bloom ? `bloom ${now.bloom.toFixed(2)}` : '',
+		client.picture.pipeline ? 'pipeline on' : 'no pipeline'
+	]
+	return parts.filter(Boolean).join(' · ')
+}
+
+// ---- the whole pipeline's choices, as the first example keeps them
+
+const pipeline = {
+	focus: false,
+	aperture: 0.2,
+	grain: 0,
+	aberration: 0
+}
+
+/** The lens as the pipeline example's controls have it */
+const pipelineLens = (client: GameClientApi) => {
+	const target = knight(client)
+	client.picture.cinematic = {
+		focus: pipeline.focus && target ? { at: { entity: target.id }, aperture: pipeline.aperture } : null,
+		grain: pipeline.grain,
+		aberration: pipeline.aberration
+	}
+}
+
+// ---- the looks: each a picture, a lens, and passes of its own
+
+interface Preset {
+	look: MapPictureLook
+	lens?: CinematicPicture
+	/** Bars of a film's ratio over the picture */
+	bars?: number
+	/** A pass of ours, and how strong */
+	shader?: [ShaderName, number]
+}
+
+const PRESETS: Record<string, Preset> = {
+	'As drawn': { look: {} },
+	Cinematic: {
+		look: {
+			tone: 'aces',
+			exposure: 1.15,
+			contrast: 1.15,
+			saturation: 1.1,
+			tint: [1, 0.85, 0.7],
+			tintAmount: 0.12,
+			bloom: 0.45,
+			bloomThreshold: 0.8,
+			vignette: 0.45,
+			sharpen: 0.2
+		},
+		lens: { grain: 0.12 },
+		bars: 2.39
+	},
+	Noir: {
+		look: { tone: 'standard', saturation: 0, contrast: 1.6, exposure: 1.05, vignette: 0.9, sharpen: 0.4 },
+		lens: { grain: 0.5 },
+		bars: 1.85
+	},
+	Dreamy: {
+		look: {
+			tone: 'aces',
+			exposure: 1.35,
+			contrast: 0.85,
+			saturation: 1.15,
+			tint: [1, 0.75, 0.9],
+			tintAmount: 0.18,
+			bloom: 1,
+			bloomThreshold: 0.45,
+			bloomSpread: 1.6,
+			vignette: 0.3,
+			vignetteColor: [0.35, 0.2, 0.4]
+		},
+		lens: { aberration: 0.2 }
+	},
+	'Retro pixel': {
+		look: { tone: 'standard', saturation: 1.35, contrast: 1.2 },
+		shader: ['Pixels', 0.6]
+	},
+	Sepia: {
+		look: {
+			tone: 'standard',
+			saturation: 0,
+			tint: [1, 0.72, 0.42],
+			tintAmount: 0.45,
+			contrast: 1.1,
+			vignette: 0.7,
+			vignetteColor: [0.2, 0.12, 0.05]
+		},
+		lens: { grain: 0.35 }
+	},
+	'Cold thriller': {
+		look: { tone: 'aces', saturation: 0.6, contrast: 1.3, tint: [0.55, 0.8, 1], tintAmount: 0.3, exposure: 0.95, vignette: 0.6, sharpen: 0.3 },
+		bars: 2
+	},
+	'Old CRT': {
+		look: { tone: 'standard', saturation: 1.2, bloom: 0.5, bloomThreshold: 0.6 },
+		shader: ['CRT', 1]
+	}
+}
+
+/** What a preset put on: its pass, to take off again as another is picked */
+const presetNow: { shader?: OwnPass } = {}
+
+function showPreset(client: GameClientApi, name: string, base: MapPictureLook): void {
+	const preset = PRESETS[name] ?? PRESETS['As drawn']
+	client.picture.look = { ...base, ...preset.look }
+	client.picture.cinematic = preset.lens ?? null
+	client.screenPass.setFrame(preset.bars ?? false, 0.6)
+	presetNow.shader?.pass.remove()
+	presetNow.shader = preset.shader ? addShader(client, preset.shader[0], preset.shader[1]) : undefined
+}
+
+// ---- the bloom example's
+
+/** The bloom example's start: its bloom, and torches bright enough for it to bleed from */
+const BLOOM = { bloom: 2, torches: 2.5 }
+/** The bloom the slider has, what the toggle puts back */
+const bloomNow = { amount: BLOOM.bloom }
+
+// ---- the depth of field example's
+
+/** The depth of field example's aperture at first: wide open, the blur plain a few cells before and behind the focus */
+const APERTURE = 0.1
+
+/** The lens' aperture now, the example's own where none is set */
+const aperture = (client: GameClientApi) => client.picture.cinematic?.focus?.aperture ?? APERTURE
+
+// ---- the anti-aliasing example's
+
+/** Low by the trees west of the square, their trunks and branches thin against the ground */
+const nearTrees = (client: GameClientApi) => stand(client, { x: 24, z: 22 }, 12, 160, 24)
+
+// ---- the outlines example's
+
+const outlines = { color: [1, 0.85, 0.35] as [number, number, number], width: 2, pulse: false, style: 'line' as 'line' | 'glow' }
+const OUTLINE_COLORS: Record<string, [number, number, number]> = {
+	Gold: [1, 0.85, 0.35],
+	White: [1, 1, 1],
+	Cyan: [0.3, 0.9, 1],
+	Green: [0.4, 1, 0.45],
+	Black: [0, 0, 0]
+}
+
+export const category: CategoryLooks = {
+	looks: {
+		'post-pipeline': {
+			ready: (client) => {
+				const undo = keep(client)
+				Object.assign(pipeline, { focus: false, aperture: 0.2, grain: 0, aberration: 0 })
+				client.picture.look = { tone: 'aces', exposure: 1.1, contrast: 1.1, saturation: 1.1, bloom: 0.4, bloomThreshold: 0.8, vignette: 0.3 }
+				// the edges as the card says at first
+				client.picture.antialias = 'msaa'
+				onSquare(client, 26, 32)
+				return undo
+			},
+			controls: [
+				select(
+					'Tone',
+					['none', 'standard', 'aces', 'neutral'],
+					'aces',
+					(client, tone) => look(client, { tone: tone as MapPictureLook['tone'] }),
+					'How light brighter than the screen shows is brought into range: none cuts it off flat white, ACES rolls it off softly.'
+				),
+				slider(
+					'Exposure',
+					{ min: 0.3, max: 2.5, step: 0.05, value: 1.1 },
+					(client, value) => look(client, { exposure: value }),
+					'How much light is let in, as a camera’s: the whole picture darker or brighter.'
+				),
+				slider(
+					'Contrast',
+					{ min: 0.5, max: 2, step: 0.05, value: 1.1 },
+					(client, value) => look(client, { contrast: value }),
+					'How far the darks and the lights are pulled apart: watch the shadows under the units deepen.'
+				),
+				slider(
+					'Saturation',
+					{ min: 0, max: 2, step: 0.05, value: 1.1 },
+					(client, value) => look(client, { saturation: value }),
+					'How strong the colours are: 0 is black and white, 2 makes the grass and the roofs loud.'
+				),
+				slider(
+					'Bloom',
+					{ min: 0, max: 3, step: 0.05, value: 0.4 },
+					(client, value) => look(client, { bloom: value }),
+					'How much light bleeds out round what is bright: the sunlit path and the fire haze over.'
+				),
+				slider(
+					'Bloom from',
+					{ min: 0, max: 1, step: 0.05, value: 0.8 },
+					(client, value) => look(client, { bloomThreshold: value }),
+					'How bright a pixel must be before it blooms: lower it and the grass glows too, not only the path.'
+				),
+				slider(
+					'Vignette',
+					{ min: 0, max: 1, step: 0.05, value: 0.3 },
+					(client, value) => look(client, { vignette: value }),
+					'How much the corners of the picture are darkened.'
+				),
+				slider(
+					'Sharpen',
+					{ min: 0, max: 3, step: 0.05, value: 0 },
+					(client, value) => look(client, { sharpen: value }),
+					'How much edges are made crisper: look at the grass blades and the stones of the path.'
+				),
+				slider(
+					'Grain',
+					{ min: 0, max: 1, step: 0.05, value: 0 },
+					(client, value) => {
+						pipeline.grain = value
+						pipelineLens(client)
+					},
+					'Film grain over the picture, moving every frame: plainest on the flat ground.'
+				),
+				slider(
+					'Colour split',
+					{ min: 0, max: 1, step: 0.05, value: 0 },
+					(client, value) => {
+						pipeline.aberration = value
+						pipelineLens(client)
+					},
+					'Red, green and blue pulled apart towards the edges, as a cheap lens does: look at the corners.'
+				),
+				toggle(
+					'Depth of field (on the knight)',
+					false,
+					(client, on) => {
+						pipeline.focus = on
+						pipelineLens(client)
+					},
+					'The lens focused on the knight: the woods behind him and the ground before him blur.'
+				),
+				slider(
+					'Aperture (f-stop)',
+					{ min: 0.02, max: 2, step: 0.01, value: 0.2 },
+					(client, value) => {
+						pipeline.aperture = value
+						pipelineLens(client)
+					},
+					'With depth of field on: smaller is a wider lens, a thinner sharp band and more blur.'
+				),
+				toggle(
+					'Ambient occlusion',
+					false,
+					(client, on) => {
+						client.picture.occlusion = on ? 'high' : 'off'
+						look(client, { occlusion: on ? 1 : 0, occlusionRadius: 2 })
+					},
+					'Corners, creases and the feet of what stands darken where light from all round reaches less.'
+				),
+				select(
+					'Anti-aliasing',
+					['msaa', 'fxaa', 'taa', 'off'],
+					'msaa',
+					(client, mode) => (client.picture.antialias = mode as typeof client.picture.antialias),
+					'How jagged edges are smoothed: off shows the stairs on the roofs and the grass, TAA smooths the most.'
+				),
+				readout('Picture', lookNow, 'What the picture has on now: its tone, its bloom, whether a pipeline is made.')
+			]
+		},
+		'post-bloom': {
+			ready: (client) => {
+				const undo = keep(client)
+				client.picture.look = { tone: 'aces', exposure: 1.1, bloom: BLOOM.bloom, bloomThreshold: 0.5, bloomSpread: 0.8 }
+				bloomNow.amount = BLOOM.bloom
+				// torches bright enough to light the square: a bloom needs a bright light to bleed from
+				client.setEnvironment({ lamps: { brightness: BLOOM.torches } })
+				onSquare(client, 20, 26)
+				return undo
+			},
+			controls: [
+				slider(
+					'Bloom',
+					{ min: 0, max: 4, step: 0.05, value: BLOOM.bloom },
+					(client, value) => {
+						bloomNow.amount = value
+						look(client, { bloom: value })
+					},
+					'How much light bleeds out round what is bright: the haze round the torches and the fire.'
+				),
+				slider(
+					'Spreads',
+					{ min: 0.2, max: 2, step: 0.05, value: 0.8 },
+					(client, value) => look(client, { bloomSpread: value }),
+					'How far the bloom spreads: low keeps a tight halo round each light, high washes the square.'
+				),
+				slider(
+					'Blooms from (brightness)',
+					{ min: 0.2, max: 1, step: 0.05, value: 0.5 },
+					(client, value) => look(client, { bloomThreshold: value }),
+					'How bright a pixel must be before it glows: lower it and the lit ground blooms too, not only the torches.'
+				),
+				slider(
+					'Exposure',
+					{ min: 0.3, max: 3, step: 0.05, value: 1.1 },
+					(client, value) => look(client, { exposure: value }),
+					'How much light is let in: brighter, more of the picture passes the bloom’s brightness and glows.'
+				),
+				slider(
+					'Torches',
+					{ min: 0, max: 5, step: 0.05, value: BLOOM.torches },
+					(client, value) => client.setEnvironment({ lamps: { brightness: value } }),
+					'How bright the torches burn: at 0 the square goes dark and nothing is bright enough to bloom.'
+				),
+				toggle(
+					'Bloom on',
+					true,
+					(client, on) => look(client, { bloom: on ? bloomNow.amount : 0 }),
+					'The bloom on or off at the strength the slider has: compare the torches with and without it.'
+				)
+			]
+		},
+		'post-tone': {
+			ready: (client) => {
+				const undo = keep(client)
+				client.picture.look = { tone: 'none', exposure: 2.2, bloom: 0.3, bloomThreshold: 0.85 }
+				stand(client, { x: 32, z: 36 }, 40, 170, 30)
+				return undo
+			},
+			controls: [
+				select(
+					'Tone mapping',
+					['none', 'standard', 'aces', 'neutral'],
+					'none',
+					(client, tone) => look(client, { tone: tone as MapPictureLook['tone'] }),
+					'How light brighter than white is brought into range: none cuts the lake off flat white, the others keep its colour.'
+				),
+				slider(
+					'Contrast',
+					{ min: 0.5, max: 2, step: 0.05, value: 1 },
+					(client, value) => look(client, { contrast: value }),
+					'How far the darks and the lights are pulled apart: the shadows of the trees go deeper or greyer.'
+				),
+				slider(
+					'Exposure',
+					{ min: 0.25, max: 4, step: 0.05, value: 2.2 },
+					(client, value) => look(client, { exposure: value }),
+					'How much light is let in: high burns the lake out unless a tone mapping brings it back.'
+				),
+				readout('Picture', lookNow, 'What the picture has on now: its tone, its bloom, whether a pipeline is made.')
+			]
+		},
+		'post-color': {
+			ready: (client) => {
+				const undo = keep(client)
+				const forget = teachGrades(client)
+				client.picture.look = { tone: 'neutral' }
+				onSquare(client, 26, 34)
+				return () => {
+					undo()
+					forget()
+				}
+			},
+			controls: [
+				select(
+					'Grade (look-up table)',
+					['None', ...Object.keys(GRADES)],
+					'None',
+					(client, name) => look(client, { grade: name === 'None' ? undefined : gradePath(name), gradeAmount: 1 }),
+					'A colour grade from a look-up table made in code: every colour of the picture mapped to another.'
+				),
+				slider(
+					'Grade amount',
+					{ min: 0, max: 1, step: 0.05, value: 1 },
+					(client, value) => look(client, { gradeAmount: value }),
+					'How much of the grade is used: 0 the picture as drawn, 1 the grade in full.'
+				),
+				slider(
+					'Saturation',
+					{ min: 0, max: 2.5, step: 0.05, value: 1 },
+					(client, value) => look(client, { saturation: value }),
+					'How strong the colours are: 0 is black and white, high makes the grass and the roofs loud.'
+				),
+				slider(
+					'Contrast',
+					{ min: 0.4, max: 2.2, step: 0.05, value: 1 },
+					(client, value) => look(client, { contrast: value }),
+					'How far the darks and the lights are pulled apart: low greys the picture, high deepens the shadows.'
+				),
+				select(
+					'Tint',
+					['None', 'Warm', 'Cold', 'Green', 'Magenta'],
+					'None',
+					(client, name) => {
+						const tints: Record<string, [number, number, number]> = {
+							Warm: [1, 0.7, 0.4],
+							Cold: [0.45, 0.7, 1],
+							Green: [0.5, 1, 0.5],
+							Magenta: [1, 0.45, 0.9]
+						}
+						look(client, name === 'None' ? { tintAmount: 0 } : { tint: tints[name], tintAmount: Math.max(client.picture.look.tintAmount ?? 0, 0.3) })
+					},
+					'The colour the whole picture leans to: a warm dusk, a cold night, a sickly green.'
+				),
+				slider(
+					'Tint amount',
+					{ min: 0, max: 1, step: 0.05, value: 0.3 },
+					(client, value) => look(client, { tintAmount: value }),
+					'How far the picture leans to the tint’s colour.'
+				)
+			]
+		},
+		'post-depth-of-field': {
+			ready: (client) => {
+				const undo = keep(client)
+				onSquare(client, 18, 22)
+				// once the knight is there, the lens on him
+				const focus = setTimeout(() => {
+					const target = knight(client)
+					if (target) lens(client, { focus: { at: { entity: target.id }, aperture: APERTURE } })
+				}, 300)
+				return () => {
+					clearTimeout(focus)
+					undo()
+					client.camera.easeTo({ distance: 30, pitch: (45 * Math.PI) / 180 })
+				}
+			},
+			controls: [
+				button(
+					'Focus on the knight',
+					(client) => {
+						const target = knight(client)
+						if (target) lens(client, { focus: { at: { entity: target.id }, aperture: aperture(client) } })
+					},
+					'The lens on the knight in the middle: he is sharp, the woods behind and the ground before him blur.'
+				),
+				button(
+					'Focus near',
+					(client) => lens(client, { focus: { distance: 9, aperture: aperture(client) } }),
+					'The lens on the ground just before the camera: the cart and the stones near it sharp, the company behind them blurs.'
+				),
+				button(
+					'Focus on the far woods',
+					(client) => lens(client, { focus: { distance: 60, aperture: aperture(client) } }),
+					'The lens on the woods far behind: they come sharp, and the whole square before them blurs.'
+				),
+				slider(
+					'Aperture (f-stop)',
+					{ min: 0.05, max: 2, step: 0.01, value: APERTURE },
+					(client, value) => {
+						const focus = client.picture.cinematic?.focus
+						if (focus) lens(client, { focus: { ...focus, aperture: value } })
+					},
+					'How wide the lens opens: small is a thin band in focus and much blur, 2 almost everything sharp.'
+				),
+				button(
+					'Miniature (tilt-shift)',
+					(client) => {
+						stand(client, SQUARE, 55, 200, 55)
+						look(client, { saturation: 1.4, contrast: 1.15, exposure: 1.1, tone: 'aces' })
+						lens(client, { focus: { at: { x: SQUARE.x, z: SQUARE.z }, aperture: 0.03 } })
+					},
+					'From high up, sharp in the middle and blurred above and below, colours strong: the village looks a toy.'
+				),
+				button(
+					'Close up again',
+					(client) => {
+						onSquare(client, 18, 22)
+						look(client, { saturation: 1, contrast: 1, exposure: 1, tone: 'none' })
+						const target = knight(client)
+						if (target) lens(client, { focus: { at: { entity: target.id }, aperture: APERTURE } })
+					},
+					'Back down by the company, the lens on the knight again.'
+				),
+				toggle(
+					'Depth of field',
+					true,
+					(client, on) => {
+						const target = knight(client)
+						lens(client, { focus: on && target ? { at: { entity: target.id }, aperture: aperture(client) } : null })
+					},
+					'The lens’ blur on or off: off, everything is sharp from the nearest stone to the far woods.'
+				)
+			]
+		},
+		'post-occlusion': {
+			ready: (client) => {
+				const undo = keep(client)
+				client.picture.occlusion = 'high'
+				client.picture.look = { occlusion: 1, occlusionRadius: 2 }
+				onSquare(client, 16, 34)
+				return undo
+			},
+			controls: [
+				toggle(
+					'Ambient occlusion',
+					true,
+					(client, on) => look(client, { occlusion: on ? 1 : 0 }),
+					'Corners, creases and the feet of the units darken where light from all round reaches less.'
+				),
+				select(
+					'Quality',
+					['high', 'low'],
+					'high',
+					(client, quality) => (client.picture.occlusion = quality as 'high' | 'low'),
+					'Low draws the occlusion at half the pixels with half the samples: softer and blotchier, for less of the GPU.'
+				),
+				slider(
+					'Strength',
+					{ min: 0, max: 2, step: 0.05, value: 1 },
+					(client, value) => look(client, { occlusion: value }),
+					'How dark the occlusion makes the creases: look under the units and where the houses meet the ground.'
+				),
+				slider(
+					'Looks around (cells)',
+					{ min: 0.25, max: 6, step: 0.25, value: 2 },
+					(client, value) => look(client, { occlusionRadius: value }),
+					'How far round each point it looks for what hides the light: small darkens fine creases, large broad shade.'
+				),
+				button(
+					'Look at the houses',
+					(client) => stand(client, { x: 41, z: 24 }, 14, 200, 30),
+					'The camera on the houses, where walls meet the ground.'
+				),
+				button('Look at the square', (client) => onSquare(client, 16, 34), 'The camera back on the square and its people.')
+			]
+		},
+		'post-film': {
+			ready: (client) => {
+				const undo = keep(client)
+				client.picture.look = { tone: 'aces', vignette: 0.6, contrast: 1.1 }
+				client.picture.cinematic = { grain: 0.4, aberration: 0.4 }
+				onSquare(client, 24, 30)
+				return undo
+			},
+			controls: [
+				slider(
+					'Grain',
+					{ min: 0, max: 1.5, step: 0.05, value: 0.4 },
+					(client, value) => lens(client, { grain: value }),
+					'Film grain over the picture, moving every frame: plainest on the flat ground.'
+				),
+				slider(
+					'Colour split',
+					{ min: 0, max: 1.5, step: 0.05, value: 0.4 },
+					(client, value) => lens(client, { aberration: value }),
+					'Red, green and blue pulled apart towards the edges, as a cheap lens does: look at the corners.'
+				),
+				slider(
+					'Vignette',
+					{ min: 0, max: 1.5, step: 0.05, value: 0.6 },
+					(client, value) => look(client, { vignette: value }),
+					'How much the corners of the picture are darkened.'
+				),
+				select(
+					'Vignette colour',
+					['Black', 'Brown', 'Red', 'Blue'],
+					'Black',
+					(client, name) => {
+						const colors: Record<string, [number, number, number]> = {
+							Black: [0, 0, 0],
+							Brown: [0.25, 0.14, 0.05],
+							Red: [0.5, 0, 0],
+							Blue: [0, 0.05, 0.3]
+						}
+						look(client, { vignetteColor: colors[name] })
+					},
+					'The colour the corners darken to: red for a hurt hero, blue for a cold night.'
+				),
+				toggle(
+					'Widescreen bars',
+					false,
+					(client, on) => client.screenPass.setFrame(on ? 2.39 : false, 0.6),
+					'Black bars above and below, as a film’s wide picture: they slide in and out.'
+				),
+				button(
+					'Old film',
+					(client) => {
+						look(client, { saturation: 0.35, tint: [1, 0.8, 0.55], tintAmount: 0.3, vignette: 1 })
+						lens(client, { grain: 1, aberration: 0.15 })
+					},
+					'Faded warm colours, heavy grain and dark corners, all at once.'
+				),
+				button(
+					'Cheap lens',
+					(client) => {
+						look(client, { saturation: 1.1, tintAmount: 0, vignette: 0.5 })
+						lens(client, { grain: 0.1, aberration: 1.3 })
+					},
+					'The colours split hard at the edges, little grain.'
+				)
+			]
+		},
+		'post-outline': {
+			ready: (client) => {
+				const undo = keep(client)
+				const inked = client.inking
+				Object.assign(outlines, { color: OUTLINE_COLORS.Gold, width: 3, pulse: false, style: 'line' })
+				onSquare(client, 18, 32)
+				const handles: { ours: ReturnType<GameClientApi['outline']>[]; theirs: ReturnType<GameClientApi['outline']>[] } = { ours: [], theirs: [] }
+				// once they are there: ours in the look of the controls, theirs red and seen through the houses
+				const put = setTimeout(() => {
+					handles.ours = people(client, PLAYER).map((each) => client.outline(each.id, { ...outlines }))
+					handles.theirs = people(client, 0).map((each) =>
+						client.outline(each.id, { color: [1, 0.2, 0.15], width: 3, throughWalls: true, style: 'glow', pulse: 1.2 })
+					)
+				}, 300)
+				outlinesNow.set = (change) => {
+					Object.assign(outlines, change)
+					for (const handle of handles.ours) handle.set({ ...outlines, pulse: outlines.pulse ? 1.2 : undefined })
+				}
+				outlinesNow.theirs = (on) => {
+					for (const handle of handles.theirs) handle.remove()
+					handles.theirs = on
+						? people(client, 0).map((each) =>
+								client.outline(each.id, { color: [1, 0.2, 0.15], width: 3, throughWalls: true, style: 'glow', pulse: 1.2 })
+							)
+						: []
+				}
+				return () => {
+					clearTimeout(put)
+					for (const handle of [...handles.ours, ...handles.theirs]) handle.remove()
+					client.inking = inked
+					undo()
+				}
+			},
+			controls: [
+				select(
+					'Colour',
+					Object.keys(OUTLINE_COLORS),
+					'Gold',
+					(_client, name) => outlinesNow.set({ color: OUTLINE_COLORS[name] }),
+					'The colour of the line round your own company.'
+				),
+				slider(
+					'Width (pixels)',
+					{ min: 1, max: 8, step: 0.5, value: 3 },
+					(_client, value) => outlinesNow.set({ width: value }),
+					'How thick the line round your company is, in pixels of the screen, however near or far they stand.'
+				),
+				select(
+					'Style',
+					['line', 'glow'],
+					'line',
+					(_client, style) => outlinesNow.set({ style: style as 'line' | 'glow' }),
+					'A crisp line on the edge of each unit, or a soft glow round it.'
+				),
+				toggle(
+					'Pulse',
+					false,
+					(_client, on) => outlinesNow.set({ pulse: on }),
+					'The line round your company breathes, brighter and fainter about once a second.'
+				),
+				toggle(
+					'Strangers through walls',
+					true,
+					(_client, on) => outlinesNow.theirs(on),
+					'The strangers by the well glow red, seen even where a house stands between them and the camera.'
+				),
+				toggle(
+					'Outline what the pointer is over',
+					true,
+					(client, on) => (client.hoverOutline = on),
+					'A line round whatever unit the pointer is over: move it across the square to see.'
+				),
+				toggle(
+					'Ink',
+					false,
+					(client, on) => (client.inking = on),
+					'A thin dark line round every unit’s model, as a drawing’s ink: the game’s own look for units, not a highlight.'
+				)
+			]
+		},
+		'post-looks': {
+			ready: (client) => {
+				const undo = keep(client)
+				const base = client.picture.look
+				looksBase.look = base
+				showPreset(client, 'Cinematic', base)
+				onSquare(client, 24, 26)
+				return () => {
+					presetNow.shader?.pass.remove()
+					presetNow.shader = undefined
+					client.screenPass.setFrame(false, 0)
+					undo()
+				}
+			},
+			controls: [
+				select(
+					'Look',
+					Object.keys(PRESETS),
+					'Cinematic',
+					(client, name) => showPreset(client, name, looksBase.look),
+					'A whole look made of the passes together: its tone, colours, bloom, grain, bars and a pass of its own.'
+				),
+				button('Near', (client) => onSquare(client, 16, 22), 'The camera close on the company.'),
+				button('Far', (client) => onSquare(client, 40, 42), 'The camera far back over the whole village.'),
+				readout('Picture', lookNow, 'What the picture has on now: its tone, its bloom, whether a pipeline is made.')
+			]
+		},
+		'post-custom': {
+			ready: (client) => {
+				const undo = keep(client)
+				custom.amount = 1
+				custom.on = true
+				custom.pass = addShader(client, 'Sketch', 1)
+				onSquare(client, 24, 30)
+				return () => {
+					custom.pass?.pass.remove()
+					custom.pass = undefined
+					undo()
+				}
+			},
+			controls: [
+				select(
+					'Pass',
+					['None', ...Object.keys(SHADERS)],
+					'Sketch',
+					(client, name) => {
+						custom.pass?.pass.remove()
+						custom.pass = name === 'None' ? undefined : addShader(client, name as ShaderName, custom.amount)
+						if (custom.pass) custom.pass.pass.enabled = custom.on
+					},
+					'Which shader of ours is drawn over the finished picture: each is a few lines of GLSL and WGSL in passes.ts.'
+				),
+				slider(
+					'Strength',
+					{ min: 0.4, max: 1, step: 0.05, value: 1 },
+					(_client, value) => {
+						custom.amount = value
+						if (custom.pass) custom.pass.amount = value
+					},
+					'How strongly the pass is drawn: a uniform of its shader, set every frame.'
+				),
+				toggle(
+					'On',
+					true,
+					(_client, on) => {
+						custom.on = on
+						if (custom.pass) custom.pass.pass.enabled = on
+					},
+					'The pass taken off the camera and put back (its `enabled`), without making it again.'
+				),
+				readout(
+					'Passes of ours',
+					(client) =>
+						client.picture.passes.map((each) => `${each.name}${each.drawn ? '' : each.enabled ? ' (waiting)' : ' (off)'}`).join(', ') || 'none',
+					'The passes of ours on the picture, and whether each is drawn yet (its shader made) or off.'
+				)
+			]
+		},
+		'post-antialias': {
+			ready: (client) => {
+				const undo = keep(client)
+				// the edges as the card says at first
+				client.picture.antialias = 'msaa'
+				nearTrees(client)
+				return undo
+			},
+			controls: [
+				select(
+					'Anti-aliasing',
+					['msaa', 'fxaa', 'off', 'taa'],
+					'msaa',
+					(client, mode) => (client.picture.antialias = mode as typeof client.picture.antialias),
+					'How jagged edges are smoothed: off shows stairs along the roof’s beams and the branches, TAA smooths even the grass.'
+				),
+				slider(
+					'Resolution',
+					{ min: 0.25, max: 1, step: 0.05, value: 1 },
+					(client, value) => (client.renderScale = value),
+					'How many of the screen’s pixels the scene is drawn with: at a quarter it goes soft and blocky, the card stays sharp.'
+				),
+				slider(
+					'Sharpen',
+					{ min: 0, max: 3, step: 0.05, value: 0 },
+					(client, value) => look(client, { sharpen: value }),
+					'How much edges are made crisper after the picture is drawn: it wins back some of a low resolution.'
+				),
+				button('Near the trees', nearTrees, 'The camera low by the trees, their thin trunks and branches against the ground.'),
+				button('Far', (client) => onSquare(client, 45, 40), 'The camera far back: small things are where edges shimmer most.'),
+				readout(
+					'Drawn',
+					(client) => `${client.picture.antialias}, ${Math.round(client.renderScale * 100)}% resolution, ${client.picture.samples} samples`,
+					'How the scene is drawn now: the smoothing, the share of the screen’s pixels, the GPU’s samples of each.'
+				)
+			]
+		},
+		'post-zones': {
+			ready: (client) => {
+				const undo = keep(client)
+				onSquare(client, 30, 34)
+				return undo
+			},
+			controls: [
+				button(
+					'Into the cursed wood',
+					(client) => client.camera.panTo({ x: 11, z: 32 }, 3),
+					'The camera glides west into the cursed wood: the picture turns green, dark and misty as it goes in.'
+				),
+				button('Back to the square', (client) => client.camera.panTo(SQUARE, 3), 'The camera glides back, and the picture to the village’s own.'),
+				readout(
+					'Picture',
+					(client) => {
+						const now = client.picture.now
+						return `saturation ${(now.saturation ?? 1).toFixed(2)}, tint ${(now.tintAmount ?? 0).toFixed(2)}`
+					},
+					'The picture’s saturation and tint now: they ease between the two looks as the camera moves.'
+				)
+			]
+		}
+	}
+}
+
+/** The looks example's picture before any look: each laid over it */
+const looksBase: { look: MapPictureLook } = { look: {} }
+
+/** The outlines example's: what the controls change, set as it is ready */
+const outlinesNow: { set: (change: Partial<typeof outlines>) => void; theirs: (on: boolean) => void } = { set: () => {}, theirs: () => {} }
+
+/** The custom pass example's pass on now, and its strength */
+const custom: { pass?: OwnPass; amount: number; on: boolean } = { amount: 1, on: true }