読者です 読者をやめる 読者になる 読者になる

音の鳴るブログ

鳴らないこともある

perfume.js iPhone, iPad に対応させた

http://mohayonao.herokuapp.com/perfume3

f:id:mohayonao:20120406103150p:plain

Perfume のモーションデータを使って JavaScript で踊るやつ。Safari や iOS では動かなかったんだけど修正して動くようにした。(Windows版の Safari では動かないみたい)

 

やったこと

動かなかった最大の原因はオーディオファイルの形式で、公式で配布されている wav を ogg に変換して使っていたのだけど、Safariogg に対応していないらしいので 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 した。結構やばいことになってた。