Upgrade to Pro — share decks privately, control downloads, hide ads and more …

楽しい WebAssembly

楽しい WebAssembly

Sapporo.CSS(SaCSS) vol. 110 で LT させていただいた WebAssembly の紹介とデモ資料です。

詳細な解説とソースコードへのリンク
https://another.maple4ever.net/archives/2770/
https://github.com/h1romas4/rust-synth-emulation
https://github.com/h1romas4/wasm-genplus

B36204ecdf527f8c91ed7910dc440589?s=128

ひろましゃ

January 25, 2020
Tweet

Other Decks in Programming

Transcript

  1. 楽しい WebAssembly

  2. 2 自己紹介 @h1romas4

  3. 3 WebAssembly 第4のウェブの要素( 2019/12 W3C 勧告) ・ HTML ( .html

    ) ・ CSS ( .css ) ・ JavaScript ( .js ) ・ WebAssembly ( .wasm ) ← NEW!
  4. 4 Ready to GO! 主要ブラウザで既に実装済み iOS Safari / node.js /

    Electron.. 含む Figma 、 Google Earth 、 Unity (ゲーム)などで既に活用されています。
  5. 5 何をするもの? WebAssembly は、 ・ウェブブラウザー等で JavaScript 以外の言語を動かす技術 ・ Flash Player

    / Java Applet など (NPAPI) と異なり   安全で W3C 標準 ・速い(所感では JS の 3 〜 5 倍、 x20 の事例も) ・小さい
  6. 6 ブラウザでどんな言語が動くの? (1) .wasm ファイルに直接コンパイルできる言語  ・ C / C++  ・

    Rust  ・ AssemblyScript ( TypeScript サブセット)  ・ Go  ・ etc....
  7. 7 ブラウザでどんな言語が動くの? (2) .wasm にコンパイルされた  インタープリタやランタイムで動作する言語  ・ C# ( .dll

    )  ・ Python ( .py )  ・ Ruby/mRuby ( .rb )  ・ etc...
  8. 8 JavaScript と WebAssembly JavaScript と WebAssembly はお友達です

  9. 9 JS と WASM は協調して動作 WebAssembly から直接ブラウザーにアクセスはできない ウェブブラウザー (DOM /

    HTML5 API) JavaScript WebAssembly OS だめ 現在のところ
  10. 10 どうやって使うの? JavaScript から import して、計算ライブラリとして利用

  11. 11 計算だけ? JavaScript に入出力を委譲し、 JS で書きづらかったり  遅くなる処理の置き換えや、他言語で成長しているライブラリーを  ブラウザー内でそのまま活用できます。 ・データーの圧縮伸張( .gz

    や .zip の展開) ・ PDF や Excel などオフィスファイルの生成 ・画像処理(リサイズや高度なフィルター) ・音声処理(音声合成、スクリーンリーダー) ・仮想 DOM の差分など JS だと遅い処理の高速化
  12. 12 音声処理(デモ) シンセサイザー(電子楽器)をリアルタイムに演奏する例。 ・ WebAssembly ( Rust 言語)担当  音声波形生成  圧縮ファイルの展開

    / ファイルから曲名などをバイナリー解析 ・ JavaScript 担当  音声出力( WebAudio API )  ビジュアライザー( Canvas API )  ユーザーインターフェース(ドラッグアンドドロップ)
  13. 13 音声処理(デモ)

  14. 14 画像・音声処理(デモ) ゲーム機のエミュレーションをする例。 ・ WebAssembly ( C 言語)担当  ゲーム機のエミュレーションを行い、 1/60

    秒ごとの   出力用のグラフィック・音声のメモリー領域を生成 ・ JavaScript 担当  画面出力( requestAnimationFrame / Canvas API )  音声出力( WebAudio API )  ジョイパッド入力( GamePad API )
  15. 15 画像・音声処理(デモ)

  16. 16 その他の例 Flash Player を WebAssembly 化した例   ruffle  

    ruffle is a Flash Player emulator    built in the Rust programming language. WebAssembly でブラウザーに SQL データベースを実装した例 WebAssembly で JavaScript インタープリタを実装した例 WebAssembly で WebAssembly インタープリタを実装した例 等々、、入出力を JavaScript に外だしに修正できれば  基本的に何でも動作しますので、詳しい方はチャレンジしてみてください!
  17. 17 ご清聴ありがとうございました! @h1romas4 デモのソースコードや詳細 https://another.maple4ever.net/archives/2770/