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

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

Avatar for tarukosu tarukosu
December 05, 2020
Programming
0
670

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

Avatar for tarukosu

tarukosu

December 05, 2020
Tweet

More Decks by tarukosu

See All by tarukosu
HoloLens と Power Platform / HoloLens and Power Platform
Avatar for tarukosu tarukosu
0
520
ホロラボでの HoloLens アプリ開発技術 / App Development at HoloLab
Avatar for tarukosu tarukosu
1
3.5k

Other Decks in Programming

See All in Programming
202507_ADKで始めるエージェント開発の基本 〜デモを通じて紹介〜（奥田りさ）
Avatar for RisaTube risatube
PRO
2
490
生成AI時代のコンポーネントライブラリの作り方
Avatar for touyou touyou
1
300
DMMを支える決済基盤の技術的負債にどう立ち向かうか / Addressing Technical Debt in Payment Infrastructure
Avatar for yoshiyoshifujii yoshiyoshifujii
4
580
Yes, You Can Work on Rails & any other Gem
Avatar for Kasper Timm Hansen kaspth
0
110
MCPを使ってイベントソーシングのAIコーディングを効率化する / Streamlining Event Sourcing AI Coding with MCP
Avatar for Tomohisa Takaoka tomohisa
0
180
ソフトウェア設計とAI技術の活用
Avatar for 増田 亨 masuda220
PRO
25
6.7k
20250708_JAWS_opscdk
Avatar for Takuya Yonezawa takuyay0ne
2
150
「App Intent」よくわからんけどすごい！
Avatar for rinngo rinngo0302
1
120
「次に何を学べばいいか分からない」あなたへ──若手エンジニアのための学習地図
Avatar for panda_program panda_program
3
630
SQLアンチパターン第2版 データベースプログラミングで陥りがちな失敗とその対策 / Intro to SQL Antipatterns 2nd
Avatar for Takuto Wada twada
PRO
26
8k
GPUを計算資源として使おう！
Avatar for prime number primenumber
1
290
Porting a visionOS App to Android XR
Avatar for Akio Itaya akkeylab
0
910

Featured

See All Featured
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
6.7k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
411
22k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
181
54k
KATA
Avatar for Megan Lloyd mclloyd
30
14k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.4k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
51
3.3k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
40
1.9k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
77
5.9k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
367
19k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
3.9k
Gamification - CAS2011
Avatar for David Bonilla davidbonilla
81
5.4k

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