412 Views
June 07, 17
スライド概要
講演者:清水 智公(Mozilla)
こんな人におすすめ
・Webをターゲットとしたゲーム開発をされている方
・ゲームのWebへの展開を検討されている方
受講者が得られる知見
・ゲームに関するWeb技術に対する概要
・WebAssemblyについて
・WebGL出力を使うときに気をつけるべき事柄
講演動画:https://youtu.be/WKdxkxBWTHY
リアルタイム3Dコンテンツを制作・運用するための世界的にリードするプラットフォームである「Unity」の日本国内における販売、サポート、コミュニティ活動、研究開発、教育支援を行っています。ゲーム開発者からアーティスト、建築家、自動車デザイナー、映画製作者など、さまざまなクリエイターがUnityを使い想像力を発揮しています。
ゲームプラットフォームとしてのWeb。 現在と未来 清水智公 (Mozilla Tech Speaker)
Unite2017 Tokyo
Unite2017 Tokyo
Unite2017 Tokyo
8FC(-⳿⸂
鼅䫛8FC(-חزح٦ةسٕؽ ׅٕ٦زأ؎ُٕٝ٦آٌ• 8FC(- ׅתזחֲ״ֹדسٕؽծדהֿ ծהע鼅• #VJME"OE3VO ծ׃⹛ָ饯غ٦؟)551דٕؕ• ٗ٦ דؠؐٓـךزٕؓؿرآ٦لך • ׅת׃邌爙 * Unity5.6.0f3で確認 Unite2017 Tokyo
8FC"TTFNCMZ⸂⳿ךפ 1MBZFS4FUUJOHTֻ 1VCMJTIJOH4FUUJOHTֻ 8FC"TTFNCMZ &YQFSJNFOUBM ח Ⰵؙحؑث سٕؽ * Unity5.6.0f3で確認 Unite2017 Tokyo
⳿⸂ׁتٕؓؿ • #VJME⳿⸂ׁيؚٓٗف • يؚٓٗف • ،زحإ • 5FNQMBUF%BUB • $44ծ،؎؝ٝծGBWJDPO • غأؚٖٗف٦ך㹋鄲 Unite2017 Tokyo
#VJMEؿךⰻتٕؓؿ؋؎ٕ glob 役割 *.wasm.*.unityweb WebAssembly出力されたプログラム *.asm.*.unityweb asm.js出力されたプログラム (フォールバック用) webgl.data.unityweb アセット webgl.json ローダに渡すパラメータ UnityLoader.js プログラムのロード、メモリの初期化、 ファイルシステムの提供、外部シンボルの設定、etc Unite2017 Tokyo
"ؙح؍ؿؚٓ1*ך䭷㹀 • 1MBZFS4FUUJOHTך 0UIFS4FUUJOHTח갪湡ָׅ֮ת • "VUP(SBQIJDT"1*ؙحؑثח Ⰵה㹋遤儗ח荈⹛鼅䫛ׁׅת • ؙحؑث㢩הׅծ 僇爙涸ח鼅䫛ׅתֹד * Unity5.6.0f3で確認 Unite2017 Tokyo
8FCך植㖈
ד♳ؠؐٓـ〳腉Ⳣז椚 • ٦سحػي٥ؗ٦ن٦س٥《⸂Ⰵךأؐو • Ⰻ歗邌爙 • 0QFO(-&4✼䳔ך%أؙح؍ؿؚٓ • 갈㡮ؿ؋؎ٕ٥갈㡮ر٦ךةꬊず劍ⱄ欰ծ瑞갈갟 • رךד♳ؠؐٓـ٦ة宕竲⻉ • NFTTBHFQBTTJOHⳢ⚛״ח椚 • )551 4 鸐⥋ծزح؛ا鸐⥋ծ11ر٦ة鸐⥋ Unite2017 Tokyo
8FC"TTFNCMZ8FCぢֽؓؿٔش؎غך٦زحو • 殛剅8"4. • 8$ؚٕ؍ذصُى؝ך٦דف陽锷 • IUUQTXXXXPSHDPNNVOJUZ XFCBTTFNCMZ • IUUQTXFCBTTFNCMZHJUIVCJP Unite2017 Tokyo
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
8"4..71 .JOJNVN7JBCMF1SPEVDU 㹀纏堣圓ךُٕ٦آٌ׃• ⴓ侔 㹀纏ךأؙح؍ذٝوإ״חٝءوؙحةأ➰• 㘗 ׃ה䲿⸂⳿س٦؝ـ؍ذ؎ط״ח• Ⳣ椚禸 䲿⣘ךزح٦وؓؿٔش؎غ ׁⵃ欽דؖحغرװٓ؎؋ؿٗف • 䲿⣘ך邌植زأؗذ ְ鏣鎘ז׃ה䲿ؠؐٓـ• 8FC Unite2017 Tokyo
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
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
IUUQTIBDLTNP[JMMBPSHXFCBTTFNCMZCSPXTFSQSFWJFX Unite2017 Tokyo
WebAssembly Explorer (http://mbebenita.github.io/WasmExplorer/) Unite2017 Tokyo
8"4.ך倯ָٗ٦ָس傍ְ ダウンロード デコード ダウンロード デコード 構文解析 コンパイル 実行 asm.js コンパイル 実行 WASM Unite2017 Tokyo
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
8FC(-(16،"ךךأإؙ1* • غךא٦ّآٝ • 8FC(-0QFO(-&4 • 8FC(-0QFO(-&4 • IUUQTXXXLISPOPTPSH SFHJTUSZXFCHMTQFDTMBUFTU խ Unite2017 Tokyo
After the Flood (https://www.youtube.com/watch?v=TT7ugKuUMv0) Unite2017 Tokyo
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
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
Instanced geometry drawing Unite2017 Tokyo
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
WebGLの普及率 WebGL2の普及率 http://webglstats.com/ の2017/05/04のデータより Unite2017 Tokyo
https://metrics.mozilla.com/firefox-hardware-report/ Unite2017 Tokyo
8FC(-⳿⸂ׅ儗ך岣䠐挿
8FC(-⳿⸂ךٙ٦ٗؿؙ٦ C# Mono IL IL2CPP C++ Clang LLVM IL Binaryen WASM + JS Unite2017 Tokyo
㢳ֻך堣腉כ+4ךㄎד׃⳿ן㹋鄲ׁׅתְג C# Mono IL IL2CPP C++ Clang LLVM IL Binaryen WASM + JS Unite2017 Tokyo
ךؠؐٓـ䭯ג堣腉ֻתֲ⢪ְֻׁג AnimationFrame UI Event AnimationFrame Event UI AnimationFrame • 8FCדؠؐٓـ㹋遤ׁ،ءכٔفׅٝדسحٖإؚٔ • 8FC8PSLFS⢪欽Ⳣ⚛לׅ椚כ〳腉ׅד • 갈㡮⹛歗ر٦ⱄךة欰כ㼔欽דسحٖأך遤ׅת Unite2017 Tokyo
+4ך堣腉ⵃ欽כחׅ • ؎ؚٓفٝ㹋鄲ׅ • "TTFUT1MVHJOT8FC(-QMVHJOOBNFKTMJC • $ַ⚥ך㹀纏׃ꟼ侧ָㄎׅתץ • +4ד㹋鄲׃ꟼ侧ծ$ַㄎע • "QQMJDBUJPO&YUFSOBM$BMM$ַ䒷侧床ׅ㜥さ • "QQMJDBUJPO&YUFSOBM&WBMꟼ侧ㄎלץ葺ְ㜥さ Unite2017 Tokyo
岣䠐NFSHF*OUP䗳׆ㄎְֻׁד DPOTU.Z1MVHJO\ IFMMPGVODUJPO \ BMFSU )FMMPXPSME ^ ^ .FSHF*OUP -JCSBSZ.BOBHFSMJCSBSZ .Z1MVHJO -JCSBSZ.BOBHFSMJCSBSZӘ㕉ᡔҶ$Ә╘㔿Ӣ㘹௲ӁӨӃ Unite2017 Tokyo
傈劤铂Ⰵ⸂؎ؚٓفכٝד㼎䘔ְֻׁג׃ • *.&JOQVUGPS6OJUZ8FC(-"דTTFU4UPSF嗚稊 Unite2017 Tokyo
珏겲(ך$ (BSCBHF$PMMFDUJPO • ($♶銲ًٌٔז걄㚖鍑佝ג׃ծⵃ欽〳腉걄㚖㟓הֿׅװ • ($ָ饥הծⳢ椚ؾأ٦ָس衅ׅת • 珏겲(ך$ • 6OJUZⳢך椚禸ָ䲿⣘(ׅ$ • 8FCָؠؐٓـ䲿⣘(ׅ$ Unite2017 Tokyo
珏겲(ך$ך盖椚ׅ걄㚖כ殯ׅתז ブラウザの使用するメモリ:32bitの環境だと最大2G JavaScript VMに割り当てられたメモリ Unity用のメモリ データ スタック ヒープ Unite2017 Tokyo
6OJUZ(ך$ָ盖椚ׅ걄㚖 ブラウザの使用するメモリ:32bitの環境だと最大2G JavaScript VMに割り当てられたメモリ Unity用のメモリ データ スタック ヒープ Unite2017 Tokyo
6OJUZ(ך$ָ盖椚ׅ걄㚖 ブラウザの使用するメモリ:32bitの環境だと最大2G JavaScript VMに割り当てられたメモリ Unity用のメモリ データ スタック ヒープ Unite2017 Tokyo
✳ؿٗفךא؋؎ٓ⢪ְⴓְֻֽׁג ブラウザの使用するメモリ:32bitの環境だと最大2G JavaScript VMに割り当てられたメモリ データ スタック Unity用のメモリ ヒープ • 6OJUZ欽ًٌٔ6OJUZؿٗفך؋؎ٓ • +47.欽ًٌٔؿٗفךؠؐٓـ؋؎ٓ Unite2017 Tokyo
䗳銲ךًٌٔזꆀח岣䠐 ブラウザの使用するメモリ:32bitの環境だと最大2G JavaScript VMに割り当てられたメモリ JSのオブジェクト DOM WASMのコード コンパイルされたWASMのコード Unity用のメモリ (ArrayBuffer) 仮想ファイルシステム Unite2017 Tokyo
ָًٌٔ駈זֻז㜥さ • 8FC"TTFNCMZBTNKT؝ך٦؝ךسٕٝ؎ػ儗 • ،زحإ㣐ꆀؿח؋؎ٕח♳يذأء縧ְ㜥さ • 6OJUZ欽ח䊬㣐ⶴًٌٔז䔲ג㜥さ • 㢳ֻך٦زؙؑآـؔي⡲䧭׃㜥さ Unite2017 Tokyo
؝ٕٝ؎ػ儗ח嶊顤ׁًٌٔ ブラウザの使用するメモリ:32bitの環境だと最大2G JavaScript VMに割り当てられたメモリ JSのオブジェクト DOM WASMのコード コンパイルされたWASMのコード Unity用のメモリ (ArrayBuffer) 仮想ファイルシステム Unite2017 Tokyo
ؿ؋؎ٕח♳ًٌٔכيذأء⡲⟎䟝涸ךז "QQ MJCD MJCD 4ZODISPOPVT'JMF4ZTUFN"1* MJCSBSZ@GTKT .&.'4 *%#'4 "TZODISPOPVT'JMF4ZTUFN "1* FNTDSJQUFOI /0%&'4 803,&3'4 Unite2017 Tokyo
ؿ؋؎ٕח♳يذأء،زحإ縧ֹהֺׅ • ブラウザの使用するメモリ:32bitの環境だと最大2G ָًٌٔ♶駈ׅת׃ JavaScript VMに割り当てられたメモリ JSのオブジェクト DOM WASMのコード コンパイルされたWASMのコード Unity用のメモリ (ArrayBuffer) 仮想ファイルシステム Unite2017 Tokyo
*%#'4宕竲〳腉ؿז؋؎ٕيذأء "QQ MJCD MJCD 4ZODISPOPVT'JMF4ZTUFN"1* MJCSBSZ@GTKT .&.'4 *%#'4 "TZODISPOPVT'JMF4ZTUFN "1* FNTDSJQUFOI /0%&'4 803,&3'4 Unite2017 Tokyo
*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
ַֿך8FC
4IBSFE"SSBZ#VGGFSⰟ剣ًٌٔ Main thread メモリ空間として利用 ,J# Worker メモリ空間として利用 BEESFTT@TQBDF@NBY Unite2017 Tokyo
"VEJP8PSLMFU ⴽדسحٖأך㹋遤ׁظ؟حإٗفزفؙٔأ٦س AudioContext Source Source Effect Effect Destination Effect Unite2017 Tokyo
4FSWJDF8PSLFS"1* • ٔا٦װُءحٍؗךأ刿倜 ؝ٝٗز٦ٕ"ֹד1* • 䟝㹀ׁ䘔欽⢽ • ،ٗٔفךزحإ٦س • ًٌٔ⢪欽ꆀך⡚♴ • ؔ؎ٓؿٖٝفךד٦ https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers より引用 Unite2017 Tokyo
1BZNFOU3FRVFTU"1* • 佄䩪ؓؿ٦"ֻׅזي1* • 佄䩪Ⳣ椚銲実ծ鏩〳ח㼎ׅ窟♧ 涸"ז1*㹀➬圫 • 佄䩪䞔㜠ָؠؐٓـכ盖椚ׅת׃ • ِ٦כؠ佄䩪倯岀鼅ֽע • 6*ָؠؐٓـכ䲿⣘ׅת׃ 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://html5j-webplat.connpass.com/ https://webaudiotokyo.connpass.com/ https://emsn.connpass.com/ Unite2017 Tokyo
)BWFGVO