重めタスクのオフロード先としてのWasmとWebGPU

新宿御苑.wasm #2025.2.28
https://shinjukugyoen.connpass.com/event/342134/

LT内で紹介したデモ：
①マンデルブロ曲線の描画をする実装の比較
https://github.com/kubohiroya/benchmark-webworker-wasm-webgpu
②画像のフィルタ処理をする実装の比較
https://github.com/kubohiroya/vite-react-comlink-worker-assemblyscript-webgpu-boilerplate
③シェリングの分居モデルをシミュレーションする実装の比較
https://github.com/kubohiroya/webgpu-react-bitmap-viewport

Transcript

1. 重めタスクのオフロード先としての WasmとWebGPU Hiroya Kubo 新宿御苑.dev 2025-02-28
2. Hiroya Kubo 久保 裕也 • フロントエンド技術を追いかけるのが好きです • 30年前には、 原田大三郎さん＋坂本龍一さんのプログラマとして、 CERN httpd上のCGIを介して マルチユーザが 動的にVRMLを共同編集する内容の アート作品を作っていました • トランプ政権による関税政策の影響を分析する… などに関する仕事をしています • 世界各国と地域における産業・交通網・関税政策のモデル化をして いろいろなシナリオでの世界経済の未来予測・政策評価をする シミュレーションを、GPU上で動かす研究開発など X: @kubohiroya GitHub: kubohiroya 四ツ谷住民です！
3. Hiroya Kubo 久保 裕也 • 1973年生まれ • SFC4期生、初代SFC公式Webサーバ管理者(1994-1995) • 原田大三郎さん+坂本龍一さんのIC’95作品のプログラマ(1995) • (株)digitiminimiでエンジニアとして、坂本龍一さん・高橋幸宏さんや X JAPANなどのライブの電子チケットシステム開発運営など(1996-1999) • PIM(株)でYahoo Japanとの合弁直前まで、DoSule!のバックエンドにおける 分散オブジェクト通信システムなどを開発(1999-2000) • 学校コミュニティ支援のための情報システム研究開発(2000-2009) • マークシート作成・読取のOSS「Shared Questionnaire Systemの開発」で、 IPA未踏ソフトウェア開発プロジェクトで「スーパークリエータ」認定(2008) • 慶應義塾大学 政策・メディア研究科 特任研究講師(2008-2009)、 千葉商科大学 政策情報学部 准教授(2009-2015)などを経て、 • 千葉商科大学 国際教養学部 教授(2015-2025現在) ※2025年4月からは同大学 総合政策学部 政策情報学科に異動予定 • JETROアジア経済研究所 特任研究員(2022-2023, 2024-現在) • 経済地理シミュレーションのシステム開発 • ERIA(Economic Research Institute for ASIAN and East Asia) 研究協力者(2024-現在) X: @kubohiroya GitHub: kubohiroya 四ツ谷住民です！
4. 今日は、ブラウザ上での 「時間のかかるタスク」を Wasmなどで、どう処理するか？ について話します
5. デモその① 「マンデルブロ曲線」 https://github.com/kubohiroya/benchmark-webworker-wasm-webgpu
6. Wasmで少しだけ高速化 WebGPUに オフロード Non-Blocking Cancellable Non-Blocking Worker Thread Line-by-line シンプルな実装では、 UIがブロックしてしまう Workerに オフロード UIをブロックしない キャンセル可能化
7. デモその② 「画像のフィルタ処理」 https://github.com/kubohiroya/vite-react-comlink-worker-assemblyscript-webgpu-boilerplate
8. 画像の平均化フィルタを 200回繰り返し適用 UIをブロックしない・ Workerにオフロード WebGPUにオフロード シンプルな実装では、 UIがブロックしてしまう 4.58秒 4.66秒 1.79秒 1.82秒 0.07秒
9. デモその③ 「マルチエージェント シミュレーション」 https://github.com/kubohiroya/webgpu-react-bitmap-viewport
10. 遅い やや遅い 速い 超速い 12.8 fps 42.0 fps 68.9 fps 91.2 fps 1024^2のセルにおける 5種族の分居
11. まとめ
12. Wasmで、どの程度まで 高速化できた？ 計測して確認しよう！
13. Webブラウザでの重めタスク処理における Wasm導入以前に 「やるべきこと」 1. ブロックしないようにする 2. キャンセル可能にする 3. オフロードする
14. Wasmの導入とあわせて、 WebGPU ComputeShader との 「使い分け」「併用」を検討する
15. ご清聴ありがとう ございました ①マンデルブロ曲線の描画をする実装の比較 https://github.com/kubohiroya/benchmark-webworker-wasm-webgpu ②画像のフィルタ処理をする実装の比較 https://github.com/kubohiroya/vite-react-comlink-worker-assemblyscript-webgpu-boilerplate ③シェリングの分居モデルをシミュレーションする実装の比較 https://github.com/kubohiroya/webgpu-react-bitmap-viewport