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

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

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
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
560
ホロラボでの HoloLens アプリ開発技術 / App Development at HoloLab
Avatar for tarukosu tarukosu
1
3.7k

Other Decks in Programming

See All in Programming
act2-costs.pdf
Avatar for Sumedh Bala sumedhbala
0
120
琵琶湖の水は止められてもNet--HTTPのリトライは止められない / You might be able to stop the water flow of Lake Biwa but you can't stop Net::HTTP retries
Avatar for luccafort luccafort
PRO
0
410
信頼性について考えてみる（SRE NEXT 2026 miniLT）
Avatar for hayama hayama17
0
200
【やさしく解説 設計編 #1】「ドメイン駆動」と「実装駆動」ってなに？ 〜設計の考え方を、たとえ話で学ぼう〜
Avatar for HideyukiKitao panda728
PRO
1
120
PHP に部分適用が来るぞ！……ところで何それ？おいしいの？ #phpcon / phpcon-2026
Avatar for shogogg shogogg
0
290
ソフトウェア設計に溶けるインフラ ― AWS CDK のインフラ認識論
Avatar for Kenji Kono konokenj
2
580
自作OSでスライド発表する
Avatar for uyuki uyuki234
1
3.9k
トークンをケチるな、設計しろ：GitHub Copilotを賢く使うコンテキスト戦略
Avatar for Ochtum ochtum
0
320
使用 Meilisearch 建立新聞搜尋工具
Avatar for johnroyer johnroyer
0
160
5分で問診！Composer セキュリティ健康診断
Avatar for コドモン開発チーム codmoninc
0
440
Go言語とトイモデルで学ぶTransformerの気持ち / fukuokago23-transformer
Avatar for monochromegane monochromegane
0
130
ITヒヤリハットを整理してみた ～ライフサイクルと原因から考える再発防止策～
Avatar for kouki.miura koukimiura
1
110

Featured

See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
2
420
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
270
14k
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
Avatar for soudai sone soudai
PRO
67
56k
Music & Morning Musume
Avatar for Bryan Veloso bryan
47
7.3k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
10k
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
Avatar for Tomoya Matsuura tomoyanonymous
3
1k
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
510
Darren the Foodie - Storyboard
Avatar for Kevinho.art khoart
PRO
3
3.4k
Building an army of robots
Avatar for Kyle Neath kneath
306
46k
Stewardship and Sustainability of Urban and Community Forests
Avatar for Eric Wiseman pwiseman
0
360
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
Avatar for Andy Polaine apolaine
1
370

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