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

🚩WebAR🚩
Blenderで出力した３Dモデルは🐱pngに比べて表示がちょっと重いみたい🐷#WebAR #ARマーカー #XRMTG #XRMTG pic.twitter.com/Bs76WIWu1X

— non (@nonnonkapibara) 2019年3月25日

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

2.scripts - adding - 「io_scene_gltf2」ファイルを
Blenderのアドオン配下に設置する
（アプリケーションのBlender - Contents - Resources - 2.79 - scripts - addons配下に置く）

3.ユーザー設定を開く

4.「アドオン」タブを選択する。
5.glTFで検索する
6.Import Export glTF2.0を選択する
7.保存する

これで、エクスポート時に、glTFが選ぶことができる。

8.glTF Metallic Roughnessをリンクする

9.ファイルーリンク　を選ぶ

10.「glTF-Blender-Exporter-master」ー「pbr_node」ー「glTF2.blend」ー「NodeTree」-「glTF Metallic Roughness」を選択する

11.マテリアルの「サーフェス」をTapする

１２.glTF Metallic Roughnessのシェダーを選択する

13.色がなくなるので、
BaseColorに、画像テクスチャ（png）を配置する

14.出力するモデルを全選択する

15.「ファイル」ー「エクスポート」でglTF2.0 （glb）を選択する

（アニメーションがある場合は、チェックONする）

アニメーションがある場合

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

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

こんな感じで、プレビュー確認できる

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

🌸WebAR🌸やってみたよぉ🤩
（●＾o＾●）ｖ
WebブラウザでARマーカーを読み込んでみました🏖️
（マーカー式）
くるくるしてるハートは☀️Blender☀️のアニメーション を表示。
❤️ハート❤️をTapすると🎁Qiitaページへ🌈ジャンプ‼️作ってみたよぉ#WebAR #XRMTG #XRMTG pic.twitter.com/WxJlDZckKm

— non (@nonnonkapibara) 2019年3月25日

🎂WebAR🎂
Blenderで作ったアニメーション 「Walk」🍭を出力して表示してみた。#WebAR #ARマーカー #XRMTG #XRMTG pic.twitter.com/cibKbmLw10

— non (@nonnonkapibara) 2019年3月25日