WebGLを使用して、Chromeブラウザーで動作します。

用途としては、多数のBVHファイルから使いたい動きを見つける。

モーション中から、抜き出すためのフレームを見つけるなどです。

実際のモデルファイルとモーションファイルの結合はBlenderなどをお使いください。

ファイルを選択の所をクリックして、見てみたいBVHファイルを選択します。

すると選択したBVHが動き出します。(ファイルデーターはFile APIという仕組みを通じでローカルでやり取りされています)

同じファイルを読み込む場合は、Reloadというボタンを押します。

選択したファイルは履歴として残ります。以前開いたBVHに切り替えたい場合は、そのファイル名をクリックします。

マウスののドラッグで表示角度を変更できます。またマウスのホイール機能でズームが変更可能です。

ファイル選択時に、シフトキーまたは、CTRLキーあるいは、CTRL+Aキーで複数のファイルを選択することができます。

選択したファイルは一覧として表示されます。現在選択されている次のモーションを動かしたい場合、Nextボタンを前を動かしたい場合は、Prevボタンを押します。またその横のAuto Playの所をNoneから、数字に変更すると、その数字だけ再生後に次のモーションに自動敵に変わります。

　複数のファイルを選択した場合、Auto Playを1(１回で次のモーションに移る)にしてみてください。

モーションを選択して、Removeボタンを押すと、そのモーションをRemove Allを押すと、すべてのモーションをリストから除けます。

再生と停止ボタンを押すことで、モーションを停止したり、再び再生できます。また停止時に、Prevで前のフレームへ、Nextで次のフレームに移ります。だいたいのフレームをその横のバーを変更することで移動できます。バーの横に表示されている数字は、現在の再生フレーム/全体のフレーム数です。

マウスのドラッグとホイール以外にも、XYZ-Rotateで角度を XYZ-Positionでモデルの位置を変更可能です。

Speedの所を変更すうことで、再生速度を変更できます。

２倍・４倍・１０倍・または、半分の速度、四分の一の速度で再生できます。

その横のA/B Loop とA B ボタンで範囲を指定してループするようできます。

好きな位置にフレームを移動させて、それぞれAボタン・Bボタンを押すことで範囲を決めます。

そして、A/B Loopのチェックを入れることでループできます。

　このA/Bループは、歩いたり走ったりする動きの中で、うまくつながるループを見つけるときに役立つでしょう。

フレーム番号を覚えておき、実際にBlenderとかで出力するときに選びます。

Skip every frame　のところに数字を入れてUpdate skipsをクリックすることで、各フレームを飛ばすことができます。

これは、Three.js exporterなどでフレームを飛ばすのと同様の効果が得られると思います。

フレームを飛ばした場合の各フレームを把握するのに役立つでしょう。

Draw Body Meshのチェックを外すことで、関節部(Joint)とそれをつなぐ線だけの表示になります。関節が影に隠れて見難い時に便利です。

Draw Backgroundのチェックを外すと背景の線が消えます。

Translate Positionを外すと、動きは常に中心点になります。

走りまわったり歩いたりする動きを中心点で把握するのに、便利です。

ただし、その場合、Draw backgroundのチェックを外すか、あるいは、Y-Positionを16ぐらいに変更した方がいいです。

Ignore First Frame 通常、最初のフレームはポーズフレームと呼ばれるTのポーズだったりします。それは一連の動きのなかで余計なので、これをチェックすることで、ループ時に飛ばすことが可能です。1