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.

SIMD.js(ECMAScript 7)

3,697 views

Published on

SIMD.jsという、JavaScriptからSIMDを扱うためのAPIについて、ほんの少しだけご紹介。

Published in: Technology
  • Be the first to comment

SIMD.js(ECMAScript 7)

  1. 1. HTML5とか勉強会#60 2015年09月29日 ECMAScript 7 - SIMD.js -
  2. 2. ふろしき ふろしきです。先月にNTTを卒業して、某お絵かき系サービスの中の人になりました!! 東京Web Performance html5j パフォーマンス部 (先月から)ピクシブ株式会社 自己紹介
  3. 3. 「東京Webパフォーマンス」というイベント ピクシブのオフィスでひっそりとやっています Webのパフォーマンスを改善する新しい機能を味見しまくる そんなイベントを不定期で開いています
  4. 4. for文の話をしよう 突然だが…
  5. 5. 普通のfor文による繰り返し、現場ではタブー感が プログラミングの授業で習うfor文。 しかし世の言語は、これを使わせないようにする傾向にあります…なぜでしょう? // 普通のfor文で各データに加算処理 for( var i=0; i<items.length ; i++ ) { items[i].add(count); } 正解… なんだけど?? // イテレーターで各データに加算処理 for( let item of items ) { item.add(count); } なぜ、わざわざ こんな方法が…
  6. 6. パフォーマンスの問題を作ることがある!? 普通のfor文は、場合によってはパフォーマンスに問題を作ることがあります。 ループ文で処理する対象の特性にあった、対策が求められているのです → → array[100000000] 繰り返し 実装がむき出し な処理 iterator 効率よい データストア 繰り返し 実装を隠蔽!! データベースに接続しようが   Generatorだろうが     Immutable.jsだろうが な処理 何を使ったっていい!! API
  7. 7. ループはいつだって辛い 出来る限りループは効率化したい
  8. 8. SIMD というアプローチについて
  9. 9. 例えば、データAとデータBを足した結果をだしたい時、データが2つならカンタン データA データB+
  10. 10. しかしそれが、あるひとかたまりのデータ同士を足し算したいときは? データA[0] データB[0] データA[1] データB[1] データA[2] データB[2] データA[3] データB[3] データA[4] データB[4] + + + + +
  11. 11. ループが避けられない 当然、あの忌々しいループが必要になってしまいます。 データA[0] データA[1] データA[2] データA[3] データA[4] 1回目 加算命令 加算命令 加算命令 加算命令 加算命令 2回目 3回目 4回目 5回目 データB[0] データB[1] データB[2] データB[3] データB[4] + + + + +
  12. 12. SIMDは複数データの加算を1命令で実行!! SIMDでは、2つの大量データ同士の計算について、 通常はループでやるような処理を、一回の命令を実行できるようにしパフォーマンスを改善します 処理 Single Instruction Multi Data データA[0] データA[1] データA[2] データA[3] データA[4] データB[0] データB[1] データB[2] データB[3] データB[4] + + + + +
  13. 13. SIMD.js
  14. 14. SIMD.jsとは? -> part of ECMAScript7 SIMD.jsは、Intelらが中心となり仕様の策定を進めている JavaScriptでSIMDを扱う方法です。ECMAScript7に追加される予定です → Firefox → Edge → WebKit ←Intel(2014年ごろ)
  15. 15. SIMDはCPUの機能、それをJSのAPIから触る 厳密には複数のデータ領域を一回の命令で操作できるというCPUの機能で、 JSでラップされたAPIを経由して扱います データ[0] データ[1] データ[2] データ[3] データ[4] メモリ CPU ユーザーランド JavaScript による処理 ブラウザ JavaScript API CPU/メモリの 低級な仕組みに バイパス 高級な APIによる ラップ
  16. 16. デメリット あらかじめ準備された命令しか使えないため、やや柔軟性に欠けますが…、ハマれば高速です データ[0] データ[1] データ[2] データ[3] データ[4] メモリ CPU 加算 減算 コピー XORShift なんでもできるわけじゃない… ループ文を置き換えれるなんて そんなカンタンなものじゃない!!
  17. 17. Get Start
  18. 18. データ領域の確保 メモリ上から、SIMDに適したデータ領域を確保し初期化します 1.0 2.0 3.0 4.0 5.0 6.0 7.0 8.0 hoge fuga var hoge = SIMD.Float32x4(1.0,2.0,3.0,4.0); var fuga = SIMD.Float32x4(5.0,6.0,7.0,8.0);
  19. 19. 計算する 計算して結果を格納します var piyo = SIMD.Float32x4.add(hoge,fuga); 1.0 2.0 3.0 4.0 5.0 6.0 7.0 8.0 hoge fuga 6.0 8.0 10.0 12.0 piyo
  20. 20. 出力する 結果を出力します var foo = SIMD.Float32x4.extractLane(piyo,0); 6.0 8.0 10.0 12.0 piyo 6.0 foo
  21. 21. 出力する 結果を出力します SIMD.Float32x4.extractLane(piyo,0); 6.0 8.0 10.0 12.0 piyo 6.0 DEMO
  22. 22. もう少しだけ実用的に
  23. 23. waifu2xのJS実装を改善 画像を拡大した時のあのギザギザ感をなくし シャープにみせるとあるアルゴリズムをSIMDで改善します!! 拡大 waifu2x
  24. 24. waifu2xのJS実装を改善 画像を拡大した時のあのギザギザ感をなくし シャープにみせるとあるアルゴリズムをSIMDで改善します!! 拡大 waifu2x DEMO
  25. 25. http://inside.pixiv.net/entry/2015/07/28/230317 今回やったデモの内容は、こちらに詳細があります!!
  26. 26. まとめ
  27. 27. まとめ ブラウザ上でも、二次元画像みたいなバイナリを効率的に処理する術が増えてて嬉しいです ・WebAssemblyと同じ文脈で語られる  パフォーマンス改善技術。 ・大量のデータ同士の計算を  ループ文無しでさせることができる。 ・CPUのSIMD命令を、JavaScript APIから  扱うことができる。 ・ぶっちゃけ人間が使うやつじゃないですね!
  28. 28. Thank You! @_ furoshiki

×