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

485 Views

June 07, 17

#platform #game #wed #unity #unity3d #ウェブ #ゲーム #プラットフォーム #unite 2017 tokyo #WebAssembly #Web Development #Game Platform #Future of Web #Unite2017 Tokyo

スライド概要

講演者：清水 智公(Mozilla)

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

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

講演動画：https://youtu.be/WKdxkxBWTHY

profile-image
スライド一覧

リアルタイム3Dコンテンツを制作・運用するための世界的にリードするプラットフォームである「Unity」の日本国内における販売、サポート、コミュニティ活動、研究開発、教育支援を行っています。ゲーム開発者からアーティスト、建築家、自動車デザイナー、映画製作者など、さまざまなクリエイターがUnityを使い想像力を発揮しています。

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

ダウンロード

ダウンロード(pdf - 13.14MB)

関連スライド

slide-thumbnail

UnityのVR開発環境の現状整理 2022
unity unitysync
user-img Unity Technologies Japan 152.7K
slide-thumbnail

UIもshaderで盛る！ 〜 shaderとanimationで作るリッチなUI演出
unity unitysync
user-img Unity Technologies Japan 112K
slide-thumbnail

オープンソース自動運転シミュレーター「AWSIM」のご紹介と実装事例
unity unitysync
user-img Unity Technologies Japan 80.5K
slide-thumbnail

トゥーンシェーダー応用編 ～楽して破綻のないアウトラインを目指して～
unity unitysync
user-img Unity Technologies Japan 74K
slide-thumbnail

モバイル向け大量描画テクニック
unity unitysync
user-img Unity Technologies Japan 68.8K
slide-thumbnail

【Unity道場 2月】シェーダを書けるプログラマになろう
gpu unity unity3d shader unity道場 unitydojo unity道場 2月~シェーダを書けるプログラマになろう~
user-img Unity Technologies Japan 44.4K
各ページのテキスト
1.

2.

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

3.

Unite2017 Tokyo

4.

Unite2017 Tokyo

5.

Unite2017 Tokyo

6.

8FC(-⳿⸂

7.

‫‪鼅䫛‬׾‪8FC(-‬חزح؜‪٦‬ةسٕؽ‬ ‫׷ׅٕ‪٦‬زأ‪؎ٝ‬׾ٕ‪ُ٦‬آٌ‪• 8FC(-‬‬ ‫ׅת׶זחֲ״׷ֹדسٕؽ‪ծ‬דהֿ‬ ‫‪ծ‬הע‪鼅‬׾‪• #VJME"OE3VO‬‬ ‫‪ծ‬׃⹛‪ָ饯‬غ‪٦‬؟‪)551‬דٕؕ‪• ٗ٦‬‬ ‫דؠؐٓـךزٕؓؿر׾آ‪٦‬لך׉ •‬ ‫ׅת׃‪邌爙‬‬ ‫‪* Unity5.6.0f3で確認‬‬ ‫‪Unite2017‬‬ ‫‪Tokyo‬‬

8.

8FC"TTFNCMZ‫⸂⳿ךפ‬  1MBZFS4FUUJOHT‫׾‬Ꟛֻ  1VCMJTIJOH4FUUJOHT‫׾‬Ꟛֻ  8FC"TTFNCMZ &YQFSJNFOUBM ‫ח‬ ‫׷׸Ⰵ׾ؙحؑث‬  ‫سٕؽ‬ * Unity5.6.0f3で確認 Unite2017 Tokyo

9.

⳿⸂ׁ‫تٕؓؿ׷׸‬ • #VJME⳿⸂ׁ‫يؚٓٗف׋׸‬ • ‫يؚٓٗف‬ • ،‫زحإ‬ • 5FNQMBUF%BUB • $44ծ،؎‫؝‬ٝծGBWJDPO • ‫غأؚٖٗف‬٦‫ך‬㹋鄲 Unite2017 Tokyo

10.

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

11.

‫"ؙح؍ؿؚٓ‬1*‫ך‬䭷㹀 • 1MBZFS4FUUJOHT‫ך‬ 0UIFS4FUUJOHT‫ח‬갪湡ָ֮‫ׅת׶‬ • "VUP(SBQIJDT"1*‫׾ؙحؑثח‬ Ⰵ‫ה׷׸‬㹋遤儗‫ח‬荈⹛鼅䫛ׁ‫ׅת׸‬ • ‫׾ؙحؑث‬㢩‫הׅ‬ծ 僇爙涸‫ח‬鼅䫛‫ׅתֹד‬ * Unity5.6.0f3で確認 Unite2017 Tokyo

12.

8FC‫ך‬植㖈

13.

‫ד♳ؠؐٓـ‬〳腉‫Ⳣז‬椚 • ‫؜‬٦‫سحػي‬٥‫ؗ‬٦‫ن‬٦‫س‬٥‫׷《׾⸂Ⰵךأؐو‬ • Ⰻ歗꬗邌爙 • 0QFO(-&4✼䳔‫ך‬%‫أؙح؍ؿؚٓ‬ • 갈㡮‫ؿ‬؋؎ٕ٥갈㡮‫ر‬٦‫ךة‬ꬊず劍ⱄ欰ծ瑞꟦갈갟 • ‫رךד♳ؠؐٓـ‬٦‫ة‬宕竲⻉ • NFTTBHFQBTTJOH‫Ⳣ⴨⚛׷״ח‬椚 • )551 4 鸐⥋ծ‫زح؛ا‬鸐⥋ծ11‫ر‬٦‫ة‬鸐⥋ Unite2017 Tokyo

14.

8FC"TTFNCMZ8FCぢֽ‫ؓؿٔش؎غך‬٦‫زحو‬ • 殛剅8"4. • 8$‫ؚٕ؍ذصُى؝ך‬٦‫דف‬陽锷 • IUUQTXXXXPSHDPNNVOJUZ XFCBTTFNCMZ • IUUQTXFCBTTFNCMZHJUIVCJP Unite2017 Tokyo

15.

Firefox52でMVPを サポート Under development Chrome57でMVPを サポート In development https://blogs.windows.com/msedgedev/2016/03/15/previewingwebassembly-experiments https://webkit.org/status/#specification-webassembly Unite2017 Tokyo

16.

‫‪8"4..71 .JOJNVN7JBCMF1SPEVDU‬‬ ‫‪㹀纏堣圓‬ךٕ‪ُ٦‬آٌ׋׃‪• ⴓ侔‬‬ ‫‪㹀纏‬ךأؙح؍ذ‪ٝ‬وإ׷״ח‪ٝ‬ءوؙحةأ➰‪• 㘗‬‬ ‫׋׃ה‪⵸䲿‬׾⸂⳿س‪٦‬؝ـ؍ذ؎ط׷״ח‪• Ⳣ椚禸‬‬ ‫‪䲿⣘‬ךزح‪٦‬وؓؿٔش؎غ‬ ‫׷׸ׁ‪ⵃ欽‬דؖحغرװٓ؎‪؋‬ؿٗف •‬ ‫‪䲿⣘‬ך‪邌植‬زأؗذ‬ ‫‪ְ鏣鎘‬ז׃ה‪⵸䲿‬׾ؠؐٓـ‪• 8FC‬‬ ‫‪Unite2017‬‬ ‫‪Tokyo‬‬

17.

8"4.ٌ‫ُآ‬٦ٕ‫ך‬圓鸡 セクションの種類 内容 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

18.

VOTJHOFEJOUDPVOUFS JOUJODSFNFOU SFUVSO ^ NPEVMF  NFNPSZ   EBUB JDPOTU ====  \  FYQPSUNFNPSZ NFNPSZ   FYQPSU@;JODSFNFOUW GVOD@;JODSFNFOUW DPVOUFS  GVOD@;JODSFNFOUW SFTVMUJ  Compile   MPDBMJ   JTUPSFPGGTFU JDPOTU   UFF@MPDBM  JBEE  JMPBEPGGTFU JDPOTU  JDPOTU  HFU@MPDBM   Unite2017 Tokyo

19.

IUUQTIBDLTNP[JMMBPSHXFCBTTFNCMZCSPXTFSQSFWJFX Unite2017 Tokyo

20.

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

21.

8"4.‫ך‬倯ָٗ٦‫ָس‬傍ְ ダウンロード デコード ダウンロード デコード 構文解析 コンパイル 実行 asm.js コンパイル 実行 WASM Unite2017 Tokyo

22.

8"4.‫➬כ‬圫ծBTNKT‫كכ‬ٝ‫ؓؿךت‬٦‫زحو‬ 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

23.

8FC(-(16،‫"ך׭׋ךأإؙ‬1* • ‫غךא‬٦‫ّآ‬ٝ • 8FC(-0QFO(-&4 • 8FC(-0QFO(-&4 • IUUQTXXXLISPOPTPSH SFHJTUSZXFCHMTQFDTMBUFTU խ Unite2017 Tokyo

24.

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

25.

8FC(-‫ך‬倜堣腉 https://docs.google.com/presentation/d/11-mTDNmSJzJnRVGu9Vu6AUzOt34yV3PO7oqw4E5wc2o/edit#slide=id.gd15060520_1_20 • Many sized texture formats: Integer/float textures • 3D textures, 2D texture arrays • Immutable textures • Full non-power-of-two texture support • Instanced drawing* * WebGLの拡張機能としても利用可能 Unite2017 Tokyo

26.

8FC(-‫ך‬倜堣腉‫ֹבא‬ https://docs.google.com/presentation/d/11-mTDNmSJzJnRVGu9Vu6AUzOt34yV3PO7oqw4E5wc2o/edit#slide=id.gd15060520_1_20 • .VMUJQMFSFOEFSUBSHFUT  • 5SBOTGPSNGFFECBDL • 5SVFJOUFHFSWFSUFYBUUSJCVUFT • .VMUJTBNQMFESFOEFSCVGGFST • .BOZTIBEJOHMBOHVBHFVQHSBEFT • UFYUVSFMFWFMPGEFUBJMTBNQMJOHDPOUSPM JNQPSUBOUGPSQIZTJDBMMZCBTFESFOEFSJOH  • VOJGPSNCMPDLT • *OPVUWBSJBCMFTJOTUFBEPGˑBUUSJCVUF˒ FUD • DPOUSPMPWFSMBZPVUJOUIFTIBEFS * WebGLの拡張機能としても利用可能 Unite2017 Tokyo

27.

Instanced geometry drawing Unite2017 Tokyo

28.

Firefox51でサポート Chrome56 / 58で サポート Under construction https://blogs.windows.com/msedgedev/2016/03/15/previewingwebassembly-experiments In development https://webkit.org/status/#specification-webassembly Unite2017 Tokyo

29.

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

30.

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

31.

8FC(-⳿⸂‫׷ׅ‬儗‫ך‬岣䠐挿

32.

8FC(-⳿⸂‫ך‬ٙ٦‫ٗؿؙ‬٦ C# Mono IL IL2CPP C++ Clang LLVM IL Binaryen WASM + JS Unite2017 Tokyo

33.

㢳ֻ‫ך‬堣腉‫כ‬+4‫ך‬ㄎ‫ד׃⳿ן‬㹋鄲ׁ‫ׅתְג׸‬ C# Mono IL IL2CPP C++ Clang LLVM IL Binaryen WASM + JS Unite2017 Tokyo

34.

‫ךؠؐٓـ‬䭯‫׷ג׏‬堣腉‫ֻתֲ׾‬⢪‫ְׁ׌ֻג׏‬ AnimationFrame UI Event AnimationFrame Event UI AnimationFrame • 8FC‫דؠؐٓـ‬㹋遤ׁ‫׷׸‬،‫ءכٔف‬ٝ‫ׅדسحٖإؚٔ‬ • 8FC8PSLFS‫׾‬⢪欽‫Ⳣ⴨⚛ל׸ׅ‬椚‫כ‬〳腉‫ׅד‬ • 갈㡮⹛歗‫ر‬٦‫ⱄךة‬欰‫כ‬㼔欽‫דسحٖأך‬遤‫ׅת׸׻‬ Unite2017 Tokyo

35.

+4‫ך‬堣腉‫ⵃ׾‬欽‫כח׷ׅ‬ • ‫؎ؚٓف‬ٝ‫׾‬㹋鄲‫׷ׅ‬ • "TTFUT1MVHJOT8FC(-QMVHJOOBNFKTMJC • $‫׵ַ⚥ך‬㹀纏‫׋׃‬ꟼ侧ָㄎ‫ׅתץ‬ • +4‫ד‬㹋鄲‫׋׃‬ꟼ侧‫׾‬ծ$ַ‫׵‬ㄎ‫ע‬ • "QQMJDBUJPO&YUFSOBM$BMM$ַ‫׵‬䒷侧‫׾‬床‫ׅ‬㜥さ • "QQMJDBUJPO&YUFSOBM&WBM‫׌׋‬ꟼ侧‫׾‬ㄎ‫לץ‬葺ְ㜥さ Unite2017 Tokyo

36.

岣䠐NFSHF*OUP‫׾‬䗳‫׆‬ㄎ‫ְׁ׌ֻד׿‬ DPOTU.Z1MVHJO\ IFMMPGVODUJPO \ BMFSU )FMMPXPSME  ^ ^ .FSHF*OUP -JCSBSZ.BOBHFSMJCSBSZ .Z1MVHJO  -JCSBSZ.BOBHFSMJCSBSZ஗Ә㕉ᡔҶ$Ә╘㔿Ӣ㘹௲ӁӨӃ Unite2017 Tokyo

37.

傈劤铂Ⰵ⸂‫؎ؚٓفכ‬ٝ‫ד‬㼎䘔‫ְׁ׌ֻג׃‬ • *.&JOQVUGPS6OJUZ8FC(-‫"ד‬TTFU4UPSF‫׾‬嗚稊 Unite2017 Tokyo

38.

珏겲‫(ך‬$ (BSCBHF$PMMFDUJPO • ($♶銲‫ًٌٔז‬걄㚖‫׾‬鍑佝‫ג׃‬ծⵃ欽〳腉걄㚖‫׾‬㟓‫הֿׅװ‬ • ($ָ饥‫ה׷‬ծⳢ椚‫ؾأ‬٦‫ָس‬衅‫ׅת׍‬ • 珏겲‫(ך‬$ • 6OJUZ‫Ⳣך‬椚禸ָ䲿⣘‫(׷ׅ‬$ • 8FC‫ָؠؐٓـ‬䲿⣘‫(׷ׅ‬$ Unite2017 Tokyo

39.

珏겲‫(ך‬$‫ך‬盖椚‫׷ׅ‬걄㚖‫כ‬殯‫ׅת׶ז‬ ブラウザの使用するメモリ：32bitの環境だと最大2G JavaScript VMに割り当てられたメモリ Unity用のメモリ データ スタック ヒープ Unite2017 Tokyo

40.

6OJUZ‫(ך‬$ָ盖椚‫׷ׅ‬걄㚖 ブラウザの使用するメモリ：32bitの環境だと最大2G JavaScript VMに割り当てられたメモリ Unity用のメモリ データ スタック ヒープ Unite2017 Tokyo

41.

6OJUZ‫(ך‬$ָ盖椚‫׷ׅ‬걄㚖 ブラウザの使用するメモリ：32bitの環境だと最大2G JavaScript VMに割り当てられたメモリ Unity用のメモリ データ スタック ヒープ Unite2017 Tokyo

42.

✳‫ؿٗفךא‬؋؎ٓ‫׾‬⢪ְⴓֽ‫ְׁ׌ֻג‬ ブラウザの使用するメモリ：32bitの環境だと最大2G JavaScript VMに割り当てられたメモリ データ スタック Unity用のメモリ ヒープ • 6OJUZ欽ًٌٔ6OJUZ‫ؿٗفך‬؋؎ٓ • +47.欽ًٌٔ‫ؿٗفךؠؐٓـ‬؋؎ٓ Unite2017 Tokyo

43.

䗳銲‫ךًٌٔז‬ꆀ‫ח‬岣䠐 ブラウザの使用するメモリ：32bitの環境だと最大2G JavaScript VMに割り当てられたメモリ JSのオブジェクト DOM WASMのコード コンパイルされたWASMのコード Unity用のメモリ (ArrayBuffer) 仮想ファイルシステム Unite2017 Tokyo

44.

ָًٌٔ駈‫׷זֻז׶‬㜥さ • 8FC"TTFNCMZBTNKT‫؝ך‬٦‫؝ךس‬ٝ‫ٕ؎ػ‬儗 • ،‫׾زحإ‬㣐ꆀ‫ؿח‬؋؎ٕ‫ח♳يذأء‬縧ְ‫׋‬㜥さ • 6OJUZ欽‫ח‬䊬㣐‫׶ⶴ׾ًٌٔז‬䔲‫׋ג‬㜥さ • 㢳ֻ‫؜ך‬٦‫׾زؙؑآـؔي‬⡲䧭‫׋׃‬㜥さ Unite2017 Tokyo

45.

‫؝‬ٝ‫ٕ؎ػ‬儗‫ח‬嶊顤ׁ‫ًٌٔ׷׸‬ ブラウザの使用するメモリ：32bitの環境だと最大2G JavaScript VMに割り当てられたメモリ JSのオブジェクト DOM WASMのコード コンパイルされたWASMのコード Unity用のメモリ (ArrayBuffer) 仮想ファイルシステム Unite2017 Tokyo

46.

‫ؿ‬؋؎ٕ‫ח♳ًٌٔכيذأء‬⡲‫⟎׋׸׵‬䟝涸‫ך׮ז‬ "QQ MJCD MJCD 4ZODISPOPVT'JMF4ZTUFN"1* MJCSBSZ@GTKT .&.'4 *%#'4 "TZODISPOPVT'JMF4ZTUFN "1* FNTDSJQUFOI /0%&'4 803,&3'4 Unite2017 Tokyo

47.

‫ؿ‬؋؎ٕ‫ח♳يذأء‬،‫׾زحإ‬縧ֹ‫ה׷ֺׅ‬ • ブラウザの使用するメモリ：32bitの環境だと最大2G ָًٌٔ♶駈‫ׅת׃‬ JavaScript VMに割り当てられたメモリ JSのオブジェクト DOM WASMのコード コンパイルされたWASMのコード Unity用のメモリ (ArrayBuffer) 仮想ファイルシステム Unite2017 Tokyo

48.

*%#'4宕竲〳腉‫ؿז‬؋؎ٕ‫يذأء‬ "QQ MJCD MJCD 4ZODISPOPVT'JMF4ZTUFN"1* MJCSBSZ@GTKT .&.'4 *%#'4 "TZODISPOPVT'JMF4ZTUFN "1* FNTDSJQUFOI /0%&'4 803,&3'4 Unite2017 Tokyo

49.
[beta] 
*OEFYFE%#‫פ‬湫䱸،‫ְזכדֽ׻׷ׅأإؙ‬
/

readme.txt

hello.c

sub

log.c

'4TZODGT USVF
名前

'4TZODGT GBMTF
値

/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: {...}}

Unite2017
Tokyo
50.

‫׵ַ׸ֿך‪8FC‬‬

51.

4IBSFE"SSBZ#VGGFSⰟ剣ًٌٔ  Main thread メモリ空間として利用 ,J# Worker メモリ空間として利用 BEESFTT@TQBDF@NBY Unite2017 Tokyo

52.

"VEJP8PSLMFU ⴽ‫דسحٖأך‬㹋遤ׁ‫ظ؟حإٗفزفؙٔأ׷׸‬٦‫س‬ AudioContext Source Source Effect Effect Destination Effect Unite2017 Tokyo

53.

4FSWJDF8PSLFS"1* • ٔ‫ا‬٦‫װُءحٍؗךأ‬刿倜‫׾‬ ‫؝‬ٝ‫ٗز‬٦ٕ‫"׷ֹד‬1* • 䟝㹀ׁ‫׷׸‬䘔欽⢽ • ،‫ٗٔفךزحإ‬٦‫س‬ • ًٌٔ⢪欽ꆀ‫ך‬⡚♴ • ؔ‫؎ٓؿ‬ٝ‫ٖفךד‬٦ https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers より引用 Unite2017 Tokyo

54.

1BZNFOU3FRVFTU"1* • 佄䩪‫ؓؿ‬٦‫"ֻׅז׾ي‬1* • 佄䩪Ⳣ椚銲実ծ鏩〳‫ח‬㼎‫׷ׅ‬窟♧ 涸‫"ז‬1*‫׾‬㹀‫➬׷׭‬圫 • 佄䩪䞔㜠‫ָؠؐٓـכ‬盖椚‫ׅת׃‬ • ِ٦‫כؠ‬佄䩪倯岀‫׾‬鼅‫ֽ׌ע‬ • 6*‫ָؠؐٓـכ‬䲿⣘‫ׅת׃‬ https://developers.google.com/web/fundamentals/discovery-and-monetization/payment-request/?hl=ja より引用 Unite2017 Tokyo

55.

Unite2017 Tokyo

56.

Unite2017 Tokyo

57.

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

58.

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

59.

)BWFGVO