@v12-engine/create 0.1.0 → 0.4.0

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

@@ -0,0 +1,202 @@
+/**
+ * The post-processing examples on the rules' side: their list entries, maps and starts (`ExampleCategory`). What they
+ * show is all the client's, after the scene is drawn (`./looks.ts`), so the rules add nothing: each plays one of the
+ * nature examples' maps (a village with torches and a fire, a lake under a waterfall) with people about
+ */
+import type { MapEnvironment, World } from '@v12-engine/engine'
+import { PLAYER, UNIT } from '../common/units'
+import type { ExampleCategory, ExampleDef } from '../define'
+import { plant } from '../nature/land'
+import { lakeMap, lakeTrees, villageMap, villageTrees } from '../nature/maps'
+import { lookAtHour } from '../nature/skies'
+
+/** The people of the village's square: a knight in the middle, his company round him, and a few strangers by the well */
+function villagers(world: World): void {
+	const ours: [string, number, number][] = [
+		[UNIT.knight, 32, 33.5],
+		[UNIT.footman, 30.5, 32],
+		[UNIT.footman, 33.5, 32],
+		[UNIT.archer, 29.5, 35],
+		[UNIT.mage, 34.5, 35]
+	]
+	for (const [type, x, z] of ours) world.spawn(type, { at: { x, z }, owner: PLAYER })
+	world.spawn(UNIT.footman, { at: { x: 36.5, z: 28 }, owner: 0 })
+	world.spawn(UNIT.archer, { at: { x: 37.5, z: 29.5 }, owner: 0 })
+}
+
+/** The village, its woods and its people */
+const village = (world: World) => {
+	plant(world, villageTrees(villageMap()))
+	villagers(world)
+}
+
+/** The village at an hour, with a little wind and sky clouds: the look each example starts from, its own picture over it */
+const villageAt = (hour: number): MapEnvironment => ({
+	...lookAtHour(hour),
+	clouds: { cover: 0.4, ...lookAtHour(hour).clouds },
+	wind: { around: 90, strength: 0.25, gusts: 0.3 }
+})
+
+/** An example of the post-processing category, on the village at an hour */
+const inVillage = (def: Omit<ExampleDef, 'category' | 'start'>, hour = 17): ExampleDef => ({
+	category: 'post',
+	map: villageMap,
+	start: village,
+	environment: villageAt(hour),
+	...def
+})
+
+/**
+ * The village with a cursed wood west of it: a part of the map with a picture of its own (`MapPictureZone`), green,
+ * dark and misty, blended in over 10 cells as the camera looks into it
+ */
+function cursedVillage() {
+	const map = villageMap()
+	map.environment = {
+		...map.environment,
+		pictureZones: [
+			{
+				id: 1,
+				name: 'Cursed wood',
+				shape: { kind: 'circle', x: 9, z: 32, radius: 15 },
+				blend: 10,
+				look: {
+					saturation: 0.45,
+					contrast: 1.25,
+					exposure: 0.85,
+					tint: [0.45, 1, 0.55],
+					tintAmount: 0.35,
+					vignette: 0.7,
+					vignetteColor: [0, 0.08, 0.02],
+					bloom: 0.6,
+					bloomThreshold: 0.6
+				},
+				fog: { start: 25, end: 95, color: [0.16, 0.26, 0.18] },
+				light: { tint: [0.55, 1, 0.6], amount: 0.6 }
+			}
+		]
+	}
+	return map
+}
+
+export const category: ExampleCategory = {
+	examples: [
+		inVillage({
+			id: 'post-pipeline',
+			title: 'Every pass at once',
+			summary:
+				'The whole finished picture on one card: tone, exposure, colour, bloom, vignette, sharpening, grain, colour split, depth of field, ambient occlusion and anti-aliasing. Try each on and off.',
+			tags: ['post-processing', 'pipeline', 'DefaultRenderingPipeline', 'picture', 'toggles']
+		}),
+		inVillage(
+			{
+				id: 'post-bloom',
+				title: 'Bloom and glow',
+				summary: 'Night in the village: torches and a fire bleed light into the dark. Set how much blooms, from how bright, and how far it spreads.',
+				tags: ['bloom', 'glow', 'night', 'lights', 'HDR']
+			},
+			22.5
+		),
+		{
+			id: 'post-tone',
+			category: 'post',
+			title: 'Tone mapping and exposure',
+			summary:
+				'A bright lake at golden hour, brighter than the screen can show. Pick how the light is brought into range (none, standard, ACES, neutral) and how much is let in.',
+			tags: ['tone mapping', 'ACES', 'exposure', 'HDR', 'neutral'],
+			map: lakeMap,
+			start: (world) => plant(world, lakeTrees(lakeMap()), 0.03),
+			environment: { ...lookAtHour(17.6), water: { shallow: [0.5, 0.6, 0.6], deep: [0.12, 0.2, 0.3] }, wind: { around: 80, strength: 0.25 } }
+		},
+		inVillage(
+			{
+				id: 'post-color',
+				title: 'Colour grading',
+				summary:
+					'Lean the whole picture: more or less colour, contrast, a tint of any colour, or a grade from a look-up table made in code. The village by day.',
+				tags: ['colour grading', 'saturation', 'contrast', 'tint', 'LUT', 'color']
+			},
+			12
+		),
+		inVillage(
+			{
+				id: 'post-depth-of-field',
+				title: 'Depth of field',
+				summary:
+					'Sharp where the lens is focused, blurred in front and behind. Focus on the knight, near the lens or on the far woods, open the aperture, or make the village a miniature.',
+				tags: ['depth of field', 'DOF', 'focus', 'bokeh', 'tilt-shift', 'aperture']
+			},
+			10
+		),
+		inVillage(
+			{
+				id: 'post-occlusion',
+				title: 'Ambient occlusion',
+				summary:
+					'Creases, corners and the feet of what stands darken where light from all around reaches less (SSAO). Turn it on, its strength and how far it looks.',
+				tags: ['ambient occlusion', 'SSAO', 'shadows', 'contact']
+			},
+			11
+		),
+		inVillage(
+			{
+				id: 'post-film',
+				title: 'Film: grain, colour split, vignette',
+				summary: "What a camera's lens and film add: grain that moves, colours split at the picture's edges, edges darkened. Each by its own amount.",
+				tags: ['film grain', 'chromatic aberration', 'vignette', 'lens', 'camera']
+			},
+			16
+		),
+		inVillage(
+			{
+				id: 'post-outline',
+				title: 'Outlines',
+				summary:
+					'Lines round units: your own company outlined, the strangers glowing red through the houses, and what the pointer is over. Their colour, width, style and pulse.',
+				tags: ['outline', 'highlight', 'glow', 'silhouette', 'through walls', 'hover']
+			},
+			13
+		),
+		inVillage(
+			{
+				id: 'post-looks',
+				title: 'Looks: cinematic, noir, dreamy, retro',
+				summary:
+					'Whole looks made of the passes: a widescreen film, black and white noir, a soft bright dream, a pixelated retro game, sepia, a cold thriller. Pick one.',
+				tags: ['presets', 'cinematic', 'noir', 'dreamy', 'retro', 'pixel', 'sepia', 'look']
+			},
+			16.5
+		),
+		inVillage(
+			{
+				id: 'post-custom',
+				title: 'A pass of your own',
+				summary:
+					'Shaders of your own after the picture: pixels, a CRT, under water, a pencil sketch, a heat vision. Each a few lines of GLSL put on with picture.addPass.',
+				tags: ['custom pass', 'shader', 'GLSL', 'addPass', 'PostProcess', 'CRT', 'pixelate', 'sketch']
+			},
+			15
+		),
+		inVillage(
+			{
+				id: 'post-antialias',
+				title: 'Anti-aliasing and resolution',
+				summary:
+					'Close on thin branches and blades of grass: compare MSAA, FXAA, TAA and none, and draw at a lower or higher resolution than the screen.',
+				tags: ['anti-aliasing', 'MSAA', 'FXAA', 'TAA', 'resolution', 'render scale', 'quality']
+			},
+			14
+		),
+		inVillage(
+			{
+				map: cursedVillage,
+				id: 'post-zones',
+				title: 'Places with a look of their own',
+				summary:
+					'The woods west of the village are cursed: green, dark and misty. Walk the camera into them and out, and the picture blends between the two looks.',
+				tags: ['picture zones', 'areas', 'mood', 'blend', 'pictureZones']
+			},
+			15
+		)
+	]
+}