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.
A few things the viewer does. Each one is just a URL.
Single mode plays one clip. Lineup mode adds clips side by
side in click order, on a shared timeline (?clips=a,b,c). This works for
every clip card on this page; the orange ⧉ opens just that clip in a popup.
Recordings ship as their own pack (mocap-clips, from the
companion data repo) that this page pins next to the viewer; each card addresses one of
its clips by site path (?clip=/…/mocap-clips/<path>). The first
sessions are being converted.
Whole capture sessions as converted, before they are cut into takes for the
clips pack. They are large (tens of MB) and never go into a pack; the viewer loads them from
an external host by absolute URL. Each card links the session's archive video
(🎬, cameras only) where one exists, and the pass's own video with the mocap
overlays (🦴) where there is one. Any JSON clip on a CORS-enabled URL plays the same way:
viewer.html?clip=https://…/your-clip.json.
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.
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 preview can be see-through:
bg=transparent lets your page show behind the figure.
See it over a host-owned circle and a scrolling page.
Still pose, circling camera and fades for badges.
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.
Toggles take 1/0. A param'd value also becomes that
view's reset default; it never overwrites a visitor's saved settings.
| Param | Meaning | Example |
|---|
A clip is a versioned JSON
"positions" file: per-frame 3D coordinates of a simplified skeleton (28 joints,
25 measured by the converter), 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.