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

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

Avatar for tarukosu tarukosu
December 05, 2020
Programming
690
0

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

Avatar for tarukosu

tarukosu

December 05, 2020

More Decks by tarukosu

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

Other Decks in Programming

See All in Programming
XHTMLが残したもの
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
2
430
自分的「カンファレンスの楽しみ方」
Avatar for syumai syumai
0
190
ALB ログから Trace を気合で繋げる技術
Avatar for Hayato Kawai fohte
7
880
片田舎のおっさん、 Swift Buildのダイアモンド問題解決の不具合修正PRを出すが、解決方法がキャッシュをしないようにすることであり、ビルド時間が伸びると言われてマージされないので高速化もする/swiftbuild
Avatar for yimajo yimajo
0
360
AI時代に学ぶ 好きなルール 嫌いなルール Linter編
Avatar for Shota Nemoto shorty5121
0
870
一参加者から『中の人』へ 〜全通PHPerがブースに立って学んだ、カンファレンスを100倍楽しむコツ〜
Avatar for 藤掛大介 wp_daisuke
0
120
Press start. Python's next generation.
Avatar for Carol Willing willingc
PRO
3
310
レビュー履歴をAIに食わせて、 Compose移行を加速するs
Avatar for Yuki Shiho shihochan
0
270
Vibes Containers 〜AIで変わるコンテナ設計と運用〜
Avatar for Tetsuya Kikuchi tkikuc
2
500
Deep dive into the select statement (GopherCon UK)
Avatar for Jesús Espino jespino
0
170
LoopHub - ローカルで動く GitHub で、AI と共同開発
Avatar for jugyo jugyo
0
450
「つくるAI」だけではバグは見つからない　～テストに必要な「見つけるAI」を分離させる戦略～
Avatar for Masahiko Funaki(舟木 将彦) mfunaki
0
230

Featured

See All Featured
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k
The Director’s Chair: Orchestrating AI for Truly Effective Learning
Avatar for Mike Taylor tmiket
1
290
<Decoding/> the Language of Devs - We Love SEO 2024
Avatar for Nikki Halliwell nikkihalliwell
1
320
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
2
500
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
58k
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
Avatar for Ryan Jones ryanjones
0
230
New Earth Scene 8
Avatar for Sydney Stone popppiees
3
2.5k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.9k
Exploring the relationship between traditional SERPs and Gen AI search
Avatar for Ray Grieselhuber raygrieselhuber
PRO
2
4.3k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
35
2.6k
Designing Experiences People Love
Avatar for Jonathan Moore moore
143
24k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
11
1k

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