Submit Search
Upload
WebAssembly text format で画像処理を書くぞ
•
Download as PPTX, PDF
•
6 likes
•
12,119 views
K
Kohei Kawasaki
Follow
UIT#2 怠けるために努力を惜しまない プロのフロントエンドエンジニアたち
Read less
Read more
Engineering
Report
Share
Report
Share
1 of 58
Download now
Recommended
Build Node.js-WASM/WASI Tiny compiler with Node.js
Build Node.js-WASM/WASI Tiny compiler with Node.js
mganeko
WebAssemblyのWeb以外のことぜんぶ話す
WebAssemblyのWeb以外のことぜんぶ話す
Takaya Saeki
2016/12/17 ASP.NET フロントエンドタスク入門
2016/12/17 ASP.NET フロントエンドタスク入門
miso- soup3
2016/05/01 Visual Studio with Cordova
2016/05/01 Visual Studio with Cordova
miso- soup3
CSS Nite LP26 CodeKitで始める次世代Web制作
CSS Nite LP26 CodeKitで始める次世代Web制作
Maboroshi.inc
タスクランナー導入 〜とあるWordPress制作環境〜
タスクランナー導入 〜とあるWordPress制作環境〜
Masaya Kogawa
サーバー設定自動化は経営課題
サーバー設定自動化は経営課題
Maho Takara
WordPressでの制作説明
WordPressでの制作説明
Toshiaki Endo
Recommended
Build Node.js-WASM/WASI Tiny compiler with Node.js
Build Node.js-WASM/WASI Tiny compiler with Node.js
mganeko
WebAssemblyのWeb以外のことぜんぶ話す
WebAssemblyのWeb以外のことぜんぶ話す
Takaya Saeki
2016/12/17 ASP.NET フロントエンドタスク入門
2016/12/17 ASP.NET フロントエンドタスク入門
miso- soup3
2016/05/01 Visual Studio with Cordova
2016/05/01 Visual Studio with Cordova
miso- soup3
CSS Nite LP26 CodeKitで始める次世代Web制作
CSS Nite LP26 CodeKitで始める次世代Web制作
Maboroshi.inc
タスクランナー導入 〜とあるWordPress制作環境〜
タスクランナー導入 〜とあるWordPress制作環境〜
Masaya Kogawa
サーバー設定自動化は経営課題
サーバー設定自動化は経営課題
Maho Takara
WordPressでの制作説明
WordPressでの制作説明
Toshiaki Endo
はじめてのUser-Agent文字列
はじめてのUser-Agent文字列
Kenta USAMI
WordPress 環境の構築について考えてみた
WordPress 環境の構築について考えてみた
Tadashi Miyazato
X pages day発表_20141118 final
X pages day発表_20141118 final
Fumiko Yamamoto
a-sap10「モジュールIDを理解する」
a-sap10「モジュールIDを理解する」
Seiko Kuchida
XpagesDay 2014 [A-2] スタンダードクライアントで xpages を使ってみよう
XpagesDay 2014 [A-2] スタンダードクライアントで xpages を使ってみよう
Takeshi Yoshida
後期講座05
後期講座05
Takenori Nakagawa
Hands on PhotoBlog App with WordPress REST API and App Inventor
Hands on PhotoBlog App with WordPress REST API and App Inventor
Hong Chen
C# CloudScript Azure Functions との連携
C# CloudScript Azure Functions との連携
YutoNishine
WordPress アカンパターン
WordPress アカンパターン
Kazue Igarashi
株式会社インタースペース 沖本様 登壇資料
株式会社インタースペース 沖本様 登壇資料
leverages_event
はじめての ASP.NET MVC
はじめての ASP.NET MVC
jz5 MATSUE
AWS で VDI / DaaS っぽいものを作ってみた
AWS で VDI / DaaS っぽいものを作ってみた
Hideaki Aoyagi
XPagesDay 2014 - What's new in XPages NOW!
XPagesDay 2014 - What's new in XPages NOW!
Atsushi Sato
キャッチアップJavaScriptビルド -ビルドから見るJSの今/2016春
キャッチアップJavaScriptビルド -ビルドから見るJSの今/2016春
Kondo Hitoshi
Vagrantと網元で開発環境を作ってみよう
Vagrantと網元で開発環境を作ってみよう
Takuma Morikawa
仮想マシンを使った開発環境の簡単共有方法
仮想マシンを使った開発環境の簡単共有方法
Hideo Takahashi
VIOPS10: DMM.comのインフラのこれから
VIOPS10: DMM.comのインフラのこれから
VIOPS Virtualized Infrastructure Operators group ARCHIVES
a-blog cmsのインポート機能を使いこなす
a-blog cmsのインポート機能を使いこなす
Seiko Kuchida
Aspnet mvc 6の今を紹介
Aspnet mvc 6の今を紹介
Makoto Nishimura
XPagesDay 2014【B 1】最新のモバイル ui を瞬時に作成 〜x controlsのご紹介〜
XPagesDay 2014【B 1】最新のモバイル ui を瞬時に作成 〜x controlsのご紹介〜
Mitsuru Katoh
20021007
20021007
小野 修司
Microsoft loves PHP WebMatrix + Windows Azure
Microsoft loves PHP WebMatrix + Windows Azure
Takeshi Shinmura
More Related Content
What's hot
はじめてのUser-Agent文字列
はじめてのUser-Agent文字列
Kenta USAMI
WordPress 環境の構築について考えてみた
WordPress 環境の構築について考えてみた
Tadashi Miyazato
X pages day発表_20141118 final
X pages day発表_20141118 final
Fumiko Yamamoto
a-sap10「モジュールIDを理解する」
a-sap10「モジュールIDを理解する」
Seiko Kuchida
XpagesDay 2014 [A-2] スタンダードクライアントで xpages を使ってみよう
XpagesDay 2014 [A-2] スタンダードクライアントで xpages を使ってみよう
Takeshi Yoshida
後期講座05
後期講座05
Takenori Nakagawa
Hands on PhotoBlog App with WordPress REST API and App Inventor
Hands on PhotoBlog App with WordPress REST API and App Inventor
Hong Chen
C# CloudScript Azure Functions との連携
C# CloudScript Azure Functions との連携
YutoNishine
WordPress アカンパターン
WordPress アカンパターン
Kazue Igarashi
株式会社インタースペース 沖本様 登壇資料
株式会社インタースペース 沖本様 登壇資料
leverages_event
はじめての ASP.NET MVC
はじめての ASP.NET MVC
jz5 MATSUE
AWS で VDI / DaaS っぽいものを作ってみた
AWS で VDI / DaaS っぽいものを作ってみた
Hideaki Aoyagi
XPagesDay 2014 - What's new in XPages NOW!
XPagesDay 2014 - What's new in XPages NOW!
Atsushi Sato
キャッチアップJavaScriptビルド -ビルドから見るJSの今/2016春
キャッチアップJavaScriptビルド -ビルドから見るJSの今/2016春
Kondo Hitoshi
Vagrantと網元で開発環境を作ってみよう
Vagrantと網元で開発環境を作ってみよう
Takuma Morikawa
仮想マシンを使った開発環境の簡単共有方法
仮想マシンを使った開発環境の簡単共有方法
Hideo Takahashi
VIOPS10: DMM.comのインフラのこれから
VIOPS10: DMM.comのインフラのこれから
VIOPS Virtualized Infrastructure Operators group ARCHIVES
a-blog cmsのインポート機能を使いこなす
a-blog cmsのインポート機能を使いこなす
Seiko Kuchida
Aspnet mvc 6の今を紹介
Aspnet mvc 6の今を紹介
Makoto Nishimura
XPagesDay 2014【B 1】最新のモバイル ui を瞬時に作成 〜x controlsのご紹介〜
XPagesDay 2014【B 1】最新のモバイル ui を瞬時に作成 〜x controlsのご紹介〜
Mitsuru Katoh
What's hot
(20)
はじめてのUser-Agent文字列
はじめてのUser-Agent文字列
WordPress 環境の構築について考えてみた
WordPress 環境の構築について考えてみた
X pages day発表_20141118 final
X pages day発表_20141118 final
a-sap10「モジュールIDを理解する」
a-sap10「モジュールIDを理解する」
XpagesDay 2014 [A-2] スタンダードクライアントで xpages を使ってみよう
XpagesDay 2014 [A-2] スタンダードクライアントで xpages を使ってみよう
後期講座05
後期講座05
Hands on PhotoBlog App with WordPress REST API and App Inventor
Hands on PhotoBlog App with WordPress REST API and App Inventor
C# CloudScript Azure Functions との連携
C# CloudScript Azure Functions との連携
WordPress アカンパターン
WordPress アカンパターン
株式会社インタースペース 沖本様 登壇資料
株式会社インタースペース 沖本様 登壇資料
はじめての ASP.NET MVC
はじめての ASP.NET MVC
AWS で VDI / DaaS っぽいものを作ってみた
AWS で VDI / DaaS っぽいものを作ってみた
XPagesDay 2014 - What's new in XPages NOW!
XPagesDay 2014 - What's new in XPages NOW!
キャッチアップJavaScriptビルド -ビルドから見るJSの今/2016春
キャッチアップJavaScriptビルド -ビルドから見るJSの今/2016春
Vagrantと網元で開発環境を作ってみよう
Vagrantと網元で開発環境を作ってみよう
仮想マシンを使った開発環境の簡単共有方法
仮想マシンを使った開発環境の簡単共有方法
VIOPS10: DMM.comのインフラのこれから
VIOPS10: DMM.comのインフラのこれから
a-blog cmsのインポート機能を使いこなす
a-blog cmsのインポート機能を使いこなす
Aspnet mvc 6の今を紹介
Aspnet mvc 6の今を紹介
XPagesDay 2014【B 1】最新のモバイル ui を瞬時に作成 〜x controlsのご紹介〜
XPagesDay 2014【B 1】最新のモバイル ui を瞬時に作成 〜x controlsのご紹介〜
Similar to WebAssembly text format で画像処理を書くぞ
20021007
20021007
小野 修司
Microsoft loves PHP WebMatrix + Windows Azure
Microsoft loves PHP WebMatrix + Windows Azure
Takeshi Shinmura
My portfolio
My portfolio
ssuserc2210b
Asp.netとbluemixで遊んでみたお話
Asp.netとbluemixで遊んでみたお話
Kazunori Hamamoto
Computer Vision と Translator Text API 使ってみた
Computer Vision と Translator Text API 使ってみた
Yoshito Tabuchi
サーバーサイド技術者不足に効くChef
サーバーサイド技術者不足に効くChef
Maho Takara
とあるメーカーのRedmine活用事例
とあるメーカーのRedmine活用事例
Shinji Tamura
Xamarin de:code セッション:Windows Phone / iOS / Android アプリ同時開発のススメ
Xamarin de:code セッション:Windows Phone / iOS / Android アプリ同時開発のススメ
Yoshito Tabuchi
.NET の過去、現在、そして未来
.NET の過去、現在、そして未来
Akira Inoue
【XP祭り2010】 ライトニングトークス 「マイクロソフトとアジャイル
【XP祭り2010】 ライトニングトークス 「マイクロソフトとアジャイル
智治 長沢
かんたんCMS Picoについて
かんたんCMS Picoについて
高見 知英
20010127
20010127
小野 修司
クラウドAPIを利用した開発について ~ セルフポータル、ストレージサービス、Infrastructure as a code ~
クラウドAPIを利用した開発について ~ セルフポータル、ストレージサービス、Infrastructure as a code ~
Kimihiko Kitase
初めてのWebプログラミング講座
初めてのWebプログラミング講座
DIVE INTO CODE Corp.
MTセミナー2011/2/21 アイデアマンズ株式会社
MTセミナー2011/2/21 アイデアマンズ株式会社
Kunihiko Miyanaga
baserCMSのstripe連携プラグインを作った話
baserCMSのstripe連携プラグインを作った話
Tatsuhiko Uchiba
イノベート・ハブ九州 Bluemix勉強会(第2回)
イノベート・ハブ九州 Bluemix勉強会(第2回)
Atsumori Sasaki
2017年のセキュリティ 傾向と対策講座
2017年のセキュリティ 傾向と対策講座
NHN テコラス株式会社
ネットワーク分散型フレームワークConView
ネットワーク分散型フレームワークConView
Rakuten Group, Inc.
マークアップエンジニアと情報アーキテクチャ
マークアップエンジニアと情報アーキテクチャ
力也 伊原
Similar to WebAssembly text format で画像処理を書くぞ
(20)
20021007
20021007
Microsoft loves PHP WebMatrix + Windows Azure
Microsoft loves PHP WebMatrix + Windows Azure
My portfolio
My portfolio
Asp.netとbluemixで遊んでみたお話
Asp.netとbluemixで遊んでみたお話
Computer Vision と Translator Text API 使ってみた
Computer Vision と Translator Text API 使ってみた
サーバーサイド技術者不足に効くChef
サーバーサイド技術者不足に効くChef
とあるメーカーのRedmine活用事例
とあるメーカーのRedmine活用事例
Xamarin de:code セッション:Windows Phone / iOS / Android アプリ同時開発のススメ
Xamarin de:code セッション:Windows Phone / iOS / Android アプリ同時開発のススメ
.NET の過去、現在、そして未来
.NET の過去、現在、そして未来
【XP祭り2010】 ライトニングトークス 「マイクロソフトとアジャイル
【XP祭り2010】 ライトニングトークス 「マイクロソフトとアジャイル
かんたんCMS Picoについて
かんたんCMS Picoについて
20010127
20010127
クラウドAPIを利用した開発について ~ セルフポータル、ストレージサービス、Infrastructure as a code ~
クラウドAPIを利用した開発について ~ セルフポータル、ストレージサービス、Infrastructure as a code ~
初めてのWebプログラミング講座
初めてのWebプログラミング講座
MTセミナー2011/2/21 アイデアマンズ株式会社
MTセミナー2011/2/21 アイデアマンズ株式会社
baserCMSのstripe連携プラグインを作った話
baserCMSのstripe連携プラグインを作った話
イノベート・ハブ九州 Bluemix勉強会(第2回)
イノベート・ハブ九州 Bluemix勉強会(第2回)
2017年のセキュリティ 傾向と対策講座
2017年のセキュリティ 傾向と対策講座
ネットワーク分散型フレームワークConView
ネットワーク分散型フレームワークConView
マークアップエンジニアと情報アーキテクチャ
マークアップエンジニアと情報アーキテクチャ
WebAssembly text format で画像処理を書くぞ
1.
WebAssembly text format で画像処理を書くぞ 2018.3.8 @UIT#2
2.
@kawasako3 かわさこ LINE株式会社 UIT室 Front-end Standardization
チーム 開発者がLINE Platformならではの問題や手間を意識せずに シームレスに開発を行える環境を社内外に提供すること 要するに 開発基盤づくりとか イベント企画とか 去年まではNEWSサービス開発やっていた 趣味はボードゲームとか
3.
#divisionfm @kitak氏とpodcastをゆるゆるやっています
4.
今日のお題
5.
…の前に WebAssembly text format
っ て何? wasmってなんかEmscriptenとかでC言語からコンパイルするんじゃないの?
6.
人間がWebAssemblyを読んだり編集するための wasmバイナリ形式のテキスト表現 例えば関数はこんな風に書ける (func (param i32)
(param i32) (result i32) …) clang > wasm binary > wast の変換も可能
7.
きっとすごいはやいんだろうな (想像) 普段のWeb開発では使わないけど ブラウザで画像とか映像処理したら楽しそう
8.
改めて今日のお題
9.
PSなしで背景付きの画像を 透過したい
10.
というのが 意外と面倒くさい
11.
単色塗りつぶし
12.
まあこうなる
13.
近い色を塗りつぶし
14.
さっきよりはきれい
15.
境界をぼかす
16.
きれい
17.
ちゃんとやると 結構色々やらないといけない
18.
自動選択ツールっぽいものを Webで実装するぞ (せっかくだからWebAssemblyを使ってみよう)
19.
画像データのおさらい [255, 255, 255,
255, 0, 0, 0, 255, ..] 1px #ffffff 透明度100% 1px #000000 透明度100% 画像データは一次元配列で表せる (Uint8ClampedArray) 1byte毎にピクセルのRGBA情報が入っている
20.
画像データのおさらい ■■■■■■■■■■■■■■■■■■ ■■■■■■■■■■■■■■■■■■ ■■■■■■■■■■■■■■■■■■ ■■■■■■■■■■■■■■■■■■ ■■■■■■■■■■■■■■■■■■ Width * 4
(1px 4byte) H 18番目 0番目 横幅18pxの画像データ
21.
隣接ピクセルだけを どう処理するか
22.
Flood-fill ペイントのバケツツール等で 使われているアルゴリズム
23.
Flood-fill 選択されたピクセル■から処理を始める ■■■■■■■■■■■□■■■■■■ ■■■■■■■■■■■□■■■■■■ ■■■■■■■■■■■□■■■■■■ ■■■■■■■■■■■□■■■■■■ ■■■■■■■■■■■□■■■■■■ 境界線
24.
Flood-fill 隣り合うピクセル■が同一色であるかどうか調べる ■■■■■■■■■■■□■■■■■■ ■■■■■■■■■■■□■■■■■■ ■■■■■■■■■■■□■■■■■■ ■■■■■■■■■■■□■■■■■■ ■■■■■■■■■■■□■■■■■■
25.
Flood-fill 同色だったピクセルを起点に同じ処理を繰り返す ■■■■■■■■■■■□■■■■■■ ■■■■■■■■■■■□■■■■■■ ■■■■■■■■■■■□■■■■■■ ■■■■■■■■■■■□■■■■■■ ■■■■■■■■■■■□■■■■■■
26.
Flood-fill 違う色のピクセル□はそれ以上処理しない ■■■■■■■■■■■□■■■■■■ ■■■■■■■■■■■□■■■■■■ ■■■■■■■■■■■□■■■■■■ ■■■■■■■■■■■□■■■■■■ ■■■■■■■■■■■□■■■■■■
27.
Flood-fill 繰り返せる限り処理する ■■■■■■■■■■■□■■■■■■ ■■■■■■■■■■■□■■■■■■ ■■■■■■■■■■■□■■■■■■ ■■■■■■■■■■■□■■■■■■ ■■■■■■■■■■■□■■■■■■
28.
Flood-fill 繰り返せる限り処理する ■■■■■■■■■■■□■■■■■■ ■■■■■■■■■■■□■■■■■■ ■■■■■■■■■■■□■■■■■■ ■■■■■■■■■■■□■■■■■■ ■■■■■■■■■■■□■■■■■■
29.
Flood-fill 繰り返せる限り処理する ■■■■■■■■■■■□■■■■■■ ■■■■■■■■■■■□■■■■■■ ■■■■■■■■■■■□■■■■■■ ■■■■■■■■■■■□■■■■■■ ■■■■■■■■■■■□■■■■■■
30.
Flood-fill 塗りつぶし完了 ■■■■■■■■■■■□■■■■■■ ■■■■■■■■■■■□■■■■■■ ■■■■■■■■■■■□■■■■■■ ■■■■■■■■■■■□■■■■■■ ■■■■■■■■■■■□■■■■■■
31.
とりあえずJSで書く
32.
愚直に書くとこうなる 再帰的に処理する
33.
–Google Chrome “Uncaught RangeError:
Maximum call stack size exceeded”
34.
640*480の画像でも 最大307200回ループする
35.
Flood-fill take2 周囲のピクセル■■■■をQueueに詰める ■■■■■■■■■■■□■■■■■■ ■■■■■■■■■■■□■■■■■■ ■■■■■■■■■■■□■■■■■■ ■■■■■■■■■■■□■■■■■■ ■■■■■■■■■■■□■■■■■■ Queue: ■■■■
36.
Flood-fill take2 Queueからひとつだけ■取り出して処理する ■■■■■■■■■■■□■■■■■■ ■■■■■■■■■■■□■■■■■■ ■■■■■■■■■■■□■■■■■■ ■■■■■■■■■■■□■■■■■■ ■■■■■■■■■■■□■■■■■■ Queue: ■■■
37.
Flood-fill take2 Queueに周囲のピクセル■■■を格納する Queue: ■■■■■■ ■■■■■■■■■■■□■■■■■■ ■■■■■■■■■■■□■■■■■■ ■■■■■■■■■■■□■■■■■■ ■■■■■■■■■■■□■■■■■■ ■■■■■■■■■■■□■■■■■■
38.
Flood-fill take2 Queue: ■■■■■ ■■■■■■■■■■■□■■■■■■ ■■■■■■■■■■■□■■■■■■ ■■■■■■■■■■■□■■■■■■ ■■■■■■■■■■■□■■■■■■ ■■■■■■■■■■■□■■■■■■ Queueからひとつだけ■取り出して処理する
39.
40.
わかったこと
41.
あっ すごいはやい
42.
WebAssembly text format で画像処理を書くぞ 2018.3.8 @UIT#2 企画倒れ
43.
うるせえ オーバーエンジニアリング だ
44.
オラァ!セイヤ!! (気合いで書いた)
45.
• 直接扱えるデータは64bitまでの数値だけ • ADD,
SUB, MUL, DIV とbit演算で頑張る • メモリは線形メモリひとつで頑張る • wat2wasmでコンパイルして頑張る 文法はたぶんここを見て頑張るしかない https://github.com/WebAssembly/spec/blob/master/interpreter/README.md#s-expression-syntax 抑えておきたいところ
46.
Wast文法をちょっと解説 (スタックマシンについて) これはどちらも return a
+ b;
47.
Wast文法をちょっと解説 (local変数について) var i =
1
48.
Wast文法をちょっと解説 (if文について) if (1 >
0) { ... } else { ... }
49.
Wast文法をちょっと解説 (loop文について) for (var i
= 0; i < len; i++) { ... } br_ifはifを満たせばbreakするという意味なので jsと逆になるところに注意
50.
Arrayを扱うには? WebAssembly.Memoryを利用する JSからはTypedArrayとして見えるので 普通に操作できる
51.
Arrayを扱うには? Wasm側からメモリの0番目に読み書きする場合
52.
それはそうと 結局どうだったのか
53.
おー すごいはやい
54.
大きな画像でやると顕著 wasm: 299ms -
js: 909ms
55.
応用してみる
56.
リアルタイム画像処理デモ
57.
• JS思ったよりはやい • Wastを書くのはそこまで大変じゃない •
適材適所 純粋な計算処理はJSより3倍早い • 色々できることはありそう!アイデアがあ れば懇親会で是非話しましょう! もっと詳しく知りたければMDNがおすすめ 結論
58.
ありがとうございました!
Download now