【Blender】Macで法線マップ（normal map）を指定する方法（glTF Metallic Roughness）

環境メモ
⭐️Mac OS Mojave バージョン10.14

法線マップとは、凸凹を表現するマップ。


1.オンラインでpng画像から、ノーマルマップを作成する
normalmap ONLINE
http://cpetry.github.io/NormalMap-Online/
<img width="966" alt="スクリーンショット 2019-04-13 19.59.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/a954240c-2b46-094c-28a2-6f81299982b0.png">

2.試しにチョコ画像のノーマルマップを作成してみました。
<img width="1083" alt="スクリーンショット 2019-04-13 20.00.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/d8c75ba6-0a2c-ef47-cd39-25c05ec2687e.png">

<img width="1065" alt="スクリーンショット 2019-04-13 20.00.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/a8169ca9-1214-42a2-8cac-a78620748a47.png">

3.glTF Metallic Roughnessのシェダーの
ベースカラーに、チョコ画像を設定し
ノーマルに、ノーマルマップを設定する。

<font color="DeepPink">★glTF Metallic Roughnessのシェダーのやり方は、下記参照</font>
<font color="DeepSkyBlue">
WebAR(AR.js)で使用するBlenderモデル「.glb」として出力する方法（glTF Metallic Roughness）</font>
https://qiita.com/nonkapibara/items/3f94c0ace6057681856d
<img width="1123" alt="スクリーンショット 2019-04-13 20.08.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/0cba9eed-5b3b-e212-8699-46d3c49486b4.png">


4.glTFのプレビュー確認してみた
glTF Viewr
https://gltf-viewer.donmccurdy.com/

<img width="505" alt="スクリーンショット 2019-04-13 20.19.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/03ac2f48-aac3-719e-3273-9155316570bd.png">

<img width="511" alt="スクリーンショット 2019-04-13 20.19.50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/fdf9a9b2-e8fe-349e-f607-84899002d5bc.png">

<img width="484" alt="スクリーンショット 2019-04-13 20.23.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/18c3684f-9f34-d0b7-9733-d1eebef4907d.png">

<img width="523" alt="スクリーンショット 2019-04-13 20.23.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/005bab6f-6b75-77a0-b961-bd66724248d7.png">

<img width="347" alt="スクリーンショット 2019-04-13 20.25.28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/793671c8-48f3-089f-33d8-88a7523cecfa.png">

<img width="399" alt="スクリーンショット 2019-04-13 20.26.03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/481ce700-d271-b840-02ef-32caee87f01d.png">


<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">🍫WebAR🍫<br>チョコレートを投げてテーブルに落ちるとチョコが潰れる🍫（溶ける？？）<br>試してみたよぉ。😊<a href="https://twitter.com/hashtag/8th?src=hash&amp;ref_src=twsrc%5Etfw">#8th</a> <a href="https://twitter.com/hashtag/wall?src=hash&amp;ref_src=twsrc%5Etfw">#wall</a> <a href="https://twitter.com/hashtag/8thwallweb?src=hash&amp;ref_src=twsrc%5Etfw">#8thwallweb</a> <a href="https://twitter.com/hashtag/webAR?src=hash&amp;ref_src=twsrc%5Etfw">#webAR</a> <a href="https://twitter.com/hashtag/AR?src=hash&amp;ref_src=twsrc%5Etfw">#AR</a> <a href="https://t.co/qGAsRlAiz0">pic.twitter.com/qGAsRlAiz0</a></p>&mdash; non (@nonnonkapibara) <a href="https://twitter.com/nonnonkapibara/status/1116322651247497216?ref_src=twsrc%5Etfw">2019年4月11日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<br/>
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">🍮WebAR🍮<br>チョコレートを投げてテーブルに落ちると弾む。（physics）<br>テーブルの上を転がった後、チョコを削除。😊<br>試してみたよぉ。🥰<a href="https://twitter.com/hashtag/8th?src=hash&amp;ref_src=twsrc%5Etfw">#8th</a> <a href="https://twitter.com/hashtag/wall?src=hash&amp;ref_src=twsrc%5Etfw">#wall</a> <a href="https://twitter.com/hashtag/8thwallweb?src=hash&amp;ref_src=twsrc%5Etfw">#8thwallweb</a> <a href="https://twitter.com/hashtag/webAR?src=hash&amp;ref_src=twsrc%5Etfw">#webAR</a> <a href="https://twitter.com/hashtag/AR?src=hash&amp;ref_src=twsrc%5Etfw">#AR</a> <a href="https://t.co/ROxtfE2rjP">pic.twitter.com/ROxtfE2rjP</a></p>&mdash; non (@nonnonkapibara) <a href="https://twitter.com/nonnonkapibara/status/1116323253050433536?ref_src=twsrc%5Etfw">2019年4月11日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>