Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
ゲームプラットフォームとしてのWeb。
現在と未来
清水智公(MozillaTechSpeaker)
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.*.unityweb
asm.js出力されたプログラム
(フォールバック用)
webgl.data.un...
Unite2017
Tokyo
• 

• 

• 

* Unity5.6.0f3で確認
Unite2017
Tokyo
•
•
•
•
•
•
•
Unite2017
Tokyo
•
•
•
•
Unite2017
Tokyo
Firefox52でMVPを
サポート
Chrome57でMVPを
サポート
In development
https://webkit.org/status/#specification-webassembly...
Unite2017
Tokyo
•
•
• 

• 

•
Unite2017
Tokyo
セクションの種類 内容
Type Signatures
Code Function bodies
Import List of imports
Export Exported function IDs
Data ...
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....
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...
Unite2017
Tokyo
•
•
•
•
•
•
•
•
•
https://docs.google.com/presentation/d/11-mTDNmSJzJnRVGu9Vu6AUzOt34yV3PO7oqw4E5wc2o/edit...
Unite2017
Tokyo
Instanced geometry drawing
Unite2017
Tokyo
Firefox51でサポート
Chrome56 / 58で
サポート
In development
https://webkit.org/status/#specification-webassembly
Und...
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 IL
IL2CPP Clang BinaryenMono
Unite2017
Tokyo
C# IL C++
WASM
+
JS
LLVM IL
IL2CPP 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...
Unite2017
Tokyo
•
•
•
•
Unite2017
Tokyo
ブラウザの使用するメモリ:32bitの環境だと最大2G
JavaScript VMに割り当てられたメモリ
JSのオブジェクト
DOM Unity用のメモリ (ArrayBuffer)
仮想ファイルシステムWASM...
Unite2017
Tokyo
Unite2017
Tokyo
• ブラウザの使用するメモリ:32bitの環境だと最大2G
JavaScript VMに割り当てられたメモリ
JSのオブジェクト
DOM Unity用のメモリ (ArrayBuffer)
仮想ファイルシステムWA...
Unite2017
Tokyo
Unite2017
Tokyo
名前 値
/idbfs/readme.txt {"timestamp":"2017-02-02T08:50:56.765", mode: 33206, contents: {...}}
/idbfs/sub/he...
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://htm...
【Unite 2017 Tokyo】WebGL:ゲームプラットフォームとしてのWebと現在と未来
【Unite 2017 Tokyo】WebGL:ゲームプラットフォームとしてのWebと現在と未来
【Unite 2017 Tokyo】WebGL:ゲームプラットフォームとしてのWebと現在と未来
【Unite 2017 Tokyo】WebGL:ゲームプラットフォームとしてのWebと現在と未来
【Unite 2017 Tokyo】WebGL:ゲームプラットフォームとしてのWebと現在と未来
【Unite 2017 Tokyo】WebGL:ゲームプラットフォームとしてのWebと現在と未来
Upcoming SlideShare
Loading in …5
×

【Unite 2017 Tokyo】WebGL:ゲームプラットフォームとしてのWebと現在と未来

4,469 views

Published on

講演者:清水 智公(Mozilla)

こんな人におすすめ
・Webをターゲットとしたゲーム開発をされている方
・ゲームのWebへの展開を検討されている方

受講者が得られる知見
・ゲームに関するWeb技術に対する概要
・WebAssemblyについて
・WebGL出力を使うときに気をつけるべき事柄

Published in: Technology
  • Be the first to comment

【Unite 2017 Tokyo】WebGL:ゲームプラットフォームとしてのWebと現在と未来

  1. 1. ゲームプラットフォームとしてのWeb。 現在と未来 清水智公(MozillaTechSpeaker)
  2. 2. Unite2017 Tokyo
  3. 3. Unite2017 Tokyo
  4. 4. Unite2017 Tokyo
  5. 5. Unite2017 Tokyo • • • • * Unity5.6.0f3で確認
  6. 6. Unite2017 Tokyo * Unity5.6.0f3で確認
  7. 7. Unite2017 Tokyo • • • • • •
  8. 8. Unite2017 Tokyo glob 役割 *.wasm.*.unityweb WebAssembly出力されたプログラム *.asm.*.unityweb asm.js出力されたプログラム (フォールバック用) webgl.data.unityweb アセット webgl.json ローダに渡すパラメータ UnityLoader.js プログラムのロード、メモリの初期化、 ファイルシステムの提供、外部シンボルの設定、etc
  9. 9. Unite2017 Tokyo • 
 • 
 • 
 * Unity5.6.0f3で確認
  10. 10. Unite2017 Tokyo • • • • • • •
  11. 11. Unite2017 Tokyo • • • •
  12. 12. 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
  13. 13. Unite2017 Tokyo • • • 
 • 
 •
  14. 14. 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
  15. 15. Unite2017 Tokyo Compile
  16. 16. Unite2017 Tokyo
  17. 17. Unite2017 Tokyo WebAssembly Explorer (http://mbebenita.github.io/WasmExplorer/)
  18. 18. Unite2017 Tokyo asm.js WASM ダウンロード デコード 構文解析 コンパイル 実行 ダウンロード デコード コンパイル 実行
  19. 19. 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.
  20. 20. Unite2017 Tokyo • • • •
  21. 21. Unite2017 Tokyo After the Flood (https://www.youtube.com/watch?v=TT7ugKuUMv0)
  22. 22. 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
  23. 23. Unite2017 Tokyo • • • • • • • • • https://docs.google.com/presentation/d/11-mTDNmSJzJnRVGu9Vu6AUzOt34yV3PO7oqw4E5wc2o/edit#slide=id.gd15060520_1_20 * WebGLの拡張機能としても利用可能
  24. 24. Unite2017 Tokyo Instanced geometry drawing
  25. 25. 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
  26. 26. Unite2017 Tokyo WebGLの普及率 WebGL2の普及率 http://webglstats.com/ の2017/05/04のデータより
  27. 27. Unite2017 Tokyo https://metrics.mozilla.com/firefox-hardware-report/
  28. 28. Unite2017 Tokyo C# IL C++ WASM + JS LLVM IL IL2CPP Clang BinaryenMono
  29. 29. Unite2017 Tokyo C# IL C++ WASM + JS LLVM IL IL2CPP Clang BinaryenMono
  30. 30. Unite2017 Tokyo • • • AnimationFrame AnimationFrame AnimationFrameUI Event Event UI
  31. 31. Unite2017 Tokyo • • • • • •
  32. 32. Unite2017 Tokyo
  33. 33. Unite2017 Tokyo •
  34. 34. Unite2017 Tokyo • • • • •
  35. 35. Unite2017 Tokyo ブラウザの使用するメモリ:32bitの環境だと最大2G JavaScript VMに割り当てられたメモリ Unity用のメモリ データ スタック ヒープ
  36. 36. Unite2017 Tokyo ブラウザの使用するメモリ:32bitの環境だと最大2G JavaScript VMに割り当てられたメモリ Unity用のメモリ データ スタック ヒープ
  37. 37. Unite2017 Tokyo ブラウザの使用するメモリ:32bitの環境だと最大2G JavaScript VMに割り当てられたメモリ Unity用のメモリ データ スタック ヒープ
  38. 38. Unite2017 Tokyo • • ブラウザの使用するメモリ:32bitの環境だと最大2G JavaScript VMに割り当てられたメモリ Unity用のメモリ データ スタック ヒープ
  39. 39. Unite2017 Tokyo ブラウザの使用するメモリ:32bitの環境だと最大2G JavaScript VMに割り当てられたメモリ JSのオブジェクト DOM Unity用のメモリ (ArrayBuffer) 仮想ファイルシステムWASMのコード コンパイルされたWASMのコード
  40. 40. Unite2017 Tokyo • • • •
  41. 41. Unite2017 Tokyo ブラウザの使用するメモリ:32bitの環境だと最大2G JavaScript VMに割り当てられたメモリ JSのオブジェクト DOM Unity用のメモリ (ArrayBuffer) 仮想ファイルシステムWASMのコード コンパイルされたWASMのコード
  42. 42. Unite2017 Tokyo
  43. 43. Unite2017 Tokyo • ブラウザの使用するメモリ:32bitの環境だと最大2G JavaScript VMに割り当てられたメモリ JSのオブジェクト DOM Unity用のメモリ (ArrayBuffer) 仮想ファイルシステムWASMのコード コンパイルされたWASMのコード
  44. 44. Unite2017 Tokyo
  45. 45. 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
  46. 46. Unite2017 Tokyo Main thread Worker メモリ空間として利用メモリ空間として利用
  47. 47. Unite2017 Tokyo 
 AudioContext Source Source Effect Effect Destination Effect
  48. 48. Unite2017 Tokyo • • • • • https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers より引用
  49. 49. Unite2017 Tokyo • • • • • https://developers.google.com/web/fundamentals/discovery-and-monetization/payment-request/?hl=ja より引用
  50. 50. Unite2017 Tokyo
  51. 51. Unite2017 Tokyo
  52. 52. Unite2017 Tokyo https://html5experts.jp/chikoski/22523/
  53. 53. Unite2017 Tokyo https://html5jgame.connpass.com/ https://emsn.connpass.com/https://webaudiotokyo.connpass.com/ https://html5j-webplat.connpass.com/

×