Emscripten night 12 月の資料です　

1. WEBGL WITH WASM
EMSCRIPTEN NIGHT 2018 DECEMBER

2. WHO AM I?
@KYASBAL-1994 (石井 翔)
▸ 東工大 M1
▸ 未踏2016スーパークリエータ
▸ Web開発のためのWebGLフレームワーク”Grimoire.js”作者
▸ 未踏アドバンスト2018イノベータ
▸ 普段はWebGLとかWebXR周りのことをやっている人

3. 導入
WASMでスレッドが使えるようになる!
▸ これでマルチコアをフル活用したWASMばっかりのWebサ
イトを作れるぞ!
▸ もっと活かせるコアはたくさんある!

4. 導入
WEBGL
▸ WebGLって単語を知っているよって方?
▸ WebGL使ったことあるよって方?

5. 導入
WEBGLとは?
🤔ちょっと微妙

6. 導入
WEBGLはWEBで3DCGを行う為だけのものじゃない
▸ GPUを用いて主に3DCGなどの描画を高速に行うAPI
🤯 CPU ? GPU ?

7. 導入
WEBGLはWEBで3DCGを行う為だけのものじゃない
🤯 CPU ? GPU ?

8. 導入
WEBGLの得意な処理の例
▸ グラデーションをかける
▸ 入力:
各点の一番近い3つの頂点から
の距離
3つの頂点の色
▸ 出力: 色
▸ ある点の色を決める際に別の点
の色が関係ない

9. WASMと共にWEBGLも活用してもっと高速化しよう

10. WEBGL+WASMの実例
WEBGLとWASMを用いた線分認識

11. WASMの効果
GPUを用いた事前処理
WASMでの処理時間 JSでの処理時間
GPUで可能な処理: 色の勾配を求める処理
(Sobel フィルタリング)
輝度を2値に分解する処理
CPUでしかできない処理: 線分検出(RANSAC)
WEBGL+WASMの実例

12. デモ
WASMとWEBGLを連携させてみよう
▸ 流石にマーカー認識は難しいのでエッジのセグメンテーショ
ンをします
デモコード: https://github.com/kyasbal-1994/emscripten-night

13. デモ
WASMとWEBGLを連携させてみよう
▸ WebGLだけでは難しい。
(隣同士のピクセルの値によって処理が変わってしまう)
デモコード: https://github.com/kyasbal-1994/emscripten-night

14. デモ
WASMとWEBGLを連携させてみよう
▸ WASMだけでもできるが、勾配の計算はGPUでやると早い
デモコード: https://github.com/kyasbal-1994/emscripten-night

15. WASMとWEBGLでメモリを共有する
▸ WASM側にallocとdeallocを実装する

16. WASMでALLOCしたメモリをJS側で表示する
▸ js側からallocを呼び出して、ポインタを取得する
▸ このポインタを用いてシェアされたUint8Arrayを作れる
画像として使う際の例

17. テキスト
補足) UINT8ARRAY コンストラクタ
▸ 4つ目の第一引数に直接memoryを渡す
▸ byteOffsetにwasm側で取得したpointerを渡す
▸ lengthにメモリ全体の長さを渡す
▸ これはただのビューなのでコピーのコストなどは生じない

18. WEBGLでSOBELフィルタを描画する
▸ WASM関係の話の場なので省略するが比較的簡単なチュー
トリアルを見ればエッジの抽出ができる
参考) https://wgld.org/d/webgl/w055.html
中心の画素を決める際に左右上下斜めの色を見て
係数をかけて足し合わせる

19. WEBGLで描いた内容をWASMに渡す
▸ Framebufferというものに描画することによって、
Uint8Arrayに書き出すことができる

20. WASMで幅優先探索を行なってメモリに直接色を乗せる

21. まとめ
まとめ
▸ 同じ処理を入力が若干違うもの同士に適用する際には
WebGLを使うと早い
▸ WASM側でallocしたポインタをjsに渡す
▸ js側でUint8Arrayなどに渡して切り出す
▸ WebGL側でFBOに描画してreadPixelsを用いればWASM側
に直接GPUで描画したテクスチャを渡すことができる