アプリから作成した動画をアップロードしてみた。
まあとりあえずテストとしては成功だが、映像表現としては最低レベルである。馬の疾走するタイミングはRydeenのテンポに合わせてみたつもりだが合っているような合っていないような。。 以下はThree.jsの動画をpngに落とすコード。
描画後の画像をpngに変換する部分は使いたい誘惑にかられ画面キャプチャで実装してみた。しかしこの部分、非常に遅い。5分ほどの動画を生成するのに1時間以上かかってしまう。これが今のところの課題である。readFileSyncの部分が遅いと思うのでここを非同期処理すれば多少早くはなると思うが非同期処理の同時実行数をコントロールしないとリソースが破たんしてしまう。queueとかを使ってコントロールする必要があるね。
馬のアニメーションは元画像を分割してアニメーションセル化し描画している。これは過去に書いたコードをもとにして作成した。今のところThree.jsを2D的に使用しているのみだが、これから3D的な表現を加えていこうかなと思っている。あとはWebAudioを使ってFFTしたのち周波数成分を使用してアニメーションを変化させたりしたいなと思っている。