bvh-loader.js

Objective [DONE]

bvh.py to bvh.js ☕

Npm package link:

https://www.npmjs.com/package/bvh-loader

Project structure

NPM Service

Navigate to module.html it is local test for npm package. This link also use npm service via cdn.skypack.dev

• https://codepen.io/zlatnaspirala/pen/vYdVxQR

Use great cdn.skypack.dev free service. No build , free hosting library.

Just put in test.js - import MEBvh from "https://cdn.skypack.dev/[email protected]";

Example:

import MEBvh from "./index";

var anim = new MEBvh();

anim
  .parse_file(
    "https://raw.githubusercontent.com/zlatnaspirala/Matrix-Engine-BVH-test/main/javascript-bvh/example.bvh",
  )
  .then(() => {
    console.info("plot_hierarchy no function");
    anim.plot_hierarchy();
    var r = anim.frame_pose(0);
    console.log("FINAL P => ", r[0].length);
    console.log("FINAL R => ", r[1].length);
    var KEYS = anim.joint_names();
    for (var x = 0; x < r[0].length; x++) {
      console.log(
        "->" + KEYS[x] + "-> position: " + r[0][x] + " rotation: " + r[1][x],
      );
    }
    var all = anim.all_frame_poses();
    console.log("Final All -> ", all);
  });

Basic raw implementation with The Beast (matrix-engine-wgpu)

var animBVH = new MEBvh();
let loadBVH = path => {
  return new Promise((resolve, reject) => {
    animBVH
      .parse_file(path)
      .then(() => {
        animBVH.plot_hierarchy();
        var r = animBVH.frame_pose(0);
        var KEYS = animBVH.joint_names();
        let ALL_MESHES = [];
        for (var x = 0; x < r[0].length; x++) {
          // console.log("->" + KEYS[x] + "-> position: " + r[0][x] + " rotation: " + r[1][x]);
          var boneName = "MEBVH" + KEYS[x];
          const mesh = app.addMeshObj({
            material: {type: "standard", share: true},
            position: {x: 0, y: -5, z: -10},
            rotation: {x: 0, y: 0, z: 0},
            rotationSpeed: {x: 0, y: 0, z: 0},
            texturesPaths: ["./res/textures/floor1.webp"],
            name: boneName,
            mesh: m.cube,
            physics: {enabled: false},
          });
          ALL_MESHES.push(mesh);
        }
        var all = animBVH.all_frame_poses();
        var countAnim = 0;
        app.autoUpdate.push({
          update: () => {
            for (var x = 0; x < ALL_MESHES.length; x++) {
              ALL_MESHES[x].position.SetX(all[0][countAnim][x][0]);
              ALL_MESHES[x].position.SetY(all[0][countAnim][x][1]);
              ALL_MESHES[x].position.SetZ(all[0][countAnim][x][2]);
            }
            countAnim++;
            if (countAnim >= all[0].length - 1) countAnim = 0;
          },
        });
        resolve(animBVH);
      })
      .catch(err => {
        reject(err);
      });
  });
};

loadBVH("./res/bvh/example.bvh").then(r => {
  // ...
});

New features:

• 1.0.0 added matrixFromKeyframe intro class MEBvhJoint. Last version is in module folder [npm use last version]. bvh loader now is adapted also for matrix-engine-webgpu. I use webgpu-matrix npm package for matrixFromKeyframe used in matrix-engine-webgpu project for skinnedMesh glb import.

Licence

Mozilla Public License Version 2.0

Credits

Original source: MIT Licence https://github.com/dabeschte/npybvh

More reference from origin source: Euler's rotation theorem tells us that any rotation in 3D can be described by 3 angles. Let's call the 3 angles the Euler angle vector and call the angles in the vector :Math:alpha, :Math:beta and :Math:gamma. The vector is [ :Math:alpha, :Math:beta. :Math:gamma ] and, in this description, the order of the parameters specifies the order in which the rotations occur (so the rotation corresponding to :Math:alpha is applied first). @source https://github.com/matthew-brett/transforms3d/blob/master/transforms3d/euler.py Bonus ref: @source https://www.khanacademy.org/math/precalculus/x9e81a4f98389efdf:matrices/x9e81a4f98389efdf:adding-and-subtracting-matrices/e/matrix_addition_and_subtraction

About me

https://maximumroulette.com