EASEL.js

canvas

loader / bvh

What this shows

Parse a Biovision Hierarchy motion file with BVHLoader and play its skeleton animation through an Animator, drawn by a SkeletonHelper over a grid.

Side by side with the three.js r186 original: webgl_loader_bvh.html

Differences from three.js

  • The upstream pirouette.bvh has no licence notice and credits the CMU motion capture database, whose terms are not an open licence, and its rig does not match the CMU skeleton, so both sides load spin.bvh instead: a 19-joint humanoid pirouette with 90 frames at 30 fps authored for this repository, in place of 43 joints and 592 frames at 120 fps.
  • EASEL SkeletonHelper reads prepared world matrices and does not update itself, so the port updates the bone hierarchy's world matrices and calls skeletonHelper.update() after each animator step.
  • Helper lines are drawn one pixel wide without antialiasing.
EASEL (Canvas2D)
This example needs a canvas-capable browser.

Loading scene…

three.js r186 (WebGL)
This example needs a canvas-capable browser.

Loading scene…

Loading scene…

Key API excerpt

import * as EASEL from "@xsyetopz/easel";


const result = new EASEL.BVHLoader().parse(bvhText);
const root = result.skeleton.bones[0];
const skeletonHelper = new EASEL.SkeletonHelper(root);

scene.add(root);
scene.add(skeletonHelper);

const mixer = new EASEL.Animator(root);
mixer.clipAction(result.clip).play();

mixer.update(timer.update().delta);
root.updateMatrixWorld(false, true, true);
skeletonHelper.update();
renderer.prepare(scene, camera);
renderer.render(scene, camera);