WebAssemblyとそのデモ

About WebAssembly and its demo.

Transcript

1. WebAssembly ͱͦͷԠ༻ ۨాफල Sohobb.Inc June 26, 2020
2. WebAssembly WebAssembly ͱ͸ ެࣜαΠτΑΓ binary instruction format for a stack-based vir- tual machine.(ελοΫϕʔεͷԾ૝Ϛγϯʹର͢Δό ΠφϦͷ໋ྩίʔυ) ! ΢Σϒϒϥ΢β্Ͱ࣮ߦͰ͖ΔόΠφϦݴޠ 2 / 20
3. WebAssembly WebAssembly ͱ͸ ଞͷϓϩάϥϛϯάݴޠͰهड़͞ΕͨίʔυΛɺ wasm(WebAssembly) ϑΝΠϧʹίϯύΠϧ͢Δɻ wasm ϑΝΠϧΛϒϥ΢β্ʹ import ͯ͠ɺར༻͢Δ͜ͱ͕Ͱ ͖Δɻ ͭ·Γɺweb ͷϓϥοτϑΥʔϜʹ͓͍ͯ html , css , javascript + wasm 3 / 20
4. WebAssembly ରԠݴޠ › C › C++ › Rust › Go › Typescript ͳͲ 4 / 20
5. WebAssembly 5 / 20
6. WebAssembly WebAssembly ͷ໨త Javascript ͸ɺҎԼͷΑ͏ͳࠜຊతͳऑ఺ (ಛ௃) ͕͋Δɻ › ωΠςΟϒʹඖఢ͢Δεϐʔυ͸ग़ͤͳ͍ɻ › ݴޠతʹɺϝϞϦΛҙࣝͯ͠ίʔυΛॻ͘͜ͱ͕೉͍͠ɻ 6 / 20
7. WebAssembly WebAssembly ͷ໨త ҰํͰɺWebAssembly Ͱ͸ɺRust ͱ͍ͬͨ௿ਫ४ͳݴޠΛ ࢖ͬͯهड़͢Δ͜ͱ͕Ͱ͖Δɻ ·ͨɺόΠφϦʹίϯύΠϧ͢ΔͨΊɺ৔߹ʹΑͬͯ͸ωΠςΟϒ Ϩϕϧͷ଎౓Λ࣮ݱ͢Δ͜ͱ͕Ͱ͖Δɻ 7 / 20
8. WebAssembly ͷԠ༻ྫ Making really tiny WebAssembly graphics demos XʢݱΞϧϑΝϕοτͷࢠձࣾʣͷݩࣾһͷهࣄɻ 8 / 20
9. WebAssembly ͷԠ༻ྫ Figure: http://cliffle.com/blog/bare-metal-wasm/ 9 / 20
10. WebAssembly ͷԠ༻ྫ Figure: هࣄͰ࡞੒͞ΕͨσϞ 10 / 20
11. WebAssembly ͷԠ༻ྫ 1 Rust Λ࢖ͬͯ Image Buffer Λૢ࡞͢ΔͨΊͷ WASM Λ ࡞੒ 2 WASM ͔Βදࣔ༻ͷը૾ͷ buffer Λ࡞੒ 3 Javascript ͔ΒΞχϝʔγϣϯ୯ҐͰɺWASM ͷϞδϡʔ ϧΛݺͼग़͢ɻ 4 wasm Ϟδϡʔϧ͸ɺbuffer Λߋ৽ɻ 5 Javascript ͸ϝϞϦ্ͷ buffer Λࢀরͯ͠ canvas ʹ දࣔɻ 11 / 20
12. WebAssembly ͷԠ༻ྫ Figure: JS ͱ WASM ͷ࿈ܞ 12 / 20
13. WASM(Rust) ଆ install ˍ create ˍ build rustup target add wasm32-unknown-unknown cargo new --lib demo cargo build --target wasm32-unknown-unknown -- release ্͔ΒͦΕͧΕɺwebassembly ίϯύΠϧ༻ͷ؀ڥͷ௥Ճɺϓϩ δΣΫτͷ࡞੒ɺ͓Αͼ webassembly ΁ͷίϯύΠϧ 13 / 20
14. WebAssembly ͷԠ༻ྫ WASM(Rust) ଆ ը૾ͷେ͖͞Λࢦఆ͠ɺbuffer Λ static ʹએݴ͢Δ u32 ʹ͍ͭͯ RGBA ۭؒʹ͓͚Δ 1 ϐΫηϧ͋ͨΓʹ͔ͭ͏৘ใྔ͸ 4byte = 32bit 14 / 20
15. WebAssembly ͷԠ༻ྫ WASM(Rust) ଆ BUFFER ͷϝϞϦ্ͷ index Λฦ͢ function Λ࣮૷͠ɺjs ʹ Ҿ͖౉͢ɻ 15 / 20
16. WebAssembly ͷԠ༻ྫ WASM(Rust) ଆ BUFFER Λߋ৽͢Δ function 16 / 20
17. WebAssembly ͷԠ༻ྫ WASM(Rust) ଆ JS ʹҾ͖౉͢ BUFFER ߋ৽༻ͷ function 17 / 20
18. WebAssembly ͷԠ༻ྫ JS ଆ WASM ϑΝΠϧΛ import ͠ɺbuffer ΍ function Λऔಘ͢Δɻ 18 / 20
19. WebAssembly ͷԠ༻ྫ Figure: هࣄͰ࡞੒͞ΕͨσϞ 19 / 20
20. ͦͷଞ ͦͷଞͷ࿩୊ › WASM ϑΝΠϧͷܰྔԽπʔϧ (wabt, binaryen, etc...) › طଘϑϨʔϜϫʔΫ, πʔϧͷରԠ (Next.js, webpack ,ASP.NET Core, etc...) 20 / 20