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

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

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

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

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

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

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

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

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

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

20140426.001

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

5件のコメント

  • 結束 より:
    2014年5月1日 17:26

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

    返信
    • 管理人 より:
      2014年5月1日 21:43

      情報ありがとうございます。
      やってみる価値ありそうですね(^_^)

      返信
  • 結束 より:
    2014年5月1日 18:01

    [ 相談希望 ]

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

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

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

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

    返信
    • 管理人 より:
      2014年5月1日 22:00

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

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

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

      返信
      • 結束 より:
        2014年5月8日 18:10

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

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

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

        返信

コメントする キャンセル

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

投稿ナビゲーション

ネコを釣るネコwww
ネコによる「どうぞ、どうぞ」

カテゴリー

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

タグ

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

アーカイブ

© Everyday Pieces ::