Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

A38e9ebe0e62fd6753f555c005ea6551?s=47 tarukosu
December 05, 2020
Programming
0
420

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

A38e9ebe0e62fd6753f555c005ea6551?s=128

tarukosu

December 05, 2020
Tweet

More Decks by tarukosu

See All by tarukosu
A38e9ebe0e62fd6753f555c005ea6551?s=48 tarukosu
0
320
A38e9ebe0e62fd6753f555c005ea6551?s=48 tarukosu
1
2.2k

Other Decks in Programming

See All in Programming
Ddca38befa8dfb037884f00da72dd1f5?s=48 os1ma
0
130
0ed400174f90a4bcee05f3455597932f?s=48 ohbarye
3
130
70adfe7679427fa498899769e632b672?s=48 itok
1
360
5f57d2d205e77e185986459c1b89a874?s=48 jeroenmols
1
240
E65d5a0c854f5433a69859ec0cd4d5bb?s=48 massa142
0
320
F74146bada61d15a5e652919815bd355?s=48 satoki
0
300
9bf923e39671cde83584e3e926296c13?s=48 kishikawakatsumi
0
180
4d78b749c315e21a956053dcbf0508a9?s=48 po3rin
1
110
79fe3c13c618a61329298bdd6a86ec42?s=48 basthomas
0
130
Cfbe23392787cb3ad4689c5f72463fcc?s=48 makicamel
3
760
D63b0683b8fdd02c71c802691f97c04c?s=48 jogannaoki
0
1.3k
2594ac7ce91fd7d9a3ce71ca7cc2d0c0?s=48 d_date
1
150

Featured

See All Featured
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
240
23k
A0517b08532aec8ab2aae3f65d40ad86?s=48 hannesfritz
32
1.1k
E195ae45320d9202eaa01c9f1d31a416?s=48 marktimemedia
15
720
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
443
29k
88bc30284c6a424b63a92aad27d0ba36?s=48 jnunemaker
PRO
43
4.9k
B6a8f005f39d23ffc930508ac9da68b9?s=48 vanstee
122
5.1k
B47b288784fda77a94aeb234ca743c24?s=48 keavy
111
15k
D47656e20ff5e42f125fc5ea0fd636c6?s=48 tmm1
64
10k
Bfd6b681ec6e8c9bef82ff0521c364f7?s=48 kastner
56
2.1k
Ef32e0b1ac5082450dc8c1fca3a26b5c?s=48 cherdarchuk
78
270k
C620790ae5bf5b50c245b2e0ef95f338?s=48 deanohume
294
28k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
324
54k

Transcript

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

    Web 化するには 株式会社ホロラボ Researcher 古田裕介 たるこす(@tarukosu)

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

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

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

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

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

    ? コンテンツ HTML ? スクリプト JavaScript WebAssembly (wasm) ? 3D モデル GLB ? WebAssembly はWebブラウザ上で動作する低水準言語 ブラウザ外（サーバアプリ、クライアントアプリ）での利用のための標準化も行われている

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

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

    HTTP HTTP コンテンツ HTML XML [独自フォーマット] スクリプト JavaScript WebAssembly (wasm) WebAssembly (wasm) 3D モデル GLB [予定]

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

    WebAssembly (wasm) XML A-Frame (ブラウザ) Unity Rust AssemblyScript ノードエディタ

  10. コンテンツ定義 独自フォーマットの 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 立方体を配置

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

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

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

  13. ブラウザで動作するノードエディタ 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 にコンパイル

  14. Unity での動作デモ

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

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

    WebAssembly 側のコードで通信ができるようにしたい Copyright© HoloLab Inc. 2020 All rights reserved 16