WebGLだと、Normalmapを使うと、ローポリゴンがリッチに見えます。Blenderを使うと、簡単にデコボコのノーマルマップを作成することが可能です。
ハイポリゴンのノーマルマップの作成方法
元のローポリゴンのモデルを選択します。ただしUVは展開すみじゃないとだめです。 あとポーズ状態だと、変にモデルが変形してますので、BoneはReset Positionにしておきます。 ハイポリゴンを作成するこれをシフト+Dキーで複製します。そしを動かさないで、Mキーで、別のレイヤーに移動します。 そして、移動したモデルをSubdivided Surfaceで細かくします。すると、丸みのあるモデルができあがると思います。 この時に、ついでに、凹凸が欲しい部分を修正するといいでしょう。
ハイポリゴンを選択したまま、元のローポリゴンを選択します。先にハイポリゴンじゃないとだめです。 それと、両方のモデルの左のパネルに出ているShadingスムーズにしておきましょう。 また両方のモデルが表示できるよう、元と移動先のレイヤーを表示するようにします。すると2つのモデルが重なって表示されます。
BakeするRenderの所から、一番下のBakeのところまでスクロールしてBake ModeをNormalsにします。 そして、Selected to Activeをチェックします。 ここのチェックを忘れたり、両方のレイヤーの表示を忘れたりすると、平らなベーク結果になります。
そして、Bakeボタンをクリックします。 するとUV ImageのところにNormalmapが表示されます。あとはこれを保存します。
あと、カクカクになる場合、先にハイポリゴンを選択しわすれている、あるいはShaderのSmoothのチェックが入っていない場合があります。
部分的な修正よく見ると、ノーマルマップがちぎれていたり、カクが強い箇所があります。そういう場合は、その辺りのEdgeを分割して、再度Bakeすると改善します。 ただ、最初から全部分割してしまうと、モデルの形が変わりすぎるので、変になります。
ノーマルマップの画像はそのままですと、エッジがきついので、画像処理ツールでガウスぼかしを、かけたりした方がいいでしょう。 ただし、その場合、レイヤーを複製した下の、そうでないとエッジがぼけてしまい、メッシュの隙間に黒い影が入ったり、modifiersでMirrorしてると割れてしまいます。 またペンとかでの修正は避けた方が無難です。微妙な段差で凹凸がついてしまいます。 three.jsでのNormalマップ 使用例使用前
使用後 |