perfume.js iPhone, iPad に対応させた
http://mohayonao.herokuapp.com/perfume3
Perfume のモーションデータを使って JavaScript で踊るやつ。Safari や iOS では動かなかったんだけど修正して動くようにした。(Windows版の Safari では動かないみたい)
やったこと
動かなかった最大の原因はオーディオファイルの形式で、公式で配布されている wav を ogg に変換して使っていたのだけど、Safari は ogg に対応していないらしいので mp3 も用意した。
それだけで一応は動くようになったのだけど、BVH のデータが iPhone で読むには大きすぎて(1つにつき2MBくらいある)ダメな感じだったので、フレームを間引いて小さくしたモバイル版BVHを作った。PCに比べるともっさりしているけど、動くから良い。
3D処理自体は three.js でやっているので、そのまま。three.js すごい。
その他色々修正した
100体で踊るやつは最初にフレーム毎の関節位置を全部計算して、アニメーション時の計算量を減らしているのだけど、1体計算するのに結構時間が(chrome で1.6秒、firefox で0.7秒くらい)かかっていた。メインスレッドへの影響は少ない方が良いので WebWorkers で計算させることにした。
もともとの処理の流れは、
BVH読み込む → 関節つくる → 位置計算 → 動き出す
で、位置計算だけ WebWorkers にさせようと思っていたのだけど、postMessage で渡すメッセージが複雑になるので、url だけ渡して BVH の読込みから位置計算までを WebWorkers にさせるようにした。処理の粒度だけでなく、入出力の複雑さも考慮した方が良いみたい。
WebWorkers からの出力は、
BVH読込み時 → 関節作成時 → 位置計算(フレーム毎に) → 終り
と、細かく返した。メインスレッド側は関節作成時から動き出す。ダンスのような時間ベースのデータなら動かしながら不足データを足していっても問題ない。
あと、use strict した。結構やばいことになってた。