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

 プログラム,
 公開日:2014年4月26日 / 更新日:2014年5月2日

G-Tuneの公式キャラクター「Tuneちゃん」の
MMDモデルデータが配布されたそうです。

うまく表示できないらしいので調べてみたところ、
マテリアルのアルファ値(透明度)に関する処理が不十分だったようです。
アルファ値がゼロ、つまり透明なのに表示されてしまう不具合がありました。
なお、現状ではマテリアルのモーフィングには対応していないので、
それを利用した表情アニメは再現できていません。

それから、
「髪裏」「髪裏2」というマテリアルの輪郭線表示をONにすると、
なぜか輪郭線描画が髪の表側に微妙にはみ出るような感じになってしまいます。
残念ながら原因不明・・・う~む。
なのでPMXを編集してそれらをOFFにすることで対処しました(^_^;)

「Tuneちゃん」は頂点、面、物理演算の剛体などの数が
標準的なミクさんに比べて2~3倍あります。
特にテクスチャは数が多い上に解像度も高めな感じ。
WebGLには少々荷が重そうなので、
大きいやつは縦横50%にし、
さらに「PNGoo」というソフトでサイズ削減しました。

ということで動作を参照するにはこちらからどうぞ。
モーションデータは借用しています。詳しくこちらを参照してください。
なお、
shadow などのチェックを全て外し、
outline scale をゼロにすると動作的に一番軽くなります。

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

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

20140426.001

タグ: ,

コメント / トラックバック 5 件

  1. 結束 より:

    テクスチャについてですが、
    dds テクスチャを使うと、さらに高速に動くのでは?
    以前我々のデモで実施してみたのですが、PNG>DDS でファイルサイズは大きくなるものの、画像データがGPU のメモリに格納されるため FPS がかなり向上しましたよ。

  2. 結束 より:

    [ 相談希望 ]

    どうもこんにちは、初めまして。

    three.js r67 ではキャラクタアニメーションが大分進化しましたね。

    私は普段展示会やカンファレンスなどでデモメーカーをしております。
    WebGL のキャラクターまわりについて詳しい方を探してこのブログに辿り着きました。

    今後ご相談など出てくると思ったので、
    ご挨拶に連絡先を交換出来たら、と思いコメント致しました。

    • 管理人 より:

      最近のthree.jsのことはチェックしていなかったりします。
      いつのまにか進化しているのですね。
      趣味でマイペースでやってたりしますので(^_^;)

      ところで、
      私はjThree.jpさんに協力させてもらっています。
      協力者を募集しているようなので、
      よろしければ連絡してみてください。

      なお、
      結束さまの個人情報に関する書き込み部分は
      念のため削除させていただきました。
      ご了承ください。

      • 結束 より:

        ご対応ありがとうございます。

        jThree.js さんに、連絡を入れてみます。
        よろしくお願いします!

        個人情報削除ありがとうございました。

コメント投稿