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

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

2014年8月27日 2014年8月23日 プログラミング MMD, three.js

とあるMMDなモデルがうまく表示されないらしいので調べてみました。

・・・なるほど。
DDSなテクスチャファイルを使ったPMXでしたか。
以前にも書いてますが、
texture.flipY = false を基本にしないとやはりダメか(^_^;)

ところで、
WebGLRenderer.jsでは以下の様な感じになっており、

this.setTexture = function ( texture, slot ) {
    if ( texture.needsUpdate ) {
        .
        .
        _gl.activeTexture( _gl.TEXTURE0 + slot );
        _gl.bindTexture( _gl.TEXTURE_2D, texture.__webglTexture );
        _gl.pixelStorei( _gl.UNPACK_FLIP_Y_WEBGL, texture.flipY );
        _gl.pixelStorei( _gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, texture.premultiplyAlpha );
        _gl.pixelStorei( _gl.UNPACK_ALIGNMENT, texture.unpackAlignment );
        .
        .
    } else {
        .
        .
    }
};

texture.flipY は gl.UNPACK_FLIP_Y_WEBGL に対応しています。
名称からするとWebGL固有なパラメータなのかな?
three.js ではデフォルトで有効になっていますが、
その理由はよく分かりません。

以前では flipY = false にすると影響が出そうなので止めてしまいましたが、
よく調べてみたら影響はTOONマップだけだと分かりました。
Fragment Shader においてマップ時のV座標を逆転させればOKだけど、
コードがちょっとだけ増えます。
そこでTOONマップだけは flipY = true のままで行けるようにしました。
TOONテクスチャにDDSが使われることはないと思うので大丈夫かと思います。
思ったよりアッサリと解決できました(^_^;)

ただ、
今回のモデルではもう一つ問題が起きていました。
スカートの裏が抜けてしまうのです。
原因は両面描画がうまく行えていないことでした。
実装はしてあったのですが、そういえば検証してませんでした。
今になって問題が露呈しました(^_^;)
glのステータスがちゃんと反映されるように直して解決。

あと、
ヒジの曲がりが何かオカシイ感じがしてます。
ヒジには付与が導入されているのですが、
残念ながら完全にはうまく行えていないようです。うむぅ。
むしろを付与をオフった方がマシになる感じ(^_^;)

なお、モデルのREADMEにはSDEFを使用していると書いてあるのですが、
データ上はSDEFは使われていませんでした。ちょっとナゾ。
といってもSDEFには未だ対応してないけど(^_^;)
また、ほとんどのマテリアルに両面描画のフラグが設定されているのですが、
実際にはスカートと髪の一部だけに適用すれば良さげな感じなので、
そのように調整しました。無駄な描画が減るはず。
さらに、透過成分の無いDDSファイルについては
ロード時間を減らすためにDXT3からDXT1に変更しました。

ということで動作テストを見るにはこららからどうぞ。

なお、テストでは以下のデータを使用させていただきました。
モデルはこちら、モデルモーションはこちら、カメラモーションはこちら。

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

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

shadow などのチェックを全て外し、outline scale をゼロにすると動作的に一番軽くなります。ブラウザの拡張機能を一時的に無効にすると、さらに軽くできるかも。

20140823.046

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

コメントする キャンセル

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

投稿ナビゲーション

ロト当選チェッカー
LinuxBeanをネットブックに入れてみた

カテゴリー

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

タグ

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

アーカイブ

© Everyday Pieces ::