いくつかアニメーションのパターンを用意し、tween.jsで切り替えてみた。
馬のアニメーションやパーティクルの部分はthree.jsのexampleをもとに作っている。
https://threejs.org/examples/#canvas_particles_sprites
https://threejs.org/examples/#webgl_morphtargets_horse
レポジトリ
https://github.com/sfpgmr/rydeen/tree/0ba7d460eae8581f9387348f856ab9c36ad728ee
シェーダーマテリアルを使って凝った表現をしたいけど、もうちょっとthree.jsを勉強しないとね。。 しばらくはexampleをいじったものを動画に載せてみるといった試行錯誤が続くような気がする。
今はWAVファイルを読み込んで、それをもとにして画像に効果を加えるようにしているけど、REAPERからエクスポートしたMIDIファイルを基に作るともう少しフレーズにフィットした表現ができるようになると思っている。 今後の課題。
動きが激しいせいか、YouTubeにアップロードするとかなり画像が荒れる。いろいろなエンコード・パラメータを試してみたが、ほとんど変化がなかった。