three.jsで遊んでみる(25)

 プログラム,
 公開日:2014年4月13日 / 更新日:2014年4月20日

前回のデモを何気に見ていたら、
カメラが大きく切り替わる時に
余計なフレームがほんの一瞬だけ交じっていることに気がつきました。
少々気になったので調べてみた次第です。

MMDのモーションデータであるVMDでは、
タイミングを示すキーはフレーム番号で管理されており、
1フレーム=1/30秒、つまり30fpsを想定しています。

一方、
three.jsでの私の実装ではフレームではなく秒で管理しています。
VMD的にはカメラを1フレームで瞬時に切り替えるようになっていても、
1/60秒で駆動すると2フレームを生成することになるため、
中間フレームの挿入によって瞬時に切り替わった感じがしないわけですね。
処理上は間違っているわけではないのですが、
視覚的には少々気になる場合もありそうです。

単純に30fps相当で駆動しようかとも思ったのですが、
60fpsで回っていても30フレームしかないことになるので、
流石にそれはないですよね(^_^;)

そこで2つのキーの間隔が1/30秒以下の場合に限って、
中間フレームを生成しないようにすることで
この現象を回避するようにしてみました。
カメラとライトのモーションだけに適用しました。

ということで動作を参照するには以下からどうぞ。
改善前はこちら
改善後はこちら
よく見ないと違いが分かりにくいかもしれません。
60fps出ないとさらに分かりにくいかも(^_^;)
デモの170秒あたりが比較的確認しやすいかな。

なんか最近やたらとサーバーが重いことがあります・・・。
激しく気長に待ってみてください(^_^;)

WebGL対応のブラウザで見てください。WindowsのChromeで確認しています。PCパワーもそれなりに必要となるかもしれません。反応がない場合は、リロードして再度試してみてください。

タグ: ,

コメント投稿