建築情報学会 Meetup Vol.01「旧都城市市民会館ARの作り方 WebAR」

旧都城市民会館ARの作り方 ～WebARの作り方～ 龍 lilea

旧都城市民会館ARの作り方 ～WebARの作り方～ 龍ですがリョウです（藤原 龍）ホロラボ xRArchiメンバー 点群やフォトグラメトリが好物 ・旧都城市民会館 https://youtu.be/myrg0xmQ2jk ・首里城復元 https://youtu.be/NyCRUT0Ndhc Twitter @lileaLab ・デジタル芸大 https://youtu.be/WKnkI40_6A0 今回は #旧都城市民会館AR はどうやって作っていたのか WebARの作り方をご紹介 この資料は後ほど公開します 2

• https://twitter.com/lileaLab
• https://youtu.be/myrg0xmQ2jk
• https://youtu.be/NyCRUT0Ndhc
• https://youtu.be/WKnkI40_6A0

WebARって？ #旧都城市民会館AR 触ってみてもらうのがわかりやすい アプリ不要でWebサイトから直接ARが起動可能 専用Appインストールしてもらうのはハードル高いが WebARならURLを渡すだけでOK！ #旧都城市民会館AR 3

どんな仕組み？ 実は結構シンプル。 iOS用 #旧都城市民会館AR ・usdzファイルを作る ・html内に埋め込む Android用 ・gltf/glbファイルを作る ・html内に埋め込む 4

iOS編 5

iOS編 / usdzを作る usdzファイルの作り方  A『RealityConveterで変換する』  B『ターミナルで変換する 』  C『DCCツールで書き出す』  D『SketchfabにUPしてからDL』 6

iOS編 / usdzを作る  A『RealityConveterで変換する』 最も簡単な方法！ objやgltfをドラッグ＆ドロップするだけで完了。 obj/gltf usdz RealityConveter 7

iOS編 / usdzを作る  A『RealityConveterで変換する』 ただし… まだベータ版。 ソフトをDLするには Appleへのお布施が必要 (開発者ライセンスが必要) ※こんなの簡単、という様子を載せたかったのだけれど ベータ版なのでアプリのスクショ掲載も不可 https://developer.apple.com/jp/augmented-reality/tools/ 8

• https://developer.apple.com/jp/augmented-reality/tools/

iOS編 / usdzを作る  B『ターミナルで変換する 』 開発者ライセンス無いし… という方にはコマンドを用いた変換もあります。 macのターミナルを使ってobjからusdzへ変換。 xcrun usdz_converter {変換前ファイル名}.obj {変換後ファイル名}.usdz PBRテクスチャを使う場合はー xcrun usdz_converter {変換前ファイル名}.obj {変換後ファイル名}.usdz -g {マテリアル名} -color_map {ベースカラーテクスチャ}.jpg -metallic_map {メタリックテクスチャ}.jpg -roughness_map {ラフネステクスチャ}.jpg -normal_map {法線テクスチャ}.jpg -ao_map {AOテクスチャ}.jpg -emissive_map {発光テスクチャ}.jpg デメリットは手間がかかるところ… 9

iOS編 / usdzを作る  C『DCCツールで書き出す 』 A､Bはmacが必須な方法ですが DCCツール利用ならWindowsでも可！ ただしまだ不安定…？ Blender Cinema4D 10

iOS編 / usdzを作る  D『SketchfabにUPしてからDL 』 Sketchfabにアップすると 実はusdzファイルが作られる！ 期待した結果になるとは限らなかったり ライセンスによってアップロード数制限あり 11

iOS編 / usdzを作る usdzファイルの作り方 詳しくはブログにもまとめた  A：RealityConveterで変換する ドラッグ＆ドロップの簡単さ まだβなので開発者ライセンス必要  B：ターミナルで変換する コマンドラインの知識必要 ちょっと手間  C：DCCツールで書き出す 挙動がソフトによってまちまち  D：SketchfabにUPしてDL ライセンスによりアップロード数制限あり https://lilea.net/lab/how-to-make-usdz/ 12

• https://lilea.net/lab/how-to-make-usdz/

iOS編 Webに埋め込む 13

iOS編 / Webに埋め込む usdzファイルが用意できたらあとは簡単。 html内に以下のコードを記述するだけ！ <a href=“{ファイル名}.usdz” rel=“ar”> <img src=“{サムネ用画像}.jpg"> </a> Webサイトを持っていない場合はブログへのhtml埋め込みでもOK 14

Android編 15

Android編 / gltf･glbを作る gltf･glbファイルの作り方 『DCCツールで書き出す』 今は各ソフトのgltf･glb対応がだいぶ進んだ様子。 Blender Cinema4D 16

Android編 / Webに埋め込む
gltf･glbファイルが用意できたらあとは簡単。
html内に以下のコードを記述するだけ。
 スクリプトを読み込み
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.js"></script>
 AR用のモデルを表示
<model-viewer src=“{ファイル名}.glb“ ar></model-viewer>

17

Android編 / Webに埋め込む <model-viewer>を用いて実装してます。 公式マニュアルはこちら。 https://modelviewer.dev/ 18

• https://modelviewer.dev/

おまけ 19

もっと簡単にAR共有したい 20

もっと簡単にAR共有したい iOS用のusdzファイルはそのままAR表示も可能！(Web埋め込みさえ不要) 言わばARファイル！  usdzを添付して渡す  Dropboxにusdzを置いて渡す これだけでARが起動出来ちゃいます 21

おまけ２ 22

BIMもARで共有したい 23

BIMもARで共有したい mixpaceならRevitやIFCもドラッグ＆ドロップでAR化！ おまけに今回紹介したglbとusdzファイルも生成される！ リモートレンダリング対応版も 1億ポリゴン級のモデルも表示可能！ 24