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

プログラミングMMD,three.js

 拙作の「MMD Viewer」は「」になってから、
ボーンを表示してスケルトン構造が視覚的に分かるような機能を追加しました。
というか、three.js には SkeletonHelper なる機能があったので、
基本的にはそれをそのまま使っただけだったりします。
具体的には以下のような感じ。

 全てのボーンが一本線で表現された感じになります。
今まで特に気にもせず、こういうものなのだろうと思ってました。

 ところで、
先日ちょっと確認したいことがあったので、
ソースコードを眺めていた時に、
これってボーン視覚化のためのデータだったのかと、
今になって気づいた事がありました。

 PMXのボーン情報には編集時に参照すると思われるデータとかがあり、
Viewerでは必要ないので無視したりしましたが、
その中にボーンを視覚表示させるためのデータがありました。
以前はいまいち意味が分からなかったのですが、
なるほどそういうことかと。

 具体的には、
表示可のフラグと、
接続先として、他ボーンのインデクスあるいはオフセット座標
というデータです。
ボーンの全てが表示されるのではなく、
フラグが立っているものだけが表示可能な対象ということです。
そして、ボーンの位置ー>接続先位置
という感じに線を引いたりすれば良いわけです。

 ということで、
よりMMD的に正しい感じにした方が良いかなと思ったので、
SkeletonHelperを独自に改造して、
ボーン表示を改善してみた次第です。
一本線だけだとちょっと殺風景な印象なので、
三角形にしてみました。
そして、より分かりやすくなるように、
カメラに正対するようにしました。

 で、
やってみた結果がこれ。
それっぽい感じで、まぁ悪くはないのではないかと(^_^;)

 それにしても、
モデルのデータ上では設定されているけど、
モーションでは参照されてないボーンとかあったりするようですね。
なので末端とかでちょっと変な表示になってたりすることがあるような?
仕様通りにはやっているつもりですが、
結果的に変な見え方になっていることがあるかもしれません。
ご了承ください(^_^;)

 ということで、
ボーン表示を改善してみた「MMD Viewer 改」を試すにはこちらからどうぞ。
他の機能の説明とかも書いてあります。

Posted by 管理人