20161123-webvr

Transcript

1. WebVR と、それを支える技術 Mozilla Japan N.Shimizu (nshimizu@mozilla-japan.org) WebVR 文化祭＠dots. (2016/11/23)
2. /
   4IJNJ[V
   
   
   !DIJLPTLJ ˖ ⛆加㖩ח֮׷8FC׾⡲׷⠓爡ד⫴ְגְתׅ
   ˖ 'JSFGPY
   
   'JSFGPY
   GPS
   J04
   
   %FW5PPMT
   ˖ 3VTU
   
   BTNKT
   
   8FC"TTFNCMZ
   
   8FC73
   
   (BNJOH
   ˖ فؚٗٓىؚٝ鎉铂ה؟حؕ٦鋅׷ךָ㥨ֹדׅ
   ˖ 㘗ך䓼ְ鎉铂ָ㥨ֹדׅ
   ˖ IUUQTTQFBLFSEFDLDPNDIJLPTLJ
5. Open Source Project
6. 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/)
7. To ensure the Internet is a global public resource, open and accessible to all. Mozilla Mission(https://www.mozilla.org/en-US/mission/)
8. 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
9. IUUQTEFWFMPQFSNP[JMMBPSHKBEPDT8FC"1*8FC73@"1*
10. IUUQTXXXZPVUVCFDPNZUCSBOEKBVTJOHMPHPIUNM
13. VRコンテンツに対する要求 プラットフォームへの要求 没入感 高リフレッシュレート、低遅延性、ヘッドトラッキング、 入力インタフェースへの対応 臨場感 3Dグラフィックス、立体音響 開始までのハードルの低さ アセットの非同期ロード、キャッシュコントロール、フットプリントの小ささ
14. プラットフォームへの要求 Web技術 高リフレッシュレート、ヘッドトラッキング WebVR API 低遅延性、小フットプリント asm.js / WebAssembly / Web Workers / SharedArrayBuffer / Atomics 入力インタフェース Gamepad API 3D表現 WebGL / WebGL2 / Web Audio API キャッシュコントロール Service Worker / IndexedDB / IndexedDB2
15. IUUQTEFWFMPQFSNP[JMMBPSHKBEPDT8FC"1*8FC73@"1*
16. DPOTU
    DBOWBT
    
    EPDVNFOURVFSZ4FMFDUPS DBOWBT 
    OBWJHBUPSHFU73%JTQMBZT
    
    
    
    UIFO EJTQMBZ-JTU
    
    \
    
    
    
    
    
    
    JG EJTQMBZ-JTUMFOHUI
    ]]
    EJTQMBZ-JTU<>JT1SFTFOUJOH \
    
    
    
    
    
    
    
    
    
    SFUVSO
    1SPNJTFSFKFDU EJTQMBZ-JTU 
    
    
    
    
    
    
    ^
    
    
    
    
    
    
    SFUVSO
    1SPNJTFSFTPMWF EJTQMBZ-JTU<>
    
    
    
    
    ^
    
    
    
    UIFO EJTQMBZ
    
    EJTQMBZSFRVFTU1SFTFOU \TPVSDF
    DBOWT^
    
    
    
    UIFO EJTQMBZ
    
    FOUFS73 EJTQMBZ  HMDの取得
17. GVODUJPO
    FOUFS73 EJTQMBZ \
    
    
    DPOTU
    VQEBUF
    
    GVODUJPO \
    
    
    
    
    
    EJTQMBZSFRVFTU"OJNBUJPO'SBNF VQEBUF 
    
    
    
    
    
    EJTQMBZHFU'SBNF%BUB GSBNF%BUB 
    
    
    
    
    
    
    䲽歗
    
    
    
    
    
    EJTQMBZTVCNJU%BUB 
    
    
    ^
    
    
    EJTQMBZSFRVFTU"OJNBUJPO'SBNF VQEBUF 
    ^ アニメーションループ
18. EJTQMBZSFTFU1PTF 
    
    植㖈⡘縧׾⾱挿ח鏣㹀
    DPOTU
    QPTF
    
    EJTQMBZHFU1PTF 
    
    ⡘縧הぢֹךر٦ة׾䭯אؔـآؙؑز׾《䖤
    DPOTU
    QPTJUJPO
    
    QPTFQPTJUJPO
    
    植㖈ך⡘縧׾《䖤
    DPOTU
    PSJFOUBUJPO
    
    QPTFPSJFOUBUJPO
    
    植㖈ךぢֹ׾《䖤
    DPOTU
    Y
    
    QPTJUJPO<>
    DPOTU
    PSJFOUBUJPO9
    
    PSJFOUBUJPO<>
    HMDの位置と向きの取得
19. IUUQXXXIUNMSPDLTDPNFOUVUPSJBMTEPPEMFTHBNFQBEHBNFQBEUFTUFSUFTUFSIUNM
20. XJOEPXBEE&WFOU-JTUFOFS HBNFQBEDPOOFDUFE
    GVODUJPO F
    \
    
    
    DPOTPMFMPH DPOOFDUFE
    BU
    JOEFY
    E
    T
    E
    CVUUPOT
    E
    BYFT
    
    
    
    
    FHBNFQBEJOEFY
    FHBNFQBEJE
    
    
    
    
    FHBNFQBECVUUPOTMFOHUI
    FHBNFQBEBYFTMFOHUI 
    ^ 
    XJOEPXBEE&WFOU-JTUFOFS HBNFQBEEJTDPOOFDUFE
    GVODUJPO F
    \
    
    
    DPOTPMFMPH (BNFQBE
    EJTDPOOFDUFE
    GSPN
    JOEFY
    E
    T
    
    
    
    
    FHBNFQBEJOEFY
    FHBNFQBEJE 
    ^  ゲームパッドの接続と取り外しはイベントで検知できます
21. GVODUJPO
    QPMM(BNFQBET
    \
    
    
    WBS
    HBNFQBET
    
    OBWJHBUPSHFU(BNFQBET
    ]]
    <>
    
    
    GPS
    WBS
    J
    
    
    J
    
    HBNFQBETMFOHUI
    J
    \
    
    
    
    
    WBS
    HQ
    
    HBNFQBET<J>
    
    
    
    
    JG
    HQ
    \
    
    
    
    
    
    
    HBNFQBE*OGPJOOFS)5.-
    
    DPOOFDUFE
    BU
    JOEFY
    
    
    HQJOEFY
    
    
    
    
    HQJE
    
    
    
    
    
    
    
    
    
    
    *U
    IBT
    
    
    HQCVUUPOTMFOHUI
    
    
    
    
    
    
    
    
    
    
    
    CVUUPOT
    BOE
    
    
    HQBYFTMFOHUI
    
    
    BYFT
    
    
    
    
    
    
    HBNF-PPQ 
    
    
    
    
    
    
    DMFBS*OUFSWBM JOUFSWBM 
    
    
    
    
    ^
    
    
    ^
    ^ ゲームパッドの状態は、1ショットで取得します
22. ߏจղੳ μ΢ϯϩʔυ ίϯύΠϧ ࣮ߦ ߏจղੳ μ΢ϯϩʔυ ίϯύΠϧ ࣮ߦ asm.js JavaScript
23. Bytes asm.js AST ߏจղੳ ݕূ σίʔυ WASM MIR Execut able ग़ྗ ग़ྗ JS 実行 Byte code AST Baseline MIR Execut able 実行と プロファイル 実行 Bail コンパイル Bytes σίʔυ ߏจղੳ ग़ྗ ग़ྗ ग़ྗ asm.js JavaScript
24. ߏจղੳ μ΢ϯϩʔυ ίϯύΠϧ ࣮ߦ asm.js ߏจղੳ μ΢ϯϩʔυ ίϯύΠϧ ࣮ߦ WASM
25. Bytes asm.js AST ߏจղੳ ݕূ σίʔυ Bytes WASM MIR Execut able ݕূ ग़ྗ ग़ྗ asm.js WASM
26. GVODUJPO
    4US6UJMT TUEMJC
    G
    IFBQ \
    
    
    VTF
    BTN
    
    
    WBS
    CVGGFS
    
    
    
    
    
    
    OFX
    TUEMJC6JOU"SSBZ IFBQ 
    
    
    WBS
    MPH
    
    GMPH
    
    
    GVODUJPO
    TUSMFO \
    
    
    
    
    WBS
    J
    
    
    
    
    
    
    WBS
    MFOHUI
    
    
    
    
    
    
    XIJMF CVGGFS<J
    
    
    
    >
    ]
    
    
    
    
    
    
    
    
    
    
    
    
    
    
     \
    
    
    
    
    
    
    MPH J
    ]
    
    
     
    
    
    
    
    
    
    MPH CVGGFS<J
    
    
    
    >
    ]
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    J
    
    J
    
    
    ]
     
    
    
    
    
    
    
    MFOHUI
    
    MFOHUI
    
    
    ]
    
    
    
    
    
    ^
    
    
    
    
    SFUVSO
    MFOHUI
    ]
    
    
    
    ^
    
    
    SFUVSO
    \
    
    
    
    
    TUSMFO
    TUSMFO
    
    
    ^
    ^
27. ΞϓϦ ѹॖͳ͠ 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
29. 厣加귓㶨
    괏讒
    ֹאיׁ׿ד׮׻ַ׷--7._؝ٝػ؎ٓ׾荈⡲ׅ׷׋׭ךؖ؎سـحؙ
    ؎ٝفٖأآٍػٝ
    
    *4#/
    
    
30. コマンドライン 
    FNDD
    P
    IFMMPKT
    IFMMPD
    
    OPEF
    IFMMPKT
    IFMMP
    XPSME
    
    FNDD
    P
    IFMMPIUNM
    IFMMPD
    
    PQFO
    IFMMPIUNM -o オプションで html / js へ出力
31. WebAssembly Explorer: http://mbebenita.github.io/WasmExplorer/
32. メインスレッド • JavaScriptのプログラムの時間軸 • メインスレッドの持っている時間を、すべての処理で分け合っています • ブラウザのUI処理や、イベントの受付、通信なども、このスレッドで処理しています functionA functionB functionC
33. メインスレッドをブロックしなくても、重たい処理を行えるように • Web Workers を利用することで、メインスレッド以外にスレッドを作成できます • 作成したスレッドで重たい処理をすれば、メインスレッドを占有することはありません • 大きなArrayBufferは所有権を移動させることで、効率よく転送できます fetch decode doSomething task QPTU.FTTBHF QPTU.FTTBHF task task task task task
34. 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
35. 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
36. DPOTU
    IFBQ
    
    OFX
    6*OU"SSBZ CVGGFS 
    "UPNJDTDPNQBSF&YIBOHF IFBQ
    
    
      DPOTU
    IFBQ
    
    OFX
    6*OU"SSBZ CVGGFS 
    IFBQ<>
    
    IFBQ<>
    
    
    
    
    
     Atomicsあり Atomicsなし 共有メモリには、Atomicsオブジェクトの提供する不可分操作を利用してアクセス します
37. WebGL / WebGL2 • 3Dグラフックスを扱うためのAPIで、GPUを利用できるのが特徴 • パイプライン処理 • GLSLで記述された「シェーダー」と呼ばれるプログラムを実行できる • OpenGL ES2 相当(WebGL) / OpenGL ES3 相当(WebGL2） 頂点座標の計算 プリミティブ構築 ラスタライズ ピクセル単位の処理 テスト、ブレンディング
38. JS DPOTU
    DBOWBT
    
    EPDVNFOURVFSZ4FMFDUPS DBOWBT 
    DPOTU
    HM
    
    DBOWBTHFU$POUFYU XFCHM 
    DPOTU
    FMN
    
    EPDVNFOURVFSZ4FMFDUPS WFSUFYTIBEFS 
    DPOTU
    TIBEFS
    
    HMDSFBUF4IBEFS 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 
    ^ シェーダーのコンパイル
39. • 音声の生成や、イフェクト、周波数分析を行うためのAPI • モジュラーシンセを念頭に置いたAPI設計 • オーディオコンテキスト内部に、オーディオノードを利用してオーディオグラフを定義します • オーディオグラフで表現されるデータフローに従って、音声が処理されます Web Audio API：音声処理を行うためのAPI IUUQTEFWFMPQFSNP[JMMBPSHKBEPDT8FC"1*8FC@"VEJP@"1*
40. DPOTU
    BVEJP
    
    EPDVNFOURVFSZ4FMFDUPS BVEJP 
    DPOTU
    BD
    
    OFX
    "VEJP$POUFYU 
    DPOTU
    TSD
    
    OFX
    .FEJB&MFNFOU4PVSDF/PEF BD
    \NFEJB&MFNFOU
    BVEJP^ 
    DPOTU
    HBJO
    
    OFX
    (BJO/PEF BD
    \HBJO
    ^ 
    DPOTU
    QBOOFS
    
    OFX
    4UFSFP1BOOFS/PEF BD 
    DPOTU
    MUFS
    
    OFX
    #JRVBE'JMUFS/PEF BD
    \GSFRVFODZ
    ^ 
    TSDDPOOFDU HBJO DPOOFDU QBOOFS 

    
    
    DPOOFDU MUFS DPOOFDU BDEFTUJOBUJPO 
    TSD HBJO QBOOFS EFTUJOB UJPO MUFS
41. 立体音響：AudioListenerとPannerNode • 左右のパンニングだけでなく、音源と聞き手の角度や距離を加味して聞こえ方を調整できます • 音源の位置と向きをPannerNodeで、聞き手の位置と向きをAudioListnerで表現します • 利用する座標系は右手系の直行座標です 9 : ;
42. ゲームエンジンを利用する UnityのWebGL出力機能を利用する Webベースのオーサリングツールを使う Vizor.ioを利用する JSで書く three.js を利用する フレームワークを利用する A-Frameを利用する
43. BTDFOF
    
    
    BTQIFSF
    QPTJUJPO
    
    
    SBEJVT
    DPMPS&'%&BTQIFSF
    
    
    BCPY
    QPTJUJPO
    
    
    SPUBUJPO
    
    
    XJEUI
    IFJHIU
    EFQUI
    
    DPMPS$$%BCPY
    
    
    BDZMJOEFS
    QPTJUJPO
    
    
    SBEJVT
    IFJHIU
    DPMPS''$%BDZMJOEFS
    
    
    BQMBOF
    SPUBUJPO
    
    
    XJEUI
    IFJHIU
    DPMPS#$"BQMBOF
    
    
    BTLZ
    DPMPS&$&$&$BTLZ
    BTDFOF A-Frame：マークアップでVRコンテンツ
45. Visor.io：ウェブベースのWebVRオーサリングツール
46. 8FC׵׃ְ73הכז׿׌׹ֲ