Project Spirare - 3D コンテンツを記述する汎用フォーマットの定義と実装

Project Spirare: 3D コンテンツを記述する汎用フォーマットの定義と実装株式会社ホロラボ古田裕介上吉川大貴

自己紹介古田裕介たるこす (@tarukosu) 株式会社ホロラボ R&D チーム Researcher 2

https://twitter.com/tarukosu

Project Spirare とは Project Spirare は 3D コンテンツの記述を目的とした汎用フォーマットを定義、実装するホロラボ社内のプロジェクト POML（ポムル）というファイルフォーマットを定義 <poml> <scene> 以下の特徴をもつ <model src="./Whale.glb"> • XML ベースのフォーマット </model> • 3D モデル、画像、動画などのデータの空間配置を定義可能 </scene> </poml> • 特定のエンジンやアプリケーションに非依存 • 実行時にロード可能 POML の例 Copyright© HoloLab Inc. All rights reserved 5

6.

Project Spirare で何ができるか • 3D モデル、画像、動画を空間に配置できる • 緯度、経度、高さ（楕円体高）での地理的な位置指定 • VPS (Visual Positioning System) などのマップ内位置指定 • さまざまなアプリケーションで実行時にロードできる Web ブラウザ Unity 製 AR アプリケーション Copyright© HoloLab Inc. All rights reserved Unity 製 VR アプリケーション 3D都市モデルおよびPLATEAUオルソはProject PLATEAU で提供されるデータを利用 (https://www.mlit.go.jp/plateau/) 地形データは、測量法に基づく国土地理院長承認（使用）R3JHs 778を得て使用 6

https://www.mlit.go.jp/plateau/

7.

POML とデータの関係 3D モデル、画像、動画などの個別のデータ自体は POML には含まれない POML ファイルとデータファイルを組み合わせて 3D コンテンツデータとなる 3D コンテンツデータ POML モデルデータ (.glb) 画像データ (.png, .jpg) <poml> <scene> <model src="./Whale.glb"> </model> <image src="./HoloLab.png"> </image> </scene> </poml> Copyright© HoloLab Inc. All rights reserved 7

8.

POML の作成と表示 POML を活用するためには、POML を作成する方法と POML を表示するアプリケーションが必要 Unity アプリケーション手書き 3D コンテンツデータコード（プログラム）で生成 POML Web アプリケーションモデルデータ Web アプリケーション画像データ Copyright© HoloLab Inc. All rights reserved 3D都市モデルおよびPLATEAUオルソはProject PLATEAU で提供されるデータを利用 (https://www.mlit.go.jp/plateau/) 地形データは、測量法に基づく国土地理院長承認（使用）R3JHs 778を得て使用 8

https://www.mlit.go.jp/plateau/

9.

10.

POML 記法（model タグ） model タグによって glb モデルを配置 <poml> <scene> <model src="./Burger.glb"> </model> </scene> </poml> src (データソース) で指定する URL は絶対パスでも可 <model src="http://example.com/Burger.glb"> </model> Copyright© HoloLab Inc. All rights reserved 10

11.

12.

13.

14.

15.

POML 記法（position アトリビュート） position アトリビュートで位置を指定 • 座標系は Z-up 右手系 • 指定がない場合は 0,0,0 <poml> <scene> <model src="./Burger.glb"> </model> <model src="./Apple.glb" position="0,0,1"> </model> </scene> </poml> Copyright© HoloLab Inc. All rights reserved 15

16.

POML 記法（親子関係）入れ子構造で親子関係を指定 <poml> <scene> <model src="./Burger.glb"> </model> <element position="0,0,1"> <model src="./Apple.glb"> </model> <model src="./GreenApple.glb" position="0,0,1"> </model> </element> </scene> </poml> Copyright© HoloLab Inc. All rights reserved 16

17.

POML 記法（地理配置） geo-reference タグで緯度・経度・高さ（楕円体高）を指定 <poml> <scene> <model src="./Whale.glb"> <geo-reference latitude="35.68143170" longitude="139.76578530" ellipsoidal-height="51.55"> </geo-reference> </model> </scene> </poml> Copyright© HoloLab Inc. All rights reserved 3D都市モデルおよびPLATEAUオルソはProject PLATEAU で提供されるデータを利用 (https://www.mlit.go.jp/plateau/) 地形データは、測量法に基づく国土地理院長承認（使用）R3JHs 778を得て使用 17

https://www.mlit.go.jp/plateau/

18.

POML 記法（空間配置） space-reference タグで空間ID（マップID）を指定 <poml> <scene> <space-reference space-id="77976"> </space-reference> <model ar-display="none" src="./77976-LivingRoom-tex.glb"> </model> <model position="0.34 0.54 0.12" src="./Fish.glb"> </model> </scene> </poml> Copyright© HoloLab Inc. All rights reserved 3D都市モデルおよびPLATEAUオルソはProject PLATEAU で提供されるデータを利用 (https://www.mlit.go.jp/plateau/) 地形データは、測量法に基づく国土地理院長承認（使用）R3JHs 778を得て使用 18

https://www.mlit.go.jp/plateau/

19.

20.

POML の作成と表示 Unity アプリケーション手書き 3D コンテンツデータコード（プログラム）で生成 POML Web アプリケーションモデルデータ Web アプリケーション画像データ Copyright© HoloLab Inc. All rights reserved 3D都市モデルおよびPLATEAUオルソはProject PLATEAU で提供されるデータを利用 (https://www.mlit.go.jp/plateau/) 地形データは、測量法に基づく国土地理院長承認（使用）R3JHs 778を得て使用 20

https://www.mlit.go.jp/plateau/

21.

Unity 版アプリケーションの動作パターン • ロード方式 • Web サーバー • ローカル • 表示方式 • マップ内表示（2D, VR) • AR • 位置合わせ方式（AR の場合のみ） • Immersal • Vuforia Area Target • ARCore Geospatial API Copyright© HoloLab Inc. All rights reserved 21

22.

Unity 版アプリケーションの動作パターン • ロード方式 • Web サーバー • ローカル • 表示方式 • マップ内表示（2D, VR) • AR • 位置合わせ方式（AR の場合のみ） • Immersal • Vuforia Area Target • ARCore Geospatial API Copyright© HoloLab Inc. All rights reserved 22

23.

24.

Unity 版アプリケーションの動作パターン • ロード方式 • Web サーバー • ローカル • 表示方式 • マップ内表示（2D, VR) • AR • 位置合わせ方式（AR の場合のみ） • Immersal • Vuforia Area Target • ARCore Geospatial API Copyright© HoloLab Inc. All rights reserved 24

25.

マップ内表示 Cesium for Unity を利用し、3D マップ内にコンテンツを表示 Copyright© HoloLab Inc. All rights reserved 3D都市モデルおよびPLATEAUオルソはProject PLATEAU で提供されるデータを利用 (https://www.mlit.go.jp/plateau/) 地形データは、測量法に基づく国土地理院長承認（使用）R3JHs 778を得て使用 25

https://www.mlit.go.jp/plateau/

26.

マップ内表示 (VR) Meta Quest を利用した VR 表示 Copyright© HoloLab Inc. All rights reserved 3D都市モデルおよびPLATEAUオルソはProject PLATEAU で提供されるデータを利用 (https://www.mlit.go.jp/plateau/) 地形データは、測量法に基づく国土地理院長承認（使用）R3JHs 778を得て使用 26

https://www.mlit.go.jp/plateau/

27.

28.

Unity 版アプリケーションの動作パターン • ロード方式 • Web サーバー • ローカル • 表示方式 • マップ内表示（2D, VR) • AR • 位置合わせ方式（AR の場合のみ） • Immersal • Vuforia Area Target • ARCore Geospatial API Copyright© HoloLab Inc. All rights reserved 28

29.

AR 表示での位置合わせ POML には配置する位置が記述されているだけ現実との位置合わせは Unity アプリケーション側で実装されている <poml> <scene> <model src="./Whale.glb"> <geo-reference latitude="35.68143170" longitude="139.76578530" ellipsoidal-height="51.55"> </geo-reference> </model> </scene> </poml> <poml> <scene> <space-reference space-id="77976"> </space-reference> <model ar-display="none" src="./77976-LivingRoom-tex.glb"> </model> <model position="0.34 0.54 0.12" src="./Fish.glb"> </model> </scene> </poml> Copyright© HoloLab Inc. All rights reserved 29

30.

31.

32.

ARCore Geospatial API による位置合わせ Geospatial API を利用し、端末の緯度・経度・楕円体高を取得コンテンツの配置 Copyright© HoloLab Inc. All rights reserved 3D都市モデルおよびPLATEAUオルソはProject PLATEAU で提供されるデータを利用 (https://www.mlit.go.jp/plateau/) 地形データは、測量法に基づく国土地理院長承認（使用）R3JHs 778を得て使用 32

https://www.mlit.go.jp/plateau/

33.

34.

POML の作成と表示 Unity アプリケーション手書き 3D コンテンツデータコード（プログラム）で生成 POML Web アプリケーションモデルデータ Web アプリケーション画像データ Copyright© HoloLab Inc. All rights reserved 3D都市モデルおよびPLATEAUオルソはProject PLATEAU で提供されるデータを利用 (https://www.mlit.go.jp/plateau/) 地形データは、測量法に基づく国土地理院長承認（使用）R3JHs 778を得て使用 34

https://www.mlit.go.jp/plateau/

35.

Web 版 Spirare アプリケーション • 機能 • POML の編集 • POML の表示 (2D, WebAR) • 動作タイプ • ブラウザ版アプリケーション • デスクトップ版アプリケーション • 3D エンジンとして Babylon.js を利用 POML 編集画面 Copyright© HoloLab Inc. All rights reserved 3D都市モデルおよびPLATEAUオルソはProject PLATEAU で提供されるデータを利用 (https://www.mlit.go.jp/plateau/) 地形データは、測量法に基づく国土地理院長承認（使用）R3JHs 778を得て使用 35

https://www.mlit.go.jp/plateau/

36.

37.

ブラウザ版アプリケーションでの編集と表示 Web サーバー POML POML PC デバイスブラウザ版アプリケーション Unity アプリケーション Copyright© HoloLab Inc. All rights reserved 3D都市モデルおよびPLATEAUオルソはProject PLATEAU で提供されるデータを利用 (https://www.mlit.go.jp/plateau/) 地形データは、測量法に基づく国土地理院長承認（使用）R3JHs 778を得て使用 37

https://www.mlit.go.jp/plateau/

38.

https://www.mlit.go.jp/plateau/

39.

40.

41.

42.

43.

44.

POML の作成と表示 Unity アプリケーション手書き 3D コンテンツデータコード（プログラム）で生成 POML Web アプリケーションモデルデータ Web アプリケーション画像データ Copyright© HoloLab Inc. All rights reserved 3D都市モデルおよびPLATEAUオルソはProject PLATEAU で提供されるデータを利用 (https://www.mlit.go.jp/plateau/) 地形データは、測量法に基づく国土地理院長承認（使用）R3JHs 778を得て使用 44

https://www.mlit.go.jp/plateau/

45.

46.

47.

48.

河川監視カメラの表示東京都建設局の「河川監視カメラ位置情報一覧データ」を利用 (https://catalog.data.metro.Tokyo.lg.jp/dataset/t000014d0000000028) クリエイティブ・コモンズ表示（CC BY）(https://creativecommons.org/licenses/by/4.0/deed.ja) Copyright© HoloLab Inc. All rights reserved 3D都市モデルおよびPLATEAUオルソはProject PLATEAU で提供されるデータを利用 (https://www.mlit.go.jp/plateau/) 地形データは、測量法に基づく国土地理院長承認（使用）R3JHs 778を得て使用 48

49.

避難所の表示東京都提供の「避難所、避難場所データオープンデータ」を利用 (https://catalog.data.metro.Tokyo.lg.jp/dataset/t000003d0000000093) クリエイティブ・コモンズ・ライセンス表示 4.0 国際（https://creativecommons.org/licenses/by/4.0/legalcode.ja ） Copyright© HoloLab Inc. All rights reserved 49

50.

https://www.mlit.go.jp/plateau/

51.

https://geospatial.jp/ckan/dataset/houmusyouchizu-2022-1-700

52.

53.

54.

55.

56.

WebAssembly (Wasm) とは • W3C が策定するオープンな実行可能バイナリ形式 • 仮想命令セットアーキテクチャ • 様々なプラットフォームで動作する低レイヤな中間表現 • Rust, C++, Go, AssemblyScript, etc… からコンパイル可能 • 隔離環境内で安全に実行可能 • ポータブルで任意の環境での動作し、再コンパイルの必要なし Copyright© HoloLab Inc. All rights reserved 56

57.

WebAssembly (Wasm) とは Wasm ソースコードコンパイル Wasm へのコンパイルに対応した任意の言語 • Rust • C++, C • Go • AssemblyScript • etc… バイナリ形式。仮想のアーキテクチャの命令セット wat wasm を人間が読みやすいようにしたテキスト形式 Copyright© HoloLab Inc. All rights reserved 57

58.

Wasm の動作環境 • Wasm ランタイム上で動作ホストからメモリや関数を提供された中で動作。アクセス制御等、安全な動作が可能 local.get 1 local.get 0 i32.add • ポータブルランタイム上で動作するため、同じバイナリがホスト環境 (OS/Web ブラウザ) によらず任意の環境で動作が可能有名な Wasm ランタイムの OSS • Wasmtime (https://wasmtime.dev/) • Wasmer (https://wasmer.io/) Wasm Host Wasm ランタイムホスト環境 (OS/Web ブラウザ) Copyright© HoloLab Inc. All rights reserved 58

59.

60.

Wasm で動く Spirare コンテンツ1 Rust Host Wasm on_start get_element_by_id element change_anim_by_name get_element_by_id element on_update set_position set_rotation Copyright© HoloLab Inc. All rights reserved 60

61.

62.

63.

64.

Spirare API 時計のサンプルの呼び出しシーケンス Host → Wasm の呼び出し Host • on_start • on_update Wasm on_update get_element_by_id element Wasm → Host の呼び出し • • • • • get_element_by_id element get_element_by_id get_position set_position get_text set_text set_text set_text Copyright© HoloLab Inc. All rights reserved 64

65.

WASI (WebAssembly System Interface) Wasm がホスト環境のシステムコールと同等の機能にアクセスするための仕様 Wasm OS のネイティブのシステムコールに直接アクセスできない • I/O アクセス WASI • タイマー • 乱数 • etc… system call Host Wasm ランタイム POSIX に似せたインターフェース仕様 WebAssembly と同じくオープンな仕様として策定が進行中 https://github.com/WebAssembly/WASI ホスト環境 (OS/Web ブラウザ) Copyright© HoloLab Inc. All rights reserved 65

https://github.com/WebAssembly/WASI

66.

WASI の例 (例) 時刻取得 Wasm は WASI から時刻を取得する。各OSの時刻取得のシステムコールに直接アクセスはできない。 • clock_res_get システムの時刻の精度を取得 • clock_time_get システムの時刻を取得 Rust など、WASI へのコンパイルに対応したコンパイラを使うと、自動的に呼び出してくれる。 (cargo build --target wasm32-wasi) Copyright© HoloLab Inc. All rights reserved 66

67.

https://github.com/SteveSandersonMS/dotnet-wasi-sdk

68.

69.

オープンソース化 2023/4/21 公開 • project-spirare-docs • https://github.com/HoloLabInc/project-spirare-docs • POML 仕様のドキュメント • ProjectSpirare-for-Unity • https://github.com/HoloLabInc/ProjectSpirare-for-Unity • Unity 用の表示ライブラリ、表示アプリケーション • spirare-babylonjs • https://github.com/HoloLabInc/spirare-babylonjs • Web 用の編集表示ライブラリ、編集表示アプリケーション今後公開予定 • Spirare 用 WebAssembly の Spirare API 仕様 • Spirare 用 WebAssembly 作成のためのライブラリ Copyright© HoloLab Inc. All rights reserved 69

Project Spirare - 3D コンテンツを記述する汎用フォーマットの定義と実装

ホロラボ

関連スライド

3DモデルとPower BIの悪魔合体「建物みえるくん」をつくってみた！

トヨタのxR活用事例ご紹介～ホロラボとの開発秘話を中心に (ホロラボカンファレンス 2022 トヨタ自動車株式会社栢野様発表スライド)

BIMから3次元モデルを消してみたら、意外に便利でした

3DGS･フォトグラメトリ比較と最新事例

三菱重工業との取り組み事例　～HoloLensなどを活用した現場向けコミュニケーションツールの開発～

⽵中⼯務店の“建設DX”と “open BIM”と“xR” (ホロラボカンファレンス 2022 株式会社竹中工務店橋口様、川上様発表スライド)

各ページのテキスト

Project Spirare - 3D コンテンツを記述する汎用フォーマットの定義と実装

ホロラボ

関連スライド

3DモデルとPower BIの悪魔合体 「建物みえるくん」をつくってみた！

トヨタのxR活用事例ご紹介 ～ ホロラボとの開発秘話を中心に (ホロラボカンファレンス 2022 トヨタ自動車株式会社 栢野様 発表スライド)

BIMから3次元モデルを消してみたら、意外に便利でした

3DGS･フォトグラメトリ比較と最新事例

三菱重工業との取り組み事例 ～HoloLensなどを活用した現場向けコミュニケーションツールの開発～

⽵中⼯務店の“建設DX”と “open BIM”と“xR” (ホロラボカンファレンス 2022 株式会社竹中工務店 橋口様、川上様 発表スライド)

各ページのテキスト

3DモデルとPower BIの悪魔合体「建物みえるくん」をつくってみた！

トヨタのxR活用事例ご紹介～ホロラボとの開発秘話を中心に (ホロラボカンファレンス 2022 トヨタ自動車株式会社栢野様発表スライド)

三菱重工業との取り組み事例　～HoloLensなどを活用した現場向けコミュニケーションツールの開発～

⽵中⼯務店の“建設DX”と “open BIM”と“xR” (ホロラボカンファレンス 2022 株式会社竹中工務店橋口様、川上様発表スライド)