Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Emscripten night "WebGL + WASM"

56 views

Published on

Emscripten night 12 月の資料です 

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

Emscripten night "WebGL + WASM"

  1. 1. WEBGL WITH WASM EMSCRIPTEN NIGHT 2018 DECEMBER
  2. 2. WHO AM I? @KYASBAL-1994 (石井 翔) ▸ 東工大 M1 ▸ 未踏2016スーパークリエータ ▸ Web開発のためのWebGLフレームワーク”Grimoire.js”作者 ▸ 未踏アドバンスト2018イノベータ ▸ 普段はWebGLとかWebXR周りのことをやっている人
  3. 3. 導入 WASMでスレッドが使えるようになる! ▸ これでマルチコアをフル活用したWASMばっかりのWebサ イトを作れるぞ! ▸ もっと活かせるコアはたくさんある!
  4. 4. 導入 WEBGL ▸ WebGLって単語を知っているよって方? ▸ WebGL使ったことあるよって方?
  5. 5. 導入 WEBGLとは? 🤔ちょっと微妙
  6. 6. 導入 WEBGLはWEBで3DCGを行う為だけのものじゃない ▸ GPUを用いて主に3DCGなどの描画を高速に行うAPI 🤯 CPU ? GPU ?
  7. 7. 導入 WEBGLはWEBで3DCGを行う為だけのものじゃない 🤯 CPU ? GPU ?
  8. 8. 導入 WEBGLの得意な処理の例 ▸ グラデーションをかける ▸ 入力:
 各点の一番近い3つの頂点から の距離
 3つの頂点の色 ▸ 出力: 色 ▸ ある点の色を決める際に別の点 の色が関係ない
  9. 9. WASMと共にWEBGLも活用してもっと高速化しよう
  10. 10. WEBGL+WASMの実例 WEBGLとWASMを用いた線分認識
  11. 11. WASMの効果 GPUを用いた事前処理 WASMでの処理時間 JSでの処理時間 GPUで可能な処理: 色の勾配を求める処理
 (Sobel フィルタリング)
 輝度を2値に分解する処理 CPUでしかできない処理: 線分検出(RANSAC) WEBGL+WASMの実例
  12. 12. デモ WASMとWEBGLを連携させてみよう ▸ 流石にマーカー認識は難しいのでエッジのセグメンテーショ ンをします デモコード: https://github.com/kyasbal-1994/emscripten-night
  13. 13. デモ WASMとWEBGLを連携させてみよう ▸ WebGLだけでは難しい。
 (隣同士のピクセルの値によって処理が変わってしまう) デモコード: https://github.com/kyasbal-1994/emscripten-night
  14. 14. デモ WASMとWEBGLを連携させてみよう ▸ WASMだけでもできるが、勾配の計算はGPUでやると早い デモコード: https://github.com/kyasbal-1994/emscripten-night
  15. 15. WASMとWEBGLでメモリを共有する ▸ WASM側にallocとdeallocを実装する
  16. 16. WASMでALLOCしたメモリをJS側で表示する ▸ js側からallocを呼び出して、ポインタを取得する ▸ このポインタを用いてシェアされたUint8Arrayを作れる 画像として使う際の例
  17. 17. テキスト 補足) UINT8ARRAY コンストラクタ ▸ 4つ目の第一引数に直接memoryを渡す ▸ byteOffsetにwasm側で取得したpointerを渡す ▸ lengthにメモリ全体の長さを渡す ▸ これはただのビューなのでコピーのコストなどは生じない
  18. 18. WEBGLでSOBELフィルタを描画する ▸ WASM関係の話の場なので省略するが比較的簡単なチュー トリアルを見ればエッジの抽出ができる
 参考) https://wgld.org/d/webgl/w055.html 中心の画素を決める際に左右上下斜めの色を見て
 係数をかけて足し合わせる
  19. 19. WEBGLで描いた内容をWASMに渡す ▸ Framebufferというものに描画することによって、 Uint8Arrayに書き出すことができる
  20. 20. WASMで幅優先探索を行なってメモリに直接色を乗せる
  21. 21. まとめ まとめ ▸ 同じ処理を入力が若干違うもの同士に適用する際には WebGLを使うと早い ▸ WASM側でallocしたポインタをjsに渡す ▸ js側でUint8Arrayなどに渡して切り出す ▸ WebGL側でFBOに描画してreadPixelsを用いればWASM側 に直接GPUで描画したテクスチャを渡すことができる

×