1K Views
October 15, 23
スライド概要
旧都城市民会館ARの作り方 ~WebARの作り方~ 龍 lilea
旧都城市民会館ARの作り方 ~WebARの作り方~ 龍ですがリョウです(藤原 龍)ホロラボ xRArchiメンバー 点群やフォトグラメトリが好物 ・旧都城市民会館 https://youtu.be/myrg0xmQ2jk ・首里城復元 https://youtu.be/NyCRUT0Ndhc Twitter @lileaLab ・デジタル芸大 https://youtu.be/WKnkI40_6A0 今回は #旧都城市民会館AR はどうやって作っていたのか WebARの作り方をご紹介 この資料は後ほど公開します 2
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
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
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
おまけ 19
もっと簡単にAR共有したい 20
もっと簡単にAR共有したい iOS用のusdzファイルはそのままAR表示も可能!(Web埋め込みさえ不要) 言わばARファイル! usdzを添付して渡す Dropboxにusdzを置いて渡す これだけでARが起動出来ちゃいます 21
おまけ2 22
BIMもARで共有したい 23
BIMもARで共有したい mixpaceならRevitやIFCもドラッグ&ドロップでAR化! おまけに今回紹介したglbとusdzファイルも生成される! リモートレンダリング対応版も 1億ポリゴン級のモデルも表示可能! 24