13
“実戦”Emscripten ushiroad Practical Emscripten 12124日火曜日

Practical Emscripten - Mozilla Vision 2012

Embed Size (px)

Citation preview

Page 1: Practical Emscripten - Mozilla Vision 2012

“実戦”Emscripten

ushiroad

Practical Emscripten

12年1月24日火曜日

Page 2: Practical Emscripten - Mozilla Vision 2012

Whats’s Emscripten?

⬆ Alon Zakaiさん

既存のC/C++資産をWebに持ち込む“銀の弾丸”

on Mozilla Mobile Team

0:20

(大部分の)作者

http://emscripten.org/

12年1月24日火曜日

Page 3: Practical Emscripten - Mozilla Vision 2012

Whats’s Emscripten?

LLVM to Javascript Compiler

•LLVMの命令をJSでシミュレートする•“人間的な”移植作業を自動化するのはさすがに難しい•当然、オーバーヘッドが出てくる(短所)•解析部分は“本物の”Cコンパイラを使える(長所)

clangC code

int main(){ ..........}

LLVM bitcode

load

icmp

Javascript

$1 = HEAP[$2];

$3 = $1 < $4;

0:50

結果としてC/C++コードを移植できる

12年1月24日火曜日

Page 4: Practical Emscripten - Mozilla Vision 2012

Emscripten DOES NOT

#include <stdio.h>#include <stdlib.h>

int main() { int i; char* buf = " Hello!"; for (i = 0;i < 10;i++) { puts(buf + (9-i)); }

return 0;}

function main() { var i; var buf = " Hello!"; for (i = 0;i < 10;i++) { puts(buf.substring(9-i)); }

return 0;}

12年1月24日火曜日

Page 5: Practical Emscripten - Mozilla Vision 2012

But……function _main() { var __label__; __label__ = -1; while(1) switch(__label__) { case -1: // $0 var $1; var $i; var $buf; $1=0; $buf=((__str)|0); $i=0; __label__ = 1; break; case 1: // $2 var $3=$i; var $4=((($3))|0) < 10; if ($4) { __label__ = 2; break; } else { __label__ = 4; break; } case 2: // $5

::

case 3: // $11 var $12=$i; var $13=((($12)+1)|0); $i=$13;

for (i = 0; i < 10; i++)

ちなみにメモリ、ポインタは配列でシミュレート12年1月24日火曜日

Page 6: Practical Emscripten - Mozilla Vision 2012

パフォーマンス

Test program30600点の座標変換、照明計算 Vector × Matrix Vector・Vector

実用的な速さで動くの?

JS “Native”

C ➡ JS

VS

1:40

12年1月24日火曜日

Page 7: Practical Emscripten - Mozilla Vision 2012

パフォーマンス

0ms

15ms

30ms

45ms

60ms

Chrome 16 Firefox 10

JS Emscripten

faster

12年1月24日火曜日

Page 8: Practical Emscripten - Mozilla Vision 2012

パフォーマンス

0ms

175ms

350ms

525ms

700ms

Chrome 16 Firefox 10 Firefox 2.0

JS Emscripten

⬇ 少し昔のJavascriptよりは格段に速い

JITなしの頃は……

12年1月24日火曜日

Page 9: Practical Emscripten - Mozilla Vision 2012

まとめ: Emscripten を使うべきか?

対価: 実行速度(手書きより数倍遅くなる)

得られるもの: 莫大な移植作業の時間 ➡ 一瞬

数倍の高速化のために莫大な時間を支払って手書きする?(もちろん、そちらを選択すべき場合もある)

判断のポイント

12年1月24日火曜日

Page 10: Practical Emscripten - Mozilla Vision 2012

Demo

JSViz名前が被ってるのでそのうち変えます

http://ushiroad.com/jsviz/

12年1月24日火曜日

Page 11: Practical Emscripten - Mozilla Vision 2012

Demo

GraphViz

digraph { A -> B -> C; A -> C -> D; A -> D; D -> E -> F -> B;}

12年1月24日火曜日

Page 12: Practical Emscripten - Mozilla Vision 2012

Demo

GraphViz+

Interactive+

Animation

3:00

12年1月24日火曜日

Page 13: Practical Emscripten - Mozilla Vision 2012

!ank y"

ushiroad

http://ushiroad.com/ にEmscriptenのインストール方法等の記事がありますが、Emscripten の変化が激しすぎて既に古くなっているので要注意。LLVMのバージョン、JSエンジンの種類に注意。

12年1月24日火曜日