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

475 Views

October 15, 23

スライド概要

profile-image

🍅藤原龍 Ryo Fujiwara / ホロラボ HoloLab Inc. 📸仕事、趣味で物理空間をフォトグラメトリやレーザースキャンで3DデジタルアーカイブしてVRやARのデジタルツインコンテンツつくったりしてる人 🎨制作依頼も承り

シェア

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

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

2.

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

3.

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

4.

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

5.

iOS編 5

6.

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

7.

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

8.

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

9.

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

10.

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

11.

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

12.

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

13.

iOS編 Webに埋め込む 13

14.

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

15.

Android編 15

16.

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

17.
[beta]
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

18.

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

19.

おまけ 19

20.

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

21.

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

22.

おまけ2 22

23.

BIMもARで共有したい 23

24.

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