AR 世界を Web 化するには / ar-web

Copyright© HoloLab Inc. 2020 All rights reserved 1 AR 世界を
Web 化するには株式会社ホロラボ Researcher 古田裕介たるこす(@tarukosu)

近い将来、一般ユーザーが空間に紐づいたコンテンツを投稿し、スマートフォンやグラス型デバイスを使って閲覧するようなサービスが普及するのではないか SNS: その場所で投稿されたメッセージや写真が見られるレビューサービス: 目の前の店の評価が見られる

3D データとテキストやノードベースのプログラムをユーザーがアップロードし、他のユーザーが表示することができるサービスも増えるのではないか VRChat のようなイメージ

個人開発のARアプリも増えてくるはず

こうなってほしい・別々のサービスが提供しているコンテンツを同時に表示したい・ユーザーが作成したデータやスクリプトはいろいろなアプリケーションで表示できてほしい（特定のサービス専用になってほしくない）・コンテンツ側で自由にプログラムが書ける Web におけるブラウザと Web ページのような仕組みが必要

課題・プロトコル、フォーマットが標準化されていない・スクリプトの動的ローディングをどう実現するか Web AR 世界の Web ネットワークプロトコル HTTP HTTP
? コンテンツ HTML ? スクリプト JavaScript WebAssembly (wasm) ? 3D モデル GLB ? WebAssembly はWebブラウザ上で動作する低水準言語ブラウザ外（サーバアプリ、クライアントアプリ）での利用のための標準化も行われている

UniWasm WebAssembly が Unity アプリ上で動けば、スクリプトの動的ローディングが実現できるのでは https://github.com/tarukosu/UniWasm Web UniWasm ネットワークプロトコル
HTTP HTTP コンテンツ HTML XML [独自フォーマット] スクリプト JavaScript WebAssembly (wasm) WebAssembly (wasm) 3D モデル GLB [予定]

コンテンツ構成図 Copyright© HoloLab Inc. 2020 All rights reserved 9
WebAssembly (wasm) XML A-Frame (ブラウザ) Unity Rust AssemblyScript ノードエディタ

コンテンツ定義独自フォーマットの XML <body> <primitive type="cube"> <script src="./translate_x.wasm"/> </primitive> <element
position.x="3"> <primitive type="cube"> <script src="./circular_motion.wasm"/> </primitive> </element> </body> 動作を定義した WebAssembly 立方体を配置

WebAssembly でオブジェクトを動かす仕組み Copyright© HoloLab Inc. 2020 All rights reserved 11
WebAssembly (wasm) WebAssembly では、外部で定義した関数の呼び出しや、外部から WebAssembly 側の関数の呼び出しが可能アプリケーション内のコード Update (毎フレーム呼び出される） GetPosition （オブジェクト位置の取得） SetPosition （オブジェクト位置を更新）

Rust による動作定義 Update 関数内で毎フレームのオブジェクトの移動を実装 circular_motion.rs translate_x.rs

ブラウザで動作するノードエディタ Copyright© HoloLab Inc. 2020 All rights reserved 13 export
declare function transform_set_local_position(x: f32, y: f32, z: f32): void; ... export function update(): void { const number1num = 1.2 as f32; const number2num = -1 as f32; const number3num = 3 as f32; const number4num = 0.01 as f32; ... ノード定義を AssemblyScript に変換し、 WebAssembly にコンパイル

Unity での動作デモ

AR 世界を Web 化するには / ar-web

AR 世界を Web 化するには / ar-web

tarukosu

More Decks by tarukosu

Other Decks in Programming

Featured

Transcript

Copyright© HoloLab Inc. 2020 All rights reserved 1 AR 世界を

3D データとテキストやノードベースのプログラムをユーザーがアップロードし、他のユーザーが表示することができるサービスも増えるのではないか VRChat のようなイメージ

個人開発のARアプリも増えてくるはず

課題・プロトコル、フォーマットが標準化されていない・スクリプトの動的ローディングをどう実現するか Web AR 世界の Web ネットワークプロトコル HTTP HTTP

プロトタイプを作ってみた Copyright© HoloLab Inc. 2020 All rights reserved 7

UniWasm WebAssembly が Unity アプリ上で動けば、スクリプトの動的ローディングが実現できるのでは https://github.com/tarukosu/UniWasm Web UniWasm ネットワークプロトコル

コンテンツ構成図 Copyright© HoloLab Inc. 2020 All rights reserved 9

コンテンツ定義独自フォーマットの XML <body> <primitive type="cube"> <script src="./translate_x.wasm"/> </primitive> <element

WebAssembly でオブジェクトを動かす仕組み Copyright© HoloLab Inc. 2020 All rights reserved 11

Rust による動作定義 Update 関数内で毎フレームのオブジェクトの移動を実装 circular_motion.rs translate_x.rs

ブラウザで動作するノードエディタ Copyright© HoloLab Inc. 2020 All rights reserved 13 export

Unity での動作デモ

A-Frame での動作デモ Copyright© HoloLab Inc. 2020 All rights reserved 15

まとめ • WebAssembly を使うことで、スクリプトの動的ローディングが行えた • WebAssembly を介することで、コンテンツ側で利用できる言語の幅が広がり、また、実行できるプラットフォームの幅も広がる • 今後は