Page format
The step-by-step workflow for a new topic is in WRITING.md. This file is the format.
The goal is a good first implementation and an honest map of the options — not the final word. Write what is common and proven; mark opinions and typical values as such ("typically", "start at ~0.1 s") rather than stating them as rules.
Rules
- One folder per topic, in its category folder, kebab-case:
rendering/outlines/README.md, withimg/anddemo/beside it. - A topic is a problem, a technique is a solution. "Outlines" is a topic; "inverted hull" is a technique. If a technique grows beyond ~40 lines, give it its own file and link it from the topic.
- Short. A reader should be able to pick a technique in two minutes. Enough to implement from, not a tutorial. Link out for depth.
- Engine-agnostic. Describe the idea (passes, data, math). Put engine specifics in an
Engine notesline, only when they save real pain. - Same fields for every technique, so they compare. Leave a field out rather than pad it.
- Say what it looks like. One line of visual/feel description beats a paragraph of theory.
- Name a baseline — the good one, not the simplest one. The baseline is what a competent team would ship today: good-looking (or good-feeling) and fast. Not the most basic technique. List cheaper fallbacks separately, with when to use them (low-end targets, tiny scope).
- Cite real, public uses (shipped games, engines, papers, talks) under
Seen in/References. No local file paths, machine-specific addresses or private project code.
Topic sections
At a glance (table) → one section per technique (fields below) → In game design (what it's for, how games layer variants, when it's on, accessibility, art-direction angle) → Baseline → Related → References.
Fields
| Field | What goes in it |
|---|---|
| Looks like | What the player sees / feels. |
| How | 2–5 bullets: the core steps. |
| Strong | Where it wins. |
| Weak | Where it breaks, artefacts, failure cases. |
| Needs | Prerequisites: data (depth, normals, stencil), systems, math, authoring work. |
| Cost | Rough runtime + authoring cost: low / med / high with a reason. |
| Variants | Derivations and knobs worth knowing (short bullets, can link). |
| Seen in | Shipped games, engines or public projects that use it. Never local paths or private project files. |
| Reference code | Link to the technique's file in demo/. |
Images
Images are encouraged: one picture of what a technique looks like often replaces a paragraph. They must be real in-game / in-engine renders, never hand-drawn or script-generated diagrams.
Sources, in order of preference:
- Our reference demos — captures from the demo that implements the technique in this repo.
List each shot in
demo/shots.json(file, URLquery) and runnpm run capture, so every image can be regenerated. Clips add"seconds": they're captured as MP4 (H.264, 720p30) plus a still poster.webpof the same name. Each image is one bare render of one thing: no collages, split screens, side-by-sides or overlays, and no other technique's effect mixed in. Show comparisons as separate images. - The web — screenshots from shipped games, talks, papers or articles. Link to the source and credit it under the image. Only copy the file into the repo if its license allows; otherwise embed the external URL or just link it.
Format:
- Local files go in the topic's
img/, named<topic>-<what>.<ext>:rendering/outlines/img/outlines-jump-flood-hide.webp. - Relative links (
), and alt text that says what the image shows. - WebP for stills. Motion is MP4, never GIF or animated WebP (blurry, big): reference the clip's poster
in Markdown, and the site playsimg/x.mp4in place. Stills under ~500 KB; clips under ~1 MB (use"quality": "medium"for long or busy clips). - No screenshots of private projects.
Demos
One demo per topic in <category>/<topic>/demo/: index.html, main.js (scene + UI),
one file per technique (that's what docs link to), shots.json. Shared setup lives in
engine/ (renderer + capture/record, stage, pass helpers).
-
Make every captured image playable: follow it on the same line with
[▶ Play](demo/?<its shot query>)(withouttime=). In Markdown that's a link under the image; on the site the image itself becomes the demo (▶ swaps it for the live page, preset to the same state). Works inside table cells too. -
Code is a rough reference: short, commented with the idea (the same steps as the doc's How), explicit passes over framework magic. Not production code.
-
Every technique switchable with
?t=<technique>; every tunable in the GUI and overridable by URL. -
Show weaknesses honestly: the scene should include cases where a technique breaks (hard edges, flat faces, occluders…), so the images teach the trade-off.
-
Assets: CC0 or our own only, credited in a comment where loaded.
Topic frontmatter
---
topic: Outlines
category: rendering
tags: [stylised, post-process, selection]
status: stub | draft | reviewed
---
Tags are free-form but reuse existing ones; they are how agents search across categories.
Adding a category
Only when three or more topics would not fit anywhere else. Add it to the table in README.md.