ゲームプラットフォームとしてのWeb。現在と未来

清水智公 (Mozilla Tech Speaker)

Unite2017 Tokyo

Unite2017 Tokyo

Unite2017 Tokyo

Unite2017 Tokyo

•

•

•

•

* Unity5.6.0f3で確認

Unite2017 Tokyo

* Unity5.6.0f3で確認

Unite2017 Tokyo

•

•

•

•

•

•

Unite2017 Tokyo

glob 役割

*.wasm.*.unityweb WebAssembly出力されたプログラム

*.asm.*.unitywebasm.js出力されたプログラム

（フォールバック用）

webgl.data.unityweb アセット

webgl.json ローダに渡すパラメータ

UnityLoader.jsプログラムのロード、メモリの初期化、

ファイルシステムの提供、外部シンボルの設定、etc

Unite2017 Tokyo

•

•

•

* Unity5.6.0f3で確認

Unite2017 Tokyo

•

•

•

•

•

•

•

Unite2017 Tokyo

•

•

•

•

Unite2017 Tokyo

Firefox52でMVPを サポート

Chrome57でMVPを サポート

In development https://webkit.org/status/#specification-webassembly

Under development https://blogs.windows.com/msedgedev/2016/03/15/previewing-webassembly-experiments

Unite2017 Tokyo

•

•

•

•

•

Unite2017 Tokyo

セクションの種類 内容

Type Signatures

Code Function bodies

Import List of imports

Export Exported function IDs

Data Constants

Table Tables (e.g function tables)

Start start function

Unite2017 Tokyo

Compile

Unite2017 Tokyo

Unite2017 Tokyo

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

Unite2017 Tokyo

asm.js

WASM

ダウンロード デコード 構文解析 コンパイル 実行

ダウンロード デコード コンパイル 実行

Unite2017 Tokyo

Haas, A., Rossberg, A., Schuff, D., Titzer, B., Gohman, D., Wagner, L., Zakai, A., Bastien, J., Holman, M., Mozilla, G., n.d. Bringing the Web up to Speed with WebAssembly.

Unite2017 Tokyo

•

•

•

•

Unite2017 Tokyo

After the Flood (https://www.youtube.com/watch?v=TT7ugKuUMv0)

Unite2017 Tokyo

• Many sized texture formats: Integer/float textures • 3D textures, 2D texture arrays • Immutable textures • Full non-power-of-two texture support • Instanced drawing*

* WebGLの拡張機能としても利用可能

https://docs.google.com/presentation/d/11-mTDNmSJzJnRVGu9Vu6AUzOt34yV3PO7oqw4E5wc2o/edit#slide=id.gd15060520_1_20

Unite2017 Tokyo

•

•

•

•

•

•

•

•

•

https://docs.google.com/presentation/d/11-mTDNmSJzJnRVGu9Vu6AUzOt34yV3PO7oqw4E5wc2o/edit#slide=id.gd15060520_1_20

* WebGLの拡張機能としても利用可能

Unite2017 Tokyo

Instanced geometry drawing

Unite2017 Tokyo

Firefox51でサポート

Chrome56 / 58で サポート

In development https://webkit.org/status/#specification-webassembly

Under construction https://blogs.windows.com/msedgedev/2016/03/15/previewing-webassembly-experiments

Unite2017 Tokyo

WebGLの普及率 WebGL2の普及率

http://webglstats.com/ の2017/05/04のデータより

Unite2017 Tokyo

https://metrics.mozilla.com/firefox-hardware-report/

Unite2017 Tokyo

C# IL C++WASM

+ JS

LLVM ILIL2CPP Clang BinaryenMono

Unite2017 Tokyo

C# IL C++WASM

+ JS

LLVM ILIL2CPP Clang BinaryenMono

Unite2017 Tokyo

•

•

•

AnimationFrame AnimationFrame AnimationFrameUI Event Event UI

Unite2017 Tokyo

•

•

•

•

•

•

Unite2017 Tokyo

Unite2017 Tokyo

•

Unite2017 Tokyo

•

•

•

•

•

Unite2017 Tokyo

ブラウザの使用するメモリ：32bitの環境だと最大2G

JavaScript VMに割り当てられたメモリ

Unity用のメモリ

データ スタック ヒープ

Unite2017 Tokyo

ブラウザの使用するメモリ：32bitの環境だと最大2G

JavaScript VMに割り当てられたメモリ

Unity用のメモリ

データ スタック ヒープ

Unite2017 Tokyo

ブラウザの使用するメモリ：32bitの環境だと最大2G

JavaScript VMに割り当てられたメモリ

Unity用のメモリ

データ スタック ヒープ

Unite2017 Tokyo

•

•

ブラウザの使用するメモリ：32bitの環境だと最大2G

JavaScript VMに割り当てられたメモリUnity用のメモリ

データ スタック ヒープ

Unite2017 Tokyo

ブラウザの使用するメモリ：32bitの環境だと最大2G

JavaScript VMに割り当てられたメモリ

JSのオブジェクト

DOM Unity用のメモリ (ArrayBuffer)

仮想ファイルシステムWASMのコード

コンパイルされたWASMのコード

Unite2017 Tokyo

•

•

•

•

Unite2017 Tokyo

ブラウザの使用するメモリ：32bitの環境だと最大2G

JavaScript VMに割り当てられたメモリ

JSのオブジェクト

DOM Unity用のメモリ (ArrayBuffer)

仮想ファイルシステムWASMのコード

コンパイルされたWASMのコード

Unite2017 Tokyo

Unite2017 Tokyo

• ブラウザの使用するメモリ：32bitの環境だと最大2G

JavaScript VMに割り当てられたメモリ

JSのオブジェクト

DOM Unity用のメモリ (ArrayBuffer)

仮想ファイルシステムWASMのコード

コンパイルされたWASMのコード

Unite2017 Tokyo

Unite2017 Tokyo

名前 値

/idbfs/readme.txt {"timestamp":"2017-02-02T08:50:56.765", mode: 33206, contents: {...}}

/idbfs/sub/hello.c {"timestamp":"2017-02-02T08:50:56.765", mode: 33206, contents: {...}}

/idbfs/main.c {"timestamp":"2017-02-02T08:50:56.765", mode: 33206, contents: {...}}

/idbfs/sub/log.c {"timestamp":"2017-02-02T08:50:56.765", mode: 33206, contents: {...}}

readme.txt

sub

/ hello.c

log.c

Unite2017 Tokyo

Main thread Worker

メモリ空間として利用メモリ空間として利用

Unite2017 Tokyo

AudioContext

Source

Source

Effect Effect Destination

Effect

Unite2017 Tokyo

•

•

•

•

•

https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers より引用

Unite2017 Tokyo

•

•

•

•

•

https://developers.google.com/web/fundamentals/discovery-and-monetization/payment-request/?hl=ja より引用

Unite2017 Tokyo

Unite2017 Tokyo

Unite2017 Tokyo

https://html5experts.jp/chikoski/22523/

Unite2017 Tokyo

https://html5jgame.connpass.com/

https://emsn.connpass.com/https://webaudiotokyo.connpass.com/

https://html5j-webplat.connpass.com/