Successfully reported this slideshow.
Your SlideShare is downloading. ×

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

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad

Check these out next

1 of 59 Ad

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

Download to read offline

講演者:清水 智公(Mozilla)

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

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

講演者:清水 智公(Mozilla)

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

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

Advertisement
Advertisement

More Related Content

Slideshows for you (19)

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

Advertisement

More from Unite2017Tokyo (20)

Recently uploaded (20)

Advertisement

【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/

×