Parkour mocap viewer

Short moves, seen from every side.

A tiny browser viewer for motion-capture clips, built for parkour-augsburg's collection of parkour (and related) moves. Scrub a trick frame by frame, orbit around it, slow it down, line up attempts side by side. The viewer is embedded as a static page iframe, configurable with URL parameters. Everything below rewrites the viewer you see. Mocap data based on data self-recorded videos, converted with freemocap and some custom-built scripts. Freemocap data also converted into custom simple data formats, with spline-support and converters for some other source formats.

Start here

A few things the viewer does. Each one is just a URL.

Open ↗
viewer  · 
Clip library

Pick a clip, or line several up

Single mode plays one clip. Lineup mode adds clips side by side in click order, on a shared timeline (?clips=a,b,c).

Our recordings

Captured by Parkour Augsburg

Recordings ship as their own pack (mocap-clips, from the companion data repo) that this page pins next to the viewer; each card plays one of its clips via ?clipbase=../mocap-clips/&clip=<path>. The first sessions are being converted.

Controls

Every switch is a URL parameter

Change anything here and the viewer above reloads with it. A control at the viewer's default adds nothing to the URL; the highlighted ones are what your current view carries. Params go on the viewer URL, never on the host page.

Embedding

Put it on your page

The viewer is fully static: plain ES modules plus a vendored Three.js, no build, no install. It ships as a versioned pack (mocap-viewer-<version>.tar.gz in the repo's package registry): pin the version, unpack it under your site's packs/mocap-viewer/, embed it as an iframe. This page does exactly that. The snippet follows the playground:

Clips are plain JSON addressed by location, there is no manifest. ?clip= takes a bare name (resolved in the viewer's bundled src/clips/data/), a path relative to ?clipbase=, or any absolute path or URL. Host integration details (lazy iframes, the mocap:* postMessage protocol, fetching the pack, Flutter WebView): dev/EMBED.md in the repo.

A host page can hold dozens of embeds because a closed one costs nothing: these cards create their iframes without src and boot a viewer only when first opened. The host pauses hidden viewers via postMessage. The green dot is a viewer's render loop.

Reference

Everything in one place

Toggles take 1/0. A param'd value also becomes that view's reset default; it never overwrites a visitor's saved settings.

All URL parameters
ParamMeaningExample
Keyboard, in fullscreen the most useful keys; the viewer's panel shows the rest on hover
Clip format what a clip file is

A clip is a versioned JSON "positions" file: per-frame 3D coordinates of a simplified skeleton (25 joints, 23 in the reduced set), exactly what mocap tooling yields, plus an optional header (title, tags, highlight range, capture provenance), obstacles (rails, walls, trampolines) and takes that split one recording into attempts. The schema ships in the pack as CLIP-SCHEMA.md plus the machine-checkable clip.schema.json; the converters live in the companion data repo.