WebAR(AR.js)で使用するBlenderモデル「.glb」として出力する方法（glTF Metallic Roughness）

環境メモ
⭐️Mac OS Mojave バージョン10.14
⭐️iPhone7(IOS 12.1)
⭐️Blender v2.79.6
⭐️Mac Book
⭐️ブラウザ　safari


WebAR(AR.js)で使用する
Blenderで作成したモデルや、アニメーション 「.glb」として出力する方法として、アドオンを追加する

普通に、「.glb」形式で出力すると、モデルに色が付いていない状態で出力される。
なので「glTF Metallic Roughness」をリンクして出力するとモデルに色がついた状態となる。

実際に出力した動画はこちら↓↓
https://twitter.com/nonnonkapibara/status/1110183471064866832

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">🚩WebAR🚩<br>Blenderで出力した３Dモデルは🐱pngに比べて表示がちょっと重いみたい🐷<a href="https://twitter.com/hashtag/WebAR?src=hash&amp;ref_src=twsrc%5Etfw">#WebAR</a> <a href="https://twitter.com/hashtag/AR%E3%83%9E%E3%83%BC%E3%82%AB%E3%83%BC?src=hash&amp;ref_src=twsrc%5Etfw">#ARマーカー</a> <a href="https://twitter.com/hashtag/XRMTG?src=hash&amp;ref_src=twsrc%5Etfw">#XRMTG</a> <a href="https://twitter.com/hashtag/XRMTG?src=hash&amp;ref_src=twsrc%5Etfw">#XRMTG</a> <a href="https://t.co/Bs76WIWu1X">pic.twitter.com/Bs76WIWu1X</a></p>&mdash; non (@nonnonkapibara) <a href="https://twitter.com/nonnonkapibara/status/1110183471064866832?ref_src=twsrc%5Etfw">2019年3月25日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>



1.「glTF-Blender-Exporter」で
「glTF-Blender-Exporter-master.zip」をダウンロードし解凍する。
https://github.com/KhronosGroup/glTF-Blender-Exporter

<img width="1038" alt="001.png" src="https://qiita-image-store.s3.amazonaws.com/0/93155/59ecb720-68a4-67bc-f9a2-50e1a42394c6.png">

2.scripts - adding - 「io_scene_gltf2」ファイルを
Blenderのアドオン配下に設置する
（アプリケーションのBlender - Contents - Resources - 2.79 - scripts - addons配下に置く） 
<img width="608" alt="003.png" src="https://qiita-image-store.s3.amazonaws.com/0/93155/b06ea9e3-8cbb-a625-9d0e-82ae49b5a7ff.png">

<img width="1302" alt="002.png" src="https://qiita-image-store.s3.amazonaws.com/0/93155/765de61a-c36a-d831-bd5f-8ba64b040809.png">


3.ユーザー設定を開く
<img width="653" alt="スクリーンショット 2019-03-21 13.00.26.png" src="https://qiita-image-store.s3.amazonaws.com/0/93155/7355096e-0433-b87a-0c4a-e647f04c4e76.png">

4.「アドオン」タブを選択する。
5.glTFで検索する
6.Import Export glTF2.0を選択する
7.保存する
<img width="794" alt="スクリーンショット 2019-03-21 13.02.57.png" src="https://qiita-image-store.s3.amazonaws.com/0/93155/a616ef0e-4872-2728-917d-26a7aee04fbf.png">
これで、エクスポート時に、glTFが選ぶことができる。

8.glTF Metallic Roughnessをリンクする
<img width="257" alt="スクリーンショット 2019-03-23 21.51.43.png" src="https://qiita-image-store.s3.amazonaws.com/0/93155/630fa572-c8ba-aef5-5efa-b8d29776a7a1.png">

9.ファイルーリンク　を選ぶ
<img width="248" alt="スクリーンショット 2019-03-23 22.06.24.png" src="https://qiita-image-store.s3.amazonaws.com/0/93155/5d69664f-5d1d-598e-d17f-2a46dc6d4302.png">

10.「glTF-Blender-Exporter-master」ー「pbr_node」ー「glTF2.blend」ー「NodeTree」-「glTF Metallic Roughness」を選択する
<img width="609" alt="スクリーンショット 2019-03-23 22.09.20.png" src="https://qiita-image-store.s3.amazonaws.com/0/93155/464fedd2-87fd-fc09-6767-d34e7db62708.png">

<img width="1036" alt="スクリーンショット 2019-03-23 22.11.46.png" src="https://qiita-image-store.s3.amazonaws.com/0/93155/9cf676b3-479c-d46d-d6d0-294baeeb204b.png">


11.マテリアルの「サーフェス」をTapする
<img width="656" alt="スクリーンショット 2019-03-23 22.16.11.png" src="https://qiita-image-store.s3.amazonaws.com/0/93155/2d8cedf1-c369-570f-6f49-e0e71877829e.png">

１２.glTF Metallic Roughnessのシェダーを選択する
<img width="645" alt="スクリーンショット 2019-03-23 22.17.59.png" src="https://qiita-image-store.s3.amazonaws.com/0/93155/e56d0022-070c-8412-24a2-b73a96992430.png">

13.色がなくなるので、
BaseColorに、画像テクスチャ（png）を配置する
<img width="1120" alt="スクリーンショット 2019-03-23 22.19.06.png" src="https://qiita-image-store.s3.amazonaws.com/0/93155/6ad73a89-32d8-e367-e245-7b5b26e8000f.png">
<img width="1097" alt="スクリーンショット 2019-03-23 22.20.06.png" src="https://qiita-image-store.s3.amazonaws.com/0/93155/412b1502-0f35-286c-f2c4-8345bd215c4c.png">


<img width="1113" alt="スクリーンショット 2019-03-23 22.21.55.png" src="https://qiita-image-store.s3.amazonaws.com/0/93155/c91ddce3-a1f6-beda-848e-54e37db1be42.png">

14.出力するモデルを全選択する
<img width="476" alt="スクリーンショット 2019-03-23 22.23.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/93155/9fba4e45-6ca4-8fe6-616f-242da90ae212.png">

15.「ファイル」ー「エクスポート」でglTF2.0 （glb）を選択する
<img width="585" alt="スクリーンショット 2019-03-23 22.24.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/93155/4ce61ade-3b0a-4a21-5313-194a36d3638f.png">


<img width="381" alt="スクリーンショット 2019-03-23 22.27.15.png" src="https://qiita-image-store.s3.amazonaws.com/0/93155/7e3fac75-8d59-f7db-6156-b61b4cbb07d7.png">

（アニメーションがある場合は、チェックONする）
<img width="381" alt="スクリーンショット 2019-03-23 22.28.16.png" src="https://qiita-image-store.s3.amazonaws.com/0/93155/98562944-4dd4-d4d9-b21e-c9d8f1d35c69.png">


アニメーションがある場合
<img width="228" alt="スクリーンショット 2019-03-23 22.53.15.png" src="https://qiita-image-store.s3.amazonaws.com/0/93155/06fde155-6dc2-f93b-8210-3c52f4cae160.png">

これで、「glTF」が出力される

ここのサイトで、glTFのモデルが確認できる
https://gltf-viewer.donmccurdy.com/

<img width="919" alt="スクリーンショット 2019-03-26 0.26.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/93155/80ad2ea5-986a-a5ec-3b28-f58967cab3b2.png">

こんな感じで、プレビュー確認できる
<img width="949" alt="スクリーンショット 2019-03-26 0.28.01.png" src="https://qiita-image-store.s3.amazonaws.com/0/93155/55817a16-a9db-c632-53be-49f55d5cea7d.png">


</br>
</br>
以下、上記の方法で、glbモデル出力しました。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">🌸WebAR🌸やってみたよぉ🤩<br>（●＾o＾●）ｖ<br>WebブラウザでARマーカーを読み込んでみました🏖️<br>（マーカー式）<br>くるくるしてるハートは☀️Blender☀️のアニメーション を表示。<br>❤️ハート❤️をTapすると🎁Qiitaページへ🌈ジャンプ‼️作ってみたよぉ<a href="https://twitter.com/hashtag/WebAR?src=hash&amp;ref_src=twsrc%5Etfw">#WebAR</a> <a href="https://twitter.com/hashtag/XRMTG?src=hash&amp;ref_src=twsrc%5Etfw">#XRMTG</a> <a href="https://twitter.com/hashtag/XRMTG?src=hash&amp;ref_src=twsrc%5Etfw">#XRMTG</a> <a href="https://t.co/WxJlDZckKm">pic.twitter.com/WxJlDZckKm</a></p>&mdash; non (@nonnonkapibara) <a href="https://twitter.com/nonnonkapibara/status/1110160511671263232?ref_src=twsrc%5Etfw">2019年3月25日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">🎂WebAR🎂<br>Blenderで作ったアニメーション 「Walk」🍭を出力して表示してみた。<a href="https://twitter.com/hashtag/WebAR?src=hash&amp;ref_src=twsrc%5Etfw">#WebAR</a> <a href="https://twitter.com/hashtag/AR%E3%83%9E%E3%83%BC%E3%82%AB%E3%83%BC?src=hash&amp;ref_src=twsrc%5Etfw">#ARマーカー</a> <a href="https://twitter.com/hashtag/XRMTG?src=hash&amp;ref_src=twsrc%5Etfw">#XRMTG</a> <a href="https://twitter.com/hashtag/XRMTG?src=hash&amp;ref_src=twsrc%5Etfw">#XRMTG</a> <a href="https://t.co/cibKbmLw10">pic.twitter.com/cibKbmLw10</a></p>&mdash; non (@nonnonkapibara) <a href="https://twitter.com/nonnonkapibara/status/1110185243879702529?ref_src=twsrc%5Etfw">2019年3月25日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>