20161123-webvr

00580f6c11851d2fff0b3e2f7392226b?s=47 N. Shimizu
November 25, 2016

 20161123-webvr

00580f6c11851d2fff0b3e2f7392226b?s=128

N. Shimizu

November 25, 2016
Tweet

Transcript

  1. 3.
  2. 4.
  3. 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/)
  4. 7.

    To ensure the Internet is a global public resource, open

    and accessible to all. Mozilla Mission(https://www.mozilla.org/en-US/mission/)
  5. 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
  6. 11.
  7. 12.
  8. 14.

    プラットフォームへの要求 Web技術 高リフレッシュレート、ヘッドトラッキング WebVR API 低遅延性、小フットプリント asm.js / WebAssembly /

    Web Workers / SharedArrayBuffer / Atomics 入力インタフェース Gamepad API 3D表現 WebGL / WebGL2 / Web Audio API キャッシュコントロール Service Worker / IndexedDB / IndexedDB2
  9. 16.

    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の取得
  10. 17.

    GVODUJPOFOUFS73 EJTQMBZ \ DPOTUVQEBUFGVODUJPO \ EJTQMBZSFRVFTU"OJNBUJPO'SBNF VQEBUF  EJTQMBZHFU'SBNF%BUB GSBNF%BUB

     䲽歗 EJTQMBZTVCNJU%BUB  ^ EJTQMBZSFRVFTU"OJNBUJPO'SBNF VQEBUF  ^ アニメーションループ
  11. 20.

    XJOEPXBEE&WFOU-JTUFOFS HBNFQBEDPOOFDUFE GVODUJPO F \ DPOTPMFMPH DPOOFDUFEBUJOEFYETECVUUPOT EBYFT  FHBNFQBEJOEFY

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

    GVODUJPOQPMM(BNFQBET \ WBSHBNFQBETOBWJHBUPSHFU(BNFQBET ]]<> GPS WBSJJHBNFQBETMFOHUIJ \ WBSHQHBNFQBET<J> JG HQ

    \ HBNFQBE*OGPJOOFS)5.-DPOOFDUFEBUJOEFY HQJOEFY  HQJE  *UIBT HQCVUUPOTMFOHUI  CVUUPOTBOE HQBYFTMFOHUI BYFT HBNF-PPQ  DMFBS*OUFSWBM JOUFSWBM  ^ ^ ^ ゲームパッドの状態は、1ショットで取得します
  13. 23.

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

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

    GVODUJPO4US6UJMT TUEMJC G IFBQ \ VTFBTN WBSCVGGFS OFXTUEMJC6JOU"SSBZ IFBQ 

    WBSMPHGMPH GVODUJPOTUSMFO \ WBSJ WBSMFOHUI XIJMF CVGGFS<J>]  \ MPH J]   MPH CVGGFS<J>]    J J  ]  MFOHUI MFOHUI  ] ^ SFUVSOMFOHUI] ^ SFUVSO\ TUSMFOTUSMFO ^ ^
  16. 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
  17. 28.
  18. 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
  19. 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
  20. 36.

    DPOTUIFBQOFX6*OU"SSBZ CVGGFS  "UPNJDTDPNQBSF&YIBOHF IFBQ     DPOTUIFBQOFX6*OU"SSBZ

    CVGGFS  IFBQ<>IFBQ<>  Atomicsあり Atomicsなし 共有メモリには、Atomicsオブジェクトの提供する不可分操作を利用してアクセス します
  21. 37.

    WebGL / WebGL2 • 3Dグラフックスを扱うためのAPIで、GPUを利用できるのが特徴 • パイプライン処理 • GLSLで記述された「シェーダー」と呼ばれるプログラムを実行できる •

    OpenGL ES2 相当(WebGL) / OpenGL ES3 相当(WebGL2) 頂点座標の計算 プリミティブ構築 ラスタライズ ピクセル単位の処理 テスト、ブレンディング
  22. 38.

    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  ^ シェーダーのコンパイル
  23. 40.

    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
  24. 44.