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

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

2013年10月23日 2013年6月2日 プログラミング MMD, three.js

いままでずっと three.js r51 をべースに作業を進めてましたが、
気がつけばバージョンは r58 まで進んでいました。

毎月中旬くらいに更新されている感じなコトに気づいていましたが、
その都度ベースを更新するがメンドーだったので、
サボってました(^_^;)

three.jsのGitHubの更新ログを見てみると
だいぶ変わって来ているっぽいので、
この際 r58 ベースに更新することにしました。

今回、r51 から r58 にベースを更新する作業をしてみて
個人的に気づいた点は以下のような感じ。

  • ソースのフォルダ構成が変更されている。
  • 基本クラスのAPIに調整が入っている。
  • いくつかのシェーダーは独立したソースに整理された。
  • シェーダーのソースコードに独自の#defineを導入できるようになった。

4番目については、
以前の投稿で独自に改造しましたが、
r58ではより汎用的に使えるようになってたので、
それに対応するように直しました。

2番目については、
Matrix4 に属していたメソッドが Vector3 へ移ったりとか、
メソッド名が変更され機能も微妙に異なっていたりとかして、
それに合わせるための変更にちょっと手間取りました。
内容が最適化されてたり、
実装上の問題点とかが改善されてたりもするようなので、
これはこれで歓迎しておいて良さそうです。
いくつかの旧APIはまだ使えるようになってますが、
console.warning()とかでメッセージが出力されたりします(^_^;)
まだ移行過程な感じなのかもしれません。

前回、PMXやVMDファイルを直接扱えるようにしたわけですが、
今回テストしてて大きなバグを見つけてしまいました(^_^;)
モーションファイルであるVMDには、
フレーム番号を基本にキーをソートしている場合と、
ターゲット名を基本にキーをソートしている場合の2つがあるようです。
この対応が不十分でした。
前回はたまたまフレーム番号でソートしてあったVMDファイルを
テストに使っていたため、この問題に気づきませんでした。

それから、
Shift-JIS から UNICODE への変換について。
前回はnativeな機能で出来るだけ実現しようとしたわけですが、
非同期処理を短時間に多発させるのは
ブラウザに負荷が掛かるような気がしてきたので
こちらの変換ライブラリを利用させてもらうことにしました。
うん、これ便利かも。
素直にはじめからこれを使っておけば良かったかも(^_^)

ところで、
前回の課題であった影の件ですが、
うまく行ってません(^_^;)
色々やってはみたんですが・・・。
う~ん、本家MMDはどうやって解決してるんだろ。
袖やスカートの内側のポリゴンがちゃんと貼られていればなぁ・・・
と愚痴ってみたり(^_^;)
深度マップを作るには基本的に裏面描画でいいんですが、
そうすると袖やスカートの影が抜けてしまう・・・。
しょうがないので以前やったように、、
カリング無しで深度マップを作るようにしました。
一見うまく行っているように見えますが、
副作用で影にならないような所にも陰影が出てしまっています。
地面に近い部分の髪の毛とかが顕著かも。

あと、
描画負荷を少し抑えるために
深度マップ用のバッファの大きさを
2048×2048 から 1024×1024 へ減らしました。
これでも解像度的には問題無さそうなので。

ということでr58ベースに更新した結果はこちらです。
前回と基本的には変わってませんが、少し負荷が軽くなっているかも。

ChromeなどのWebGL対応のブラウザで見てください。PCパワーもそれなりに必要となるかもしれません。あまりにも時間がかかり過ぎるようならば、リロードして再度試してみてください。

mytest22

関連記事
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で遊んでみる(25) three.jsで遊んでみる(24) three.jsで遊んでみる(23) three.jsで遊んでみる(22) three.jsで遊んでみる(21) three.jsで遊んでみる(20) three.jsで遊んでみる(19) 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で遊んでみる

コメントする キャンセル

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

投稿ナビゲーション

猫な顔のフクロウ
three.jsで遊んでみる(19)

カテゴリー

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

タグ

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

アーカイブ

© Everyday Pieces ::