![Bufferを扱う
heap
x
y
darray
asm.jsモジュール内からのアクセス
asm.jsモジュール外からのアクセス
asm.jsモジュール内外で実体を共有
Heap(ArrayBuffer)をHeap View(TypedArray)を通じて共有する
x[0] === darray[0 >>> 3]
x[1] === darray[8 >>> 3]
…
y[2] === darray[48 >>> 3]
y[3] === darray[56 >>> 3]
int: a[byteOffset >>> 2]
double: a[byteOffset >>> 3]
15](https://image.slidesharecdn.com/20150822grandfrontend-150822021312-lva1-app6892/75/asmjswebassembly-15-2048.jpg?cb=1666756063)
![function Module(stdlib, foreign, heap) {
“use asm”;
var darray = new stdlib.Float64Array(heap);
function daxpy(n, alpha, x, y) {
n = n | 0;
alpha = +alpha;
x = x | 0;
y = y | 0;
var i = 0, pxi = 0, pyi = 0;
for (i = 0, pxi = x, pyi = y; (i | 0) < (n | 0);
i = i + 1 | 0, pxi = pxi + 8 | 0, pyi = pyi + 8 | 0) {
darray[pyi >> 3] = +darray[pyi >> 3] + alpha * darray[pxi >> 3];
}
}
return {
daxpy: daxpy
};
}
var heap = new ArrayBuffer(64), module = Module(window, null, heap);
var x = new Float64Array(heap, 0, 4), y = new Float64Array(heap, 32, 4);
x.set([1.1, 1.2, 1.3, 1.4]);
y.set([1.5, 1.6. 1.7. 1.8]);
module.daxpy(4, 1.1, x.byteOffset, y.byteOffset) 16](https://image.slidesharecdn.com/20150822grandfrontend-150822021312-lva1-app6892/75/asmjswebassembly-16-2048.jpg?cb=1666756063)
asm.jsとWebAssemblyって実際なんなの？
•21 likes•15,161 views
Download to read offline
Report
グランフロントエンド 2015 発表スライド
Recommended
More Related Content
What's hot
What's hot(20)
Similar to asm.jsとWebAssemblyって実際なんなの？
Similar to asm.jsとWebAssemblyって実際なんなの？(20)
More from Yosuke Onoue
More from Yosuke Onoue(19)
Recently uploaded
Recently uploaded(8)
asm.jsとWebAssemblyって実際なんなの？
- 2. 自己紹介 ✤ おのうえ（イカID: y-likr） ✤ ng-kyoto、GDG Kobeスタッフ ✤ 大学院でWebベース可視化システムの研究・開発 ✤ asm.jsでLAPACK移植してみた https://github.com/likr/emlapack 2
- 3. はじめに ✤ HTML5周辺技術の発展によってWebが アプリケーションのプラットフォームとして成熟 ✤ 従来Webでできなかったことが徐々にできるように！ ✤ 機能不足 → DeviceAPI、WebStorage、WebSocket、… ✤ 性能不足 → asm.js、WebWorker、WebGL、… ここの話 3
- 4. 目的 ✤ どれだけ速いみたいな話はあんまりしない ✤ asm.jsに対するイメージと現実のギャップを埋めたい ✤ asm.jsでできること / できないこと ✤ asm.jsのコード 4
- 6. Webアプリの性能とUX ✤ 優れたUXを実現するために必要な性能の指標RAIL ✤ Response - 100ms ✤ Animation - 16ms (60FPS) ✤ Idle - 50ms ✤ Load - 1000ms https://developers.google.com/web/tools/profile-performance/evaluate-performance/rail 6
- 7. フリーランチの終焉 ✤ フロントエンド開発への要求は高まる ✤ ハードウェア、JSエンジンの性能向上の恩恵を知らな いうちに受けていた時代は終わるかもしれない？ ✤ フロントエンドエンジニア(JSプログラマ)が JavaScriptプログラムの速度に負う責任が増す 7
- 8. JavaScript高速化の三本柱 ✤ WebWorker ✤ 処理を並列化する ✤ SIMD.js ✤ データをまとめて処理する ✤ asm.js ✤ 処理速度を上げる 8
- 11. asm.js ✤ 高速実行のために設計されたJavaScriptのサブセット ✤ ネイティブの少なくても半分程度の性能を目標 ✤ Firefox, Chrome, Edge, Node.jsが対応 ✤ C/C++からコンパイル(Emscripten) ゲームエンジンによるサポート(Unreal Engine、Unity) 11
- 12. asm.jsの対象 ✤ 画像、音声、映像の処理 ✤ エンコード、デコード ✤ ゲーム ✤ 科学技術計算、可視化 ✤ … 12
- 13. 何もしない関数 function Module(stdlib, foreign, heap) { “use asm”; function f() { } return { f: f }; } var module = Module(); module.f(); asm.js宣言 関数定義 エクスポート 13
- 14. 単純な計算をする関数 function Module(stdlib, foreign, heap) { “use asm”; var abs = stdlib.Math.abs; function f(a, b) { a = +a; b = +b; var c = 0.0; c = +abs(a) + +abs(b); return c; } return { f: f }; } var module = Module(window); module.f(0.5, -1.2); グローバル変数 引数の型宣言 ローカル変数宣言 Coercion(戻り値の型宣言) int: x | 0 double: +x 14
- 15. Bufferを扱う heap x y darray asm.jsモジュール内からのアクセス asm.jsモジュール外からのアクセス asm.jsモジュール内外で実体を共有 Heap(ArrayBuffer)をHeap View(TypedArray)を通じて共有する x[0] === darray[0 >>> 3] x[1] === darray[8 >>> 3] … y[2] === darray[48 >>> 3] y[3] === darray[56 >>> 3] int: a[byteOffset >>> 2] double: a[byteOffset >>> 3] 15
- 16. function Module(stdlib, foreign, heap) { “use asm”; var darray = new stdlib.Float64Array(heap); function daxpy(n, alpha, x, y) { n = n | 0; alpha = +alpha; x = x | 0; y = y | 0; var i = 0, pxi = 0, pyi = 0; for (i = 0, pxi = x, pyi = y; (i | 0) < (n | 0); i = i + 1 | 0, pxi = pxi + 8 | 0, pyi = pyi + 8 | 0) { darray[pyi >> 3] = +darray[pyi >> 3] + alpha * darray[pxi >> 3]; } } return { daxpy: daxpy }; } var heap = new ArrayBuffer(64), module = Module(window, null, heap); var x = new Float64Array(heap, 0, 4), y = new Float64Array(heap, 32, 4); x.set([1.1, 1.2, 1.3, 1.4]); y.set([1.5, 1.6. 1.7. 1.8]); module.daxpy(4, 1.1, x.byteOffset, y.byteOffset) 16
- 17. asm.jsの不得意なこと ✤ 複雑なデータ構造の操作 ✤ Heap上でデータ構造を表現する コストを回収できるか？ ✤ Web APIの呼び出し ✤ foreign経由でのアクセスのみ 17
- 19. WebAssembly ✤ ブラウザでの実行を想定したバイナリフォーマット ✤ ブラウザベンダー等の協力のもと仕様策定中 ✤ https://github.com/WebAssembly/design ✤ Better asm.js ✤ 初期目標としてasm.jsと同等の機能を実現 19
- 20. WebAssemblyが解決すること function asmModule($a,$b,$c){ 'use asm'; var a=new $a.Int8Array($c); var b=new $a.Uint8Array($c); var c=new $a.Int16Array($c); var d=new $a.Uint16Array($c); var e=new $a.Int32Array($c); var f=new $a.Uint32Array($c); var g=new $a.Float32Array($c); var h=new $a.Float64Array($c); var i=$a.Math.imul; var j=$a.Math.fround; var $d=$a.Math.acos; var $e=$a.Math.asin; var $f=$a.Math.atan; var $g=$a.Math.cos; var $h=$a.Math.sin; var $i=$a.Math.tan; var $j=$a.Math.exp; var $k=$a.Math.log; var $l=$a.Math.ceil; var $m=$a.Math.floor; var $n=$a.Math.sqrt; var $o=$a.Math.abs; var $p=$a.Math.min; var $q=$a.Math.max; var $r=$a.Math.atan2; var $s=$a.Math.pow; var $t=$a.Math.clz32; var $u=$a.NaN; var $v=$a.Infinity; function $w(k,l,m){ k=k|0;l=+l;m=j(m); } function $x(){ } function $y(){ } return {one:$w,two:$x}; } 77 61 73 6d 26 03 00 00 00 00 00 02 03 03 00 02 01 03 00 00 00 00 00 00 00 00 00 03 00 01 01 00 80 00 80 00 80 00 01 02 6f 6e 65 00 00 74 77 6f 00 01 理想 現実コンパイルの オーバーヘッド ファイルサイズの増大 による通信量の増加 asm.js WebAssembly ファイルサイズの縮小 パースの簡略化 減少 増加 20
- 21. asm.jsとの違い ✤ よりWebと馴染むような仕様 ✤ マルチスレッド、SIMDとの統合 ✤ GC、DOM、Web APIの操作 ✤ 様々な言語からの移植性を高める ✤ ブラウザ以外への組み込みも視野 21
- 22. WebAssemblyが変えない未来 ✤ DOMの呪縛からは解放されない ✤ JavaScriptの実行モデルからは大きく変化しない ✤ プログラミング言語のWebAssembly対応は 別CPUへの移植と同程度のコストがかかる （たぶん） 22
- 23. まとめ 23
- 24. まとめ ✤ asm.jsを効果的に使えば、これまでWebでできなかっ た種類のアプリケーションが実現できる ✤ WebAssemblyによる順当な進化に期待 ✤ なんでも速くなる魔法ではないので、 用法用量を守って正しくお使いください 24