WebVR と、それを支える技術 Mozilla Japan N.Shimizu ([email protected]) WebVR 文化祭＠dots. (2016/11/23)

/4IJNJ[V!DIJLPTLJ ˖ ⛆加㖩ח֮׷8FC׾⡲׷⠓爡ד⫴ְגְתׅ ˖ 'JSFGPY'JSFGPYGPSJ04%FW5PPMT ˖ 3VTUBTNKT8FC"TTFNCMZ8FC73(BNJOH ˖ فؚٗٓىؚٝ鎉铂ה؟حؕ٦鋅׷ךָ㥨ֹדׅ ˖ 㘗ך䓼ְ鎉铂ָ㥨ֹדׅ ˖ IUUQTTQFBLFSEFDLDPNDIJLPTLJ

No content

No content

Open Source Project

Proudly non-profit, Mozilla makes products like Firefox with a mission to keep the power of the Web in the hands of users everywhere. Mozilla Mission (https://www.mozilla.org/en-US/mission/)

To ensure the Internet is a global public resource, open and accessible to all. Mozilla Mission(https://www.mozilla.org/en-US/mission/)

The Expanding World of Web Standard Technologies and Platforms ts - r r U r In r- f IETF Full- screen Brotli HTTP/2 TLS SSL URL HTTP Origin data URL Real-Time Communications Progressive Web Apps Extensible to Anything! Progressive Enhancement Device Control Game, VR & High Performance Apps Proxy Module QUIC Net Info CSP Beacon Navi. Timing DNT CORS block scope Class Gene- rators Itera- tors Collec- tions DOM UI Events File RDF RSS RDFa Indexed DB WOFF Shared Workers fetch Public Key Pinning HSTS Web Socket Protocol - Web Anima- tions Arrow Func. Pro- mise Template Literals ECMA Script 2015 CSS Snapshot 2015 HTML W3C HTML5 SIMD Khronos Async Func. Push Service Worker HTML Components Custom Elements Generic Sensor Blue- tooth USB Speech Media Recorder MIDI FIDO Game- pad Shared Mem. Web Assembly asm.js WebVR Typed Array WebGL Shadow DOM temp- lates EME vibra- tion Web Crypto Web Audio Orienta- tion WebRTC ORTC data channel Media Stream Battery Status Presen- tation Pointer Events Writing Mode Shapes Tran- sitions & Anima- tions Fonts Layout Media Queries text decora- tion trans- form Mask- ing Flex Box Filter User Inter- face Open Media Multi Column Permi- ssions Notifi- cations geo- location Page Visibility Web App Manifest Exclu- sions Grid Layout Math ML Quarks Mode SMIL SVG P PNG APNG OGP Opus H.264 VP10 WebM VP8 mp3 VP9 multi media Web Sockets API WHATWG Server- Sent ev. HTML5 Parser Elements & Syntax sections HTML5 Forms Canvas 2D Web Workers WAI- ARIA Content Model app cache Micro- data Web Storage

IUUQTEFWFMPQFSNP[JMMBPSHKBEPDT8FC"1*8FC73@"1*

IUUQTXXXZPVUVCFDPNZUCSBOEKBVTJOHMPHPIUNM

No content

No content

VRコンテンツに対する要求 プラットフォームへの要求 没入感 高リフレッシュレート、低遅延性、ヘッドトラッキング、 入力インタフェースへの対応 臨場感 3Dグラフィックス、立体音響 開始までのハードルの低さ アセットの非同期ロード、キャッシュコントロール、フットプリントの小ささ

プラットフォームへの要求 Web技術 高リフレッシュレート、ヘッドトラッキング WebVR API 低遅延性、小フットプリント asm.js / WebAssembly / Web Workers / SharedArrayBuffer / Atomics 入力インタフェース Gamepad API 3D表現 WebGL / WebGL2 / Web Audio API キャッシュコントロール Service Worker / IndexedDB / IndexedDB2

IUUQTEFWFMPQFSNP[JMMBPSHKBEPDT8FC"1*8FC73@"1*

DPOTUDBOWBTEPDVNFOURVFSZ4FMFDUPS DBOWBT OBWJHBUPSHFU73%JTQMBZT UIFO EJTQMBZ-JTU\ JG EJTQMBZ-JTUMFOHUI]]EJTQMBZ-JTU<>JT1SFTFOUJOH \ SFUVSO1SPNJTFSFKFDU EJTQMBZ-JTU ^ SFUVSO1SPNJTFSFTPMWF EJTQMBZ-JTU<> ^ UIFO EJTQMBZEJTQMBZSFRVFTU1SFTFOU \TPVSDFDBOWT^ UIFO EJTQMBZFOUFS73 EJTQMBZ HMDの取得

GVODUJPOFOUFS73 EJTQMBZ \ DPOTUVQEBUFGVODUJPO \ EJTQMBZSFRVFTU"OJNBUJPO'SBNF VQEBUF EJTQMBZHFU'SBNF%BUB GSBNF%BUB 䲽歗 EJTQMBZTVCNJU%BUB ^ EJTQMBZSFRVFTU"OJNBUJPO'SBNF VQEBUF ^ アニメーションループ

EJTQMBZSFTFU1PTF 植㖈⡘縧׾⾱挿ח鏣㹀 DPOTUQPTFEJTQMBZHFU1PTF ⡘縧הぢֹךر٦ة׾䭯אؔـآؙؑز׾《䖤 DPOTUQPTJUJPOQPTFQPTJUJPO植㖈ך⡘縧׾《䖤 DPOTUPSJFOUBUJPOQPTFPSJFOUBUJPO植㖈ךぢֹ׾《䖤 DPOTUYQPTJUJPO<> DPOTUPSJFOUBUJPO9PSJFOUBUJPO<> HMDの位置と向きの取得

IUUQXXXIUNMSPDLTDPNFOUVUPSJBMTEPPEMFTHBNFQBEHBNFQBEUFTUFSUFTUFSIUNM

XJOEPXBEE&WFOU-JTUFOFS HBNFQBEDPOOFDUFE GVODUJPO F \ DPOTPMFMPH DPOOFDUFEBUJOEFYETECVUUPOT EBYFT FHBNFQBEJOEFY FHBNFQBEJE FHBNFQBECVUUPOTMFOHUI FHBNFQBEBYFTMFOHUI ^ XJOEPXBEE&WFOU-JTUFOFS HBNFQBEEJTDPOOFDUFE GVODUJPO F \ DPOTPMFMPH (BNFQBEEJTDPOOFDUFEGSPNJOEFYET FHBNFQBEJOEFY FHBNFQBEJE ^ ゲームパッドの接続と取り外しはイベントで検知できます

GVODUJPOQPMM(BNFQBET \ WBSHBNFQBETOBWJHBUPSHFU(BNFQBET ]]<> GPS WBSJJHBNFQBETMFOHUIJ \ WBSHQHBNFQBET JG HQ \ HBNFQBE*OGPJOOFS)5.-DPOOFDUFEBUJOEFYHQJOEFYHQJE *UIBTHQCVUUPOTMFOHUI CVUUPOTBOEHQBYFTMFOHUIBYFT HBNF-PPQ DMFBS*OUFSWBM JOUFSWBM ^ ^ ^ ゲームパッドの状態は、1ショットで取得します

ߏจղੳ μ΢ϯϩʔυ ίϯύΠϧ ࣮ߦ ߏจղੳ μ΢ϯϩʔυ ίϯύΠϧ ࣮ߦ asm.js JavaScript

Bytes asm.js AST ߏจղੳ ݕূ σίʔυ WASM MIR Execut able ग़ྗ ग़ྗ JS 実行 Byte code AST Baseline MIR Execut able 実行と プロファイル 実行 Bail コンパイル Bytes σίʔυ ߏจղੳ ग़ྗ ग़ྗ ग़ྗ asm.js JavaScript

ߏจղੳ μ΢ϯϩʔυ ίϯύΠϧ ࣮ߦ asm.js ߏจղੳ μ΢ϯϩʔυ ίϯύΠϧ ࣮ߦ WASM

Bytes asm.js AST ߏจղੳ ݕূ σίʔυ Bytes WASM MIR Execut able ݕূ ग़ྗ ग़ྗ asm.js WASM

GVODUJPO4US6UJMT TUEMJC G IFBQ \ VTFBTN WBSCVGGFS OFXTUEMJC6JOU"SSBZ IFBQ WBSMPHGMPH GVODUJPOTUSMFO \ WBSJ WBSMFOHUI XIJMF CVGGFS] \ MPH J] MPH CVGGFS] J J ] MFOHUI MFOHUI ] ^ SFUVSOMFOHUI] ^ SFUVSO\ TUSMFOTUSMFO ^ ^

ΞϓϦ ѹॖͳ͠ gzipѹॖ asm.js WASM asm.js WASM Hello World 301KiB 204KiB 71KiB 26KiB AngryBots 19MiB 6 MiB 4.1 MiB 3.0 MiB StandardAssets 25.7MiB 13.4 MiB 5.5 MiB 4.3 MiB UnityChan-CRS 21.3MiB 11.4 MiB 4.7 MiB 3.7 MiB

No content

厣加귓㶨 괏讒 ֹאיׁ׿ד׮׻ַ׷--7._؝ٝػ؎ٓ׾荈⡲ׅ׷׋׭ךؖ؎سـحؙ ؎ٝفٖأآٍػٝ *4#/

コマンドライン FNDDPIFMMPKTIFMMPD OPEFIFMMPKT IFMMPXPSME FNDDPIFMMPIUNMIFMMPD PQFOIFMMPIUNM -o オプションで html / js へ出力

WebAssembly Explorer: http://mbebenita.github.io/WasmExplorer/

メインスレッド • JavaScriptのプログラムの時間軸 • メインスレッドの持っている時間を、すべての処理で分け合っています • ブラウザのUI処理や、イベントの受付、通信なども、このスレッドで処理しています functionA functionB functionC

メインスレッドをブロックしなくても、重たい処理を行えるように • Web Workers を利用することで、メインスレッド以外にスレッドを作成できます • 作成したスレッドで重たい処理をすれば、メインスレッドを占有することはありません • 大きなArrayBufferは所有権を移動させることで、効率よく転送できます fetch decode doSomething task QPTU.FTTBHF QPTU.FTTBHF task task task task task

SharedArrayBuffer • スレッド間で共有可能なArrayBuffer • ArrayBuffer同様、ビュー経由で要素にアクセスします • "ECMAScript Shared Memory and Atomics" で提案中です
 http://tc39.github.io/ecmascript_sharedmem/shmem.html أٖحس 4IBSFE"SSBZ#VGGFS أٖحس 4IBSFE"SSBZ#VGGFS 4IBSFE"SSBZ#VGGFS

heap[0] = heap[0] == 0 ? 2 : 0; はいくつかの処理に分割されます a = heap[0]; a == 0 heap[0] = 2 heap[0] = 1 heap[0] = 1 a == 0 heap[0] = 0 a = heap[0] a = heap[0] heap[0] == 1 heap[0] = 2 a == 0

DPOTUIFBQOFX6*OU"SSBZ CVGGFS "UPNJDTDPNQBSF&YIBOHF IFBQ DPOTUIFBQOFX6*OU"SSBZ CVGGFS IFBQ<>IFBQ<> Atomicsあり Atomicsなし 共有メモリには、Atomicsオブジェクトの提供する不可分操作を利用してアクセス します

WebGL / WebGL2 • 3Dグラフックスを扱うためのAPIで、GPUを利用できるのが特徴 • パイプライン処理 • GLSLで記述された「シェーダー」と呼ばれるプログラムを実行できる • OpenGL ES2 相当(WebGL) / OpenGL ES3 相当(WebGL2） 頂点座標の計算 プリミティブ構築 ラスタライズ ピクセル単位の処理 テスト、ブレンディング

JS DPOTUDBOWBTEPDVNFOURVFSZ4FMFDUPS DBOWBT DPOTUHMDBOWBTHFU$POUFYU XFCHM DPOTUFMNEPDVNFOURVFSZ4FMFDUPS WFSUFYTIBEFS DPOTUTIBEFSHMDSFBUF4IBEFS HM7&35&9@4)"%&3 갥挿ءؑ٦ت٦ך⡲䧭ծ'3"(.&/5@4)"%&3׾䭷㹀ׅ׷הؿًؚٓٝزءؑ٦ت٦ָ⡲䧭ׁ׸׷ HMTIBEFS4PVSDF TIBEFS FMNUFYU$POUFOU HMDPNQJMF4IBEFS TIBEFS ءؑ٦ت٦ך؝ٝػ؎ٕ JG HMHFU4IBEFS1BSBNFUFS TIBEFS HM$0.1*-&@45"564 \ DPOTPMFFSSPS HMHFU4IBEFS*OGP-PH TIBEFS ^ シェーダーのコンパイル

• 音声の生成や、イフェクト、周波数分析を行うためのAPI • モジュラーシンセを念頭に置いたAPI設計 • オーディオコンテキスト内部に、オーディオノードを利用してオーディオグラフを定義します • オーディオグラフで表現されるデータフローに従って、音声が処理されます Web Audio API：音声処理を行うためのAPI IUUQTEFWFMPQFSNP[JMMBPSHKBEPDT8FC"1*8FC@"VEJP@"1*

DPOTUBVEJPEPDVNFOURVFSZ4FMFDUPS BVEJP DPOTUBDOFX"VEJP$POUFYU DPOTUTSDOFX.FEJB&MFNFOU4PVSDF/PEF BD \NFEJB&MFNFOUBVEJP^ DPOTUHBJOOFX(BJO/PEF BD \HBJO^ DPOTUQBOOFSOFX4UFSFP1BOOFS/PEF BD DPOTUMUFSOFX#JRVBE'JMUFS/PEF BD \GSFRVFODZ^ TSDDPOOFDU HBJO DPOOFDU QBOOFS 
 DPOOFDU MUFS DPOOFDU BDEFTUJOBUJPO TSD HBJO QBOOFS EFTUJOB UJPO MUFS

立体音響：AudioListenerとPannerNode • 左右のパンニングだけでなく、音源と聞き手の角度や距離を加味して聞こえ方を調整できます • 音源の位置と向きをPannerNodeで、聞き手の位置と向きをAudioListnerで表現します • 利用する座標系は右手系の直行座標です 9 : ;

ゲームエンジンを利用する UnityのWebGL出力機能を利用する Webベースのオーサリングツールを使う Vizor.ioを利用する JSで書く three.js を利用する フレームワークを利用する A-Frameを利用する

BTDFOF BTQIFSFQPTJUJPOSBEJVTDPMPS&'%&BTQIFSF BCPYQPTJUJPOSPUBUJPOXJEUIIFJHIUEFQUI DPMPS$$%BCPY BDZMJOEFSQPTJUJPOSBEJVTIFJHIU DPMPS''$%BDZMJOEFS BQMBOFSPUBUJPOXJEUIIFJHIUDPMPS#$"BQMBOF BTLZDPMPS&$&$&$BTLZ BTDFOF A-Frame：マークアップでVRコンテンツ

No content

Visor.io：ウェブベースのWebVRオーサリングツール

8FC׵׃ְ73הכז׿׌׹ֲ