Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
AR 世界を Web 化するには / ar-web
tarukosu
December 05, 2020
Programming
0
350
AR 世界を Web 化するには / ar-web
tarukosu
December 05, 2020
Tweet
Share
More Decks by tarukosu
See All by tarukosu
tarukosu
0
280
tarukosu
1
1.8k
Other Decks in Programming
See All in Programming
makicamel
1
180
nanimonodemonai
2
1.4k
hanakla
2
3k
standfm
0
240
line_developers_tw2
0
750
dulltz
0
520
akatsukinewgrad
0
210
mraible
PRO
0
220
anchorcable
1
130
wasabeef
1
570
akatsukinewgrad
0
220
akatsukinewgrad
0
210
Featured
See All Featured
scottboms
251
11k
jeffersonlam
328
15k
reverentgeek
27
1.9k
philnash
8
500
robhawkes
52
2.8k
michaelherold
225
8.5k
jakevdp
775
200k
3n
163
22k
smashingmag
229
18k
caitiem20
308
17k
zakiwarfel
88
3.3k
searls
204
35k
Transcript
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ブラウザ上で動作する低水準言語 ブラウザ外(サーバアプリ、クライアントアプリ)での利用のための標準化も行われている
プロトタイプを作ってみた Copyright© HoloLab Inc. 2020 All rights reserved 7
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 での動作デモ
A-Frame での動作デモ Copyright© HoloLab Inc. 2020 All rights reserved 15
まとめ • WebAssembly を使うことで、スクリプトの動的ローディングが行えた • WebAssembly を介することで、コンテンツ側で利用できる言語の幅 が広がり、また、実行できるプラットフォームの幅も広がる • 今後は
WebAssembly 側のコードで通信ができるようにしたい Copyright© HoloLab Inc. 2020 All rights reserved 16