講演者：清水 智公(Mozilla) こんな人におすすめ ・Webをターゲットとしたゲーム開発をされている方 ・ゲームのWebへの展開を検討されている方 受講者が得られる知見 ・ゲームに関するWeb技術に対する概要 ・WebAssemblyについて ・WebGL出力を使うときに気をつけるべき事柄

2. ゲームプラットフォームとしてのWeb。
現在と未来
清水智公(MozillaTechSpeaker)

3. Unite2017
Tokyo

4. Unite2017
Tokyo

5. Unite2017
Tokyo

7. Unite2017
Tokyo
•
•
•
•
* Unity5.6.0f3で確認

8. Unite2017
Tokyo
* Unity5.6.0f3で確認

9. Unite2017
Tokyo
•
•
•
•
•
•

10. Unite2017
Tokyo
glob 役割
*.wasm.*.unityweb WebAssembly出力されたプログラム
*.asm.*.unityweb
asm.js出力されたプログラム
（フォールバック用）
webgl.data.unityweb アセット
webgl.json ローダに渡すパラメータ
UnityLoader.js
プログラムのロード、メモリの初期化、
ファイルシステムの提供、外部シンボルの設定、etc

11. Unite2017
Tokyo
•
•
•
* Unity5.6.0f3で確認

13. Unite2017
Tokyo
•
•
•
•
•
•
•

14. Unite2017
Tokyo
•
•
•
•

15. 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

16. Unite2017
Tokyo
•
•
•
•
•

17. 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

18. Unite2017
Tokyo
Compile

19. Unite2017
Tokyo

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

21. Unite2017
Tokyo
asm.js
WASM
ダウンロード デコード 構文解析 コンパイル 実行
ダウンロード デコード コンパイル 実行

22. 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.

23. Unite2017
Tokyo
•
•
•
•

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

25. 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

26. Unite2017
Tokyo
•
•
•
•
•
•
•
•
•
https://docs.google.com/presentation/d/11-mTDNmSJzJnRVGu9Vu6AUzOt34yV3PO7oqw4E5wc2o/edit#slide=id.gd15060520_1_20
* WebGLの拡張機能としても利用可能

27. Unite2017
Tokyo
Instanced geometry drawing

28. 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

29. Unite2017
Tokyo
WebGLの普及率 WebGL2の普及率
http://webglstats.com/ の2017/05/04のデータより

30. Unite2017
Tokyo
https://metrics.mozilla.com/firefox-hardware-report/

32. Unite2017
Tokyo
C# IL C++
WASM
+
JS
LLVM IL
IL2CPP Clang BinaryenMono

33. Unite2017
Tokyo
C# IL C++
WASM
+
JS
LLVM IL
IL2CPP Clang BinaryenMono

34. Unite2017
Tokyo
•
•
•
AnimationFrame AnimationFrame AnimationFrameUI Event Event UI

35. Unite2017
Tokyo
•
•
•
•
•
•

36. Unite2017
Tokyo

37. Unite2017
Tokyo
•

38. Unite2017
Tokyo
•
•
•
•
•

39. Unite2017
Tokyo
ブラウザの使用するメモリ：32bitの環境だと最大2G
JavaScript VMに割り当てられたメモリ
Unity用のメモリ
データ スタック ヒープ

40. Unite2017
Tokyo
ブラウザの使用するメモリ：32bitの環境だと最大2G
JavaScript VMに割り当てられたメモリ
Unity用のメモリ
データ スタック ヒープ

41. Unite2017
Tokyo
ブラウザの使用するメモリ：32bitの環境だと最大2G
JavaScript VMに割り当てられたメモリ
Unity用のメモリ
データ スタック ヒープ

42. Unite2017
Tokyo
•
•
ブラウザの使用するメモリ：32bitの環境だと最大2G
JavaScript VMに割り当てられたメモリ
Unity用のメモリ
データ スタック ヒープ

43. Unite2017
Tokyo
ブラウザの使用するメモリ：32bitの環境だと最大2G
JavaScript VMに割り当てられたメモリ
JSのオブジェクト
DOM Unity用のメモリ (ArrayBuffer)
仮想ファイルシステムWASMのコード
コンパイルされたWASMのコード

44. Unite2017
Tokyo
•
•
•
•

45. Unite2017
Tokyo
ブラウザの使用するメモリ：32bitの環境だと最大2G
JavaScript VMに割り当てられたメモリ
JSのオブジェクト
DOM Unity用のメモリ (ArrayBuffer)
仮想ファイルシステムWASMのコード
コンパイルされたWASMのコード

46. Unite2017
Tokyo

47. Unite2017
Tokyo
• ブラウザの使用するメモリ：32bitの環境だと最大2G
JavaScript VMに割り当てられたメモリ
JSのオブジェクト
DOM Unity用のメモリ (ArrayBuffer)
仮想ファイルシステムWASMのコード
コンパイルされたWASMのコード

48. Unite2017
Tokyo

49. 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

51. Unite2017
Tokyo
Main thread Worker
メモリ空間として利用メモリ空間として利用

52. Unite2017
Tokyo
AudioContext
Source
Source
Effect Effect Destination
Effect

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

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

55. Unite2017
Tokyo

56. Unite2017
Tokyo

57. Unite2017
Tokyo
https://html5experts.jp/chikoski/22523/

58. Unite2017
Tokyo
https://html5jgame.connpass.com/
https://emsn.connpass.com/https://webaudiotokyo.connpass.com/
https://html5j-webplat.connpass.com/