Everyday Pieces ::
  • Webサービス
  • ブログパーツ
  1. ホーム
  2. プログラミング

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

2014年4月20日 2014年4月13日 プログラミング MMD, three.js

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

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パワーもそれなりに必要となるかもしれません。反応がない場合は、リロードして再度試してみてください。

関連記事
three.jsで遊んでみる(46) three.jsで遊んでみる(45) three.jsで遊んでみる(44) three.jsで遊んでみる(43) three.jsで遊んでみる(42) three.jsで遊んでみる(41) three.jsで遊んでみる(40) three.jsで遊んでみる(39) three.jsで遊んでみる(38) three.jsで遊んでみる(37) three.jsで遊んでみる(36) three.jsで遊んでみる(35) three.jsで遊んでみる(34) three.jsで遊んでみる(33) three.jsで遊んでみる(32) three.jsで遊んでみる(31) three.jsで遊んでみる(30) three.jsで遊んでみる(29) three.jsで遊んでみる(28) three.jsで遊んでみる(27) three.jsで遊んでみる(26) three.jsで遊んでみる(24) three.jsで遊んでみる(23) three.jsで遊んでみる(22) three.jsで遊んでみる(21) three.jsで遊んでみる(20) three.jsで遊んでみる(19) three.jsで遊んでみる(18) three.jsで遊んでみる(17) three.jsで遊んでみる(16) three.jsで遊んでみる(15) three.jsで遊んでみる(14) three.jsで遊んでみる(13) three.jsで遊んでみる(12) three.jsで遊んでみる(11) three.jsで遊んでみる(10) three.jsで遊んでみる(9) three.jsで遊んでみる(8) three.jsで遊んでみる(7) three.jsで遊んでみる(6) three.jsで遊んでみる(5) three.jsで遊んでみる(4) three.jsで遊んでみる(3) three.jsで遊んでみる(2) three.jsで遊んでみる

コメントする キャンセル

アドレスが公開されることはありません。が付いている欄は必須項目です。

投稿ナビゲーション

生体ゴキブリ形の8bitDNAコンピュータ
ネコを釣るネコwww

カテゴリー

WordPress つぶやき トピック プログラミング

タグ

AS3 enchant.js FamilyTreeVis Flash Geolocation gif.js kinect Linux MMD MoneyTrackNote notifier.js OpenCV PDFカレンダー RISC-V three.js セキュリティ テーマ自作 ブログパーツ 動物 動画 麻雀

アーカイブ

© Everyday Pieces ::