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

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

2014年3月5日 プログラミング MMD, three.js

前回、
PNG画像の透過判定はメンドイのでとりあえずやらない
みたいなこと書きましたが、
バイナリデータとして改めて読み込んで
PNG形式に則って解析すればイイんじゃね?
と気づきました(^_^;)
同じファイルを2回読むことになってしまいますが、
画像として読み込んだ後にやれば、
ブラウザ側でキャッシュされてるはずだから速度的にも気にならないだろうし。
そんなわけでアッサリとJavaScriptで透過判定できました。
ちなみに判定方法はこちらを参考にしました。

ついでに今回は、
BDEF4にも対応してみました。

MMDのPMX形式では、
ボーン変形による頂点blendingとして、
BDEF1,BDEF2,BDEF4,SDEFの4つをサポートしていますが、
今まではいずれもBDEF2として扱っていました。

three.js(r58)でサポートしていたのが2ボーン(つまりBDEF2)だったので、
それに沿うように実装していたためです。
ただ内部的には4ボーンまでのデータ領域は確保されており、
そのうちの2つを使うようになっていました。
(※three.js(r66)では4ボーンをサポートしたようです)

従来の実装では、
BDEF1 -> 2つめのボーンの参照インデクスと重みをゼロにすることで、BDEF2へ変換。
BDEF2 -> そのままBDEF2として扱う。
BDEF4 -> 重みの大きい方から2つを選び、重みの合計を1.0に正規化することで、BDEF2へ変換。
SDEF -> SDEF固有部分を無視することで、BDEF2相当として扱う。

だったのが、
今回の実装では、
BDEF1,2,4 -> フラグ判定によりそれぞれ純粋に1,2,4ボーンによる変形として扱う。
SDEF -> SDEF固有部分を無視することで、BDEF2相当として扱う。

と変えました。
判定用のフラグとしての頂点属性を追加するのが素直な実装になるのですが、
その分のメモリが余計に必要になったりします。
頂点数が数万個とかになったりすることもあるので結構バカにならないのです。
そこで、ボーンの参照インデクスが必ずゼロ以上になることを利用して、
負数なデータを埋め込むことで、
属性を追加することなくできるように実装を工夫しました。
シェーダーレベルでの改良なので、
場合によっては以前より速度の向上も期待できるかもしれません。

なお、
BDEF4の動作はテストで一応確認済みなのですが、
テストで使ったデータファイルのサイズが大きいため、
今回はテスト動作の公開はありません。
ローディング時間があまりにも長くなりそうなので、やめました。
ここのサーバー、最近なんか重いし変だし・・・(^_^;)
WebGL的にもメモリが厳しくなりそうだし。
BDEF4を使用したほどよいサイズのPMXがあるとよいのですが。

ということで、
変更は前回の方に適用しておきましたので、そちらを参照してください。
といっても内部的な改良なので、見た目には変わっていませんが(^_^;)

関連記事
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で遊んでみる(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で遊んでみる

コメントする キャンセル

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

投稿ナビゲーション

マウスカーソルの斜め上
プリズンブレイクな猫

カテゴリー

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

タグ

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

アーカイブ

© Everyday Pieces ::