ノーマルマップを作る


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マップ 使用例

使用前

使用後



Comments