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 した。結構やばいことになってた。