Game Dev Techniques
A catalogue of game development techniques: what they look like, roughly how they work, where they shine and break, what they need, and what a sensible baseline is.
Written for game devs and their agents: skim the index, open a topic, pick a technique, follow the baseline. Engine-agnostic by default; engine notes only where they matter.
A starting point, not ground truth. This is a collection of what is common, meant to turn a rough prototype into a good one: set expectations (what it looks/feels like, what it costs, where it breaks), give a sensible first implementation, and show the options for when you outgrow it. Numbers are typical starting values, not rules. Verify against your own game, and deviate freely when the design calls for it.
How to read a topic
Each file is one topic (a problem, e.g. "outlines") holding several techniques (ways to solve it, e.g. inverted hull, jump flood). Every technique lists the same fields, so they compare side by side. Each topic ends with a baseline: the one to reach for first.
To add a topic, follow WRITING.md (research → draft → technical pass → implement → update). CONTRIBUTING.md has the format, _template.md the skeleton.
Layout
<category>/<topic>/README.md the topic: techniques, trade-offs, baseline
<category>/<topic>/img/ captures from the demo
<category>/<topic>/demo/ playable three.js demo, one file per technique
engine/ shared demo engine, capture tools, docs-site builder
Demos and the site
Each topic has a small three.js demo (WebGPU, TSL shaders) with every technique switchable. The demos are where the images come from and serve as a rough code reference: readable over clever, not production-ready or engine-specific.
npm install
npm run dev # docs site + playable demos at http://localhost:4817
npm run build # static site in dist/ (docs pages + demos, with .br/.gz copies), deploy anywhere
DEPLOY_HOST=<ssh host> npm run deploy # build, upload over SSH, swap in atomically (DEPLOY_PATH, default /opt/techs/site)
npm run capture # re-render every image listed in <category>/<topic>/demo/shots.json
npm run capture -- outlines # only one topic
npm run shot -- rendering/outlines "t=jump-flood&width=12" out.png # any state, any file
npm run shot -- movement/jumping "script=tour" out.mp4 --frames 80 # a clip
There is no backend: the site is static files, and all rendering happens in the visitor's browser.
Serve dist/ with any static file server; it needs HTTPS for WebGPU (plain HTTP falls back to WebGL2).
On the site, a [▶ …](demo/…) link on its own line becomes an embedded, playable demo; in plain
Markdown it's just a link. In a running demo, P saves a screenshot, V starts/stops a real-time
recording, and C renders a frame-perfect MP4 clip (fixed timestep, GPU video encoder via WebCodecs);
?size=1280x720 fixes the resolution. Captured clips use the same in-page encoder, so they're fast. Capture needs Chrome with WebGPU (set
CHROME_PATH if it isn't found); clips are MP4 (H.264, 720p) with a WebP poster, and need ffmpeg for the poster.
Categories
| Folder | Covers |
|---|---|
| rendering/ | Shading, post-processing, stylisation, atmosphere, lighting tricks |
| movement/ | Character controllers, jumping, dashing, climbing, swimming |
| camera/ | Follow cameras, collision, framing, shake, first/third-person rigs |
| physics/ | Collision queries, ragdolls, ropes, vehicles, destruction |
| ai/ | Decision making (FSM, BT, utility, GOAP), pathfinding, steering, perception |
| animation/ | Blending, IK, root motion, procedural animation, facial |
| world/ | Procedural generation, terrain, streaming, LOD, foliage |
| game-feel/ | Juice: hit-stop, screen shake, squash & stretch, feedback |
| networking/ | Authority models, prediction, interpolation, lag compensation |
| architecture/ | State machines, ECS, events, save systems, data-driven design |
Index
| Topic | Techniques | Status |
|---|---|---|
| Outlines | Inverted hull, edge detection, mask dilation, jump flood, x-ray, fresnel rim, authored lines | reviewed |
| Fog | Distance/height fog, fog cards, raymarched volumetric, froxel volumetric | reviewed |
| Jumping | Impulse jump, variable height, coyote time, jump buffer, fall gravity, air/wall jumps | reviewed |
| Locomotion | Blend space, root motion, stride/orientation warping, distance matching, foot IK/locking, motion matching, procedural, learned models | reviewed |
Status: stub (headings only) → draft (all fields filled) → reviewed (checked against a real implementation).