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

だいぶ前から、それとなく気づいていたことに、
本家MMDに比べてレンダリング結果がなんか変
というのがあったりします(^_^;)
今回それなりに改善できたので書いてみたいと思います。

ところで、
IKとか物理演算とかの技術的な興味から始めたthree.jsでMMDですが、
ミクさんを踊らせることが目標だったので、
自分の中ではすでに目標達成な感じだったりします。
趣味でやっているので再現性にはあまりこだわらなかったりしてますが、
一方で気になり出すとどうにかしたくなる性分だったりもします。

さて、
レンダリング結果が変なのは前からどうにかしたいなと思っていたわけですが、
比較検討するためのLighting設定とかが分かりませんでした。
ところが先日PmxEditorの表示設定にそれらの情報があることを見つけました。
何度も使っていたのに今頃になって気づきました(^_^;)

PmxEditorでのデフォルトの表示設定では、
環境ライト色 = (255,255,255)
方向ライト色 = (127,127,127)
方向ライト向き = (-0.5,-1.0,0.5)
視野角 = 25度
という感じになっていました。

これを基準に比較検討することにしました。
ただし「向き」はthree.jsで扱うために右手系へ変換します。
つまり、(-0.5,-1.0,-0.5)にします。
またカメラ位置は不明だったので、
だいたい同じ感じに見えるように手動調整しました。

実際にやってみると、three.js側はちょっと暗めな感じ。
PmxEditor側は照明強度を少し強めにしている模様です。
方向ライトのIntensityを1.1くらいにしてみました。

で、比較結果は以下の通り。
左がPmxEditor、右がthree.js。
PmxEditorでのアンチエイリアスは無効にしてます。
※クリックすると実サイズで比較画像を参照できます。フルHDくらいのサイズがあります。

こうして比べて見ると、だいぶ異なってますね。
シェーダーのコードを一から見直したほうが良さそうです(^_^;)
ということでWebの情報を漁ってみたところ、こちらを発見しました。
これは大いに参考になりますね。
もっと早くこちらの情報に気づいていれば・・・。

そんなわけで大きく３つの問題が判明しました。
１）toonマップのアドレス計算がまちがってる。
２）toonマップの適用タイミングがまちがってる。
３）sphereマップのアドレス計算が不十分。
ざっくり言うと、
toon掛けた後にspecularを適用した感じになってしまっています。
正しい順番はその逆でした。

1）と２）については、
できるだけthree.jsの機能に対応するように改造した関係で、
勘違いや考慮不足が原因だったようです。
three.jsのシェーダーのコードは、方向ライトだけでなく
ポイントライトやスポットライトなどに対応しているので複雑だったりします。
ちなみにこんな感じ。phongを改造してます。
３）については、テクスチャの上下逆問題の絡みでした。
この回の投稿でも書いたりしてますが、
どうにも対応が中途半端になってしまうようなので(^_^;)
texture.flipY = falseに統一することにしました。

ということで改善した結果は以下の通りです。
右の方がtoonのコントラストが微妙に弱めな感じがしますが、
概ね同じような感じになってくれました。

改善後の動作テストを見るにはこららからどうぞ。
なお、テストでは以下のデータを使用させていただきました。
モデルはMMD同梱のメタル服なミクさん、
モーションはこちら、カメラモーションはこちら。