three.jsで遊んでみる（30）

とある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に変更しました。

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

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