6
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2019-03-25

環境メモ
⭐️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

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

001.png

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

002.png

3.ユーザー設定を開く
スクリーンショット 2019-03-21 13.00.26.png

4.「アドオン」タブを選択する。
5.glTFで検索する
6.Import Export glTF2.0を選択する
7.保存する
スクリーンショット 2019-03-21 13.02.57.png
これで、エクスポート時に、glTFが選ぶことができる。

8.glTF Metallic Roughnessをリンクする
スクリーンショット 2019-03-23 21.51.43.png

9.ファイルーリンク を選ぶ
スクリーンショット 2019-03-23 22.06.24.png

10.「glTF-Blender-Exporter-master」ー「pbr_node」ー「glTF2.blend」ー「NodeTree」-「glTF Metallic Roughness」を選択する
スクリーンショット 2019-03-23 22.09.20.png

スクリーンショット 2019-03-23 22.11.46.png

11.マテリアルの「サーフェス」をTapする
スクリーンショット 2019-03-23 22.16.11.png

12.glTF Metallic Roughnessのシェダーを選択する
スクリーンショット 2019-03-23 22.17.59.png

13.色がなくなるので、
BaseColorに、画像テクスチャ(png)を配置する
スクリーンショット 2019-03-23 22.19.06.png
スクリーンショット 2019-03-23 22.20.06.png

スクリーンショット 2019-03-23 22.21.55.png

14.出力するモデルを全選択する
スクリーンショット 2019-03-23 22.23.36.png

15.「ファイル」ー「エクスポート」でglTF2.0 (glb)を選択する
スクリーンショット 2019-03-23 22.24.53.png

スクリーンショット 2019-03-23 22.27.15.png

(アニメーションがある場合は、チェックONする)
スクリーンショット 2019-03-23 22.28.16.png

アニメーションがある場合
スクリーンショット 2019-03-23 22.53.15.png

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

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

スクリーンショット 2019-03-26 0.26.07.png

こんな感じで、プレビュー確認できる
スクリーンショット 2019-03-26 0.28.01.png



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

6
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?