emscriptenでC/C++プログラムをwebブラウザから使うまでの難所攻略
28 likes17,753 views
CMU #29の発表資料です。 emscriptenを利用して、C/C++アプリをHTML化する具体的な手法についてです。
![Hello world
// emscriptenのヘッダファイル
#include <emscripten.h>
int main(int argc, char* argv[]) {
printf("hello world.”);
return 0;
}
hello.c
$ emcc hello.c -o hello.html console
hello.html hello.js](https://image.slidesharecdn.com/cmu29-150620091725-lva1-app6891/85/emscripten-C-C-web-13-320.jpg)
![ループを作る
main内で無限ループを回すとブラウザへ処理が戻らない
普通のJavaScriptであればsetTimeout
emscripten_set_main_loop(<関数>, <FPS>, true);を利用
#include <emscripten.h>
void main_loop() {
// メイン処理をココに
}
int main(int argc, char* argv[]) {
// 初期化処理とか
// メインループを登録
emscripten_set_main_loop(main_loop, 0, true);
return 0;
}
C/C++](https://image.slidesharecdn.com/cmu29-150620091725-lva1-app6891/85/emscripten-C-C-web-21-320.jpg)
![emscriptenとネイティブ
でコードを切り替える
#include <emscripten.h>
void main_loop() {
// メイン処理をココに
}
int main(int argc, char* argv[]) {
// 初期化処理とか
#ifdef EMSCRIPTEN
// メインループを登録
emscripten_set_main_loop(main_loop, 0, true);
#else
// メインループを呼び出し
while(true) main_loop();
#endif
return 0;
}
C/C++
emscriptenでコンパイルする場合、EMSCRIPTENが
定義される](https://image.slidesharecdn.com/cmu29-150620091725-lva1-app6891/85/emscripten-C-C-web-22-320.jpg)
![ポインタ
ポインタ = 先頭からのインデックスと考えればOK
ポインタはembindで変換されないのでunsigned intにキャスト
int value1 = 1192; // 0x04a8
short value2 = 758; // 0x02f6
char value3 = -1; // 0xff
char value4 = 99; // 0x63
return (unsigned int)(&value1); // unsigned int getptr();
C/C++
a8 04 00 00 f6 02 ff 63
JavaScriptfor (int i = 0; i < 8; i ++) {
console.log(Module.HEAPU8[Module.getptr() + i]);
}
…… … …](https://image.slidesharecdn.com/cmu29-150620091725-lva1-app6891/85/emscripten-C-C-web-29-320.jpg)
![for (int i = 0; i < 2; i ++) {
console.log(Module.HEAPU32[Module.getptr() / 4 + i]);
}
for (int i = 0; i < 4; i ++) {
console.log(Module.HEAPU16[Module.getptr() / 2 + i]);
}
intやshortでアクセス
000004a8 63ff02f6
JavaScript
… …
04a8 0000 02f6 63ff
JavaScript
… …
a8 04 00 00 f6 02 ff 63…… … …](https://image.slidesharecdn.com/cmu29-150620091725-lva1-app6891/85/emscripten-C-C-web-30-320.jpg)
![console.log(Pointer_stringify(Module.getptr()));
文字列
C/C++からJavaScriptで文字列を授受するときはポインタを使う場合が
多い
Pointer_stringify(<ポインタ>[, <長さ>]);を使って文字列を取り出す
JavaScriptからC/C++へ文字列を渡す場合、引数の型をstd::stringにし
ておくとemscriptenで変換される
unsigned int getptr() {
char* str = "hello world!";
return (unsigned int)(&str);
}
C/C++
JavaScript](https://image.slidesharecdn.com/cmu29-150620091725-lva1-app6891/85/emscripten-C-C-web-32-320.jpg)
emscriptenでC/C++プログラムをwebブラウザから使うまでの難所攻略
- 2. 自己紹介 伊藤 祐司 バックエンドの設計 開発 フレームワークの作成 バイナリ・テキスト変換 クローラー アルゴリズム 仮想マシン 下北沢OSSカフェでPROCESS WARPというシステムを作っています http://www.processwarp.org/ GitHub llamerada-jp facebook ito.yuuji blog http://llamerad-jp.hatenablog.com/
- 6. http://emscripten.org/ C/C++からJavaScriptへのコンパイル(コンバート)を行 うアプリケーション C/C++のコードをLLVM IR経由でJavaScriptへ変換 標準C/C++ライブラリ, POSIX, SDL, OpenGLが使える C/C++でブラウザアプリケーションが作れる！ Alon Zakai (kripken)
- 7. LLVM http://llvm.org/ コンパイラ基盤、コンパイラの共通機能(最適化など)をパッケージ 化したもの clang C/C++/Objective-C/swiftコンパイラ LLILC .netからの変換 by Microsoft https://github.com/dotnet/llilc その他、gnuコンパイラをフロントエンドとし多数の言語を処理可能 Fortran, Ada, Go http://dragonegg.llvm.org 開発が非常に活発 Chris Lattner
- 12. インストール方法 LinuxやOSXではPortable SDKを使うのが一番良い renv, nodebrewのように複数バージョンを依存アプリ (clang, node.js)込みでよしなに管理してくれる https://kripken.github.io/emscripten-site/docs/ getting_started/downloads.html $ tar vzxf emsdk-protable.tar.gz $ cd emsdk_portable $ ./emsdk install latest $ ./emsdk activate latest $ source emsdk_env.sh 実行前に環境変数を設定 デフォルトのコンパイラがemsdk のインストールしたclangになる console
- 13. Hello world // emscriptenのヘッダファイル #include <emscripten.h> int main(int argc, char* argv[]) { printf("hello world.”); return 0; } hello.c $ emcc hello.c -o hello.html console hello.html hello.js
- 14. こんにちわ
- 16. こんにちわ
- 17. 見た目を変える emsdk/emscripten/<バージョン>/src/ shell_minimal.html をもとにHTMLをカスタム $ emcc hello.c --shell-file custom.html -o hello.html console
- 19. HTMLの生成をやめる デザイン変更のたびにコンパイルするのは面倒 <script async type="text/javascript" src="hello.js">とModuleがあればHTMLは直接 編集したい $ emcc hello.c -o hello.js console hello.js
- 21. ループを作る main内で無限ループを回すとブラウザへ処理が戻らない 普通のJavaScriptであればsetTimeout emscripten_set_main_loop(<関数>, <FPS>, true);を利用 #include <emscripten.h> void main_loop() { // メイン処理をココに } int main(int argc, char* argv[]) { // 初期化処理とか // メインループを登録 emscripten_set_main_loop(main_loop, 0, true); return 0; } C/C++
- 22. emscriptenとネイティブ でコードを切り替える #include <emscripten.h> void main_loop() { // メイン処理をココに } int main(int argc, char* argv[]) { // 初期化処理とか #ifdef EMSCRIPTEN // メインループを登録 emscripten_set_main_loop(main_loop, 0, true); #else // メインループを呼び出し while(true) main_loop(); #endif return 0; } C/C++ emscriptenでコンパイルする場合、EMSCRIPTENが 定義される
- 23. C/C++からJavaScriptを 呼び出す インラインアセンブラはJavaScriptとして実行される (固定機能) void emscripten_run_script(<JavaScript>);で渡した 文字列をJavaScriptとして実行 JavaScriptのeval();のような動作 int emscripten_run_script_int(); std::string emscripten_run_script_string(); int r = emscripten_run_script_int("screen.width"); C/C++
- 24. JavaScriptから C/C++関数を呼び出す embind機能でJavaScriptから呼び出す関数を指定しておく 引数、戻り値は変換される(※構造体はNG) https://kripken.github.io/emscripten-site/docs/ porting/connecting_cpp_and_javascript/ embind.html#built-in-type-conversions #include <math.h> #include <emscripten.h> #include <emscripten/bind.h> // ヘッダ using namespace emscripten; // 名前空間 double _pow(double a, int b) { return pow(a, b); } EMSCRIPTEN_BINDINGS(mod) { function("c_pow", &_pow); // Module.c_pow(); } sample.cpp
- 25. JavaScriptから C/C++関数を呼び出す sample.jsが読み込まれた後から利用可能になるので、 onloadの中などでは利用できない コンパイルオプションに-s EXPORT_ALL=1を指定すると 全ての関数がexportされるがjsファイルが巨大になる $ em++ sample.cpp --bind -o sample.js console var p = Module.c_pow(3.14, 2); JavaScript
- 26. Makefileの利用 emcmake, emconfigure, emmakeを利用すると、普通のアプリ ケーションをemscriptenでコンパイルできる 未対応のライブラリに依存していたりすると上手く動かない CC, CXX, 他の環境変数などをemscripten用に書き換えている $ ememake cmake . $ emconfigure configure $ emmake make console
- 28. int value1 = 1192; // 0x04a8 short value2 = 758; // 0x02f6 char value3 = -1; // 0xff char value4 = 99; // 0x63 メモリ空間 emscriptenでは、C/C++の変数をArrayBufferで作った擬似 的なメモリ空間に保存している Module.HEAPU8などDataViewでアクセスできる ビッグエンディアン C/C++ 00 00 04 a8 02 f6 ff 63 Memory …… … …
- 29. ポインタ ポインタ = 先頭からのインデックスと考えればOK ポインタはembindで変換されないのでunsigned intにキャスト int value1 = 1192; // 0x04a8 short value2 = 758; // 0x02f6 char value3 = -1; // 0xff char value4 = 99; // 0x63 return (unsigned int)(&value1); // unsigned int getptr(); C/C++ a8 04 00 00 f6 02 ff 63 JavaScriptfor (int i = 0; i < 8; i ++) { console.log(Module.HEAPU8[Module.getptr() + i]); } …… … …
- 30. for (int i = 0; i < 2; i ++) { console.log(Module.HEAPU32[Module.getptr() / 4 + i]); } for (int i = 0; i < 4; i ++) { console.log(Module.HEAPU16[Module.getptr() / 2 + i]); } intやshortでアクセス 000004a8 63ff02f6 JavaScript … … 04a8 0000 02f6 63ff JavaScript … … a8 04 00 00 f6 02 ff 63…… … …
- 31. もっと簡単にポインタ Module.getValue(<ポインタ>, <型>); Module.setValue(<ポインタ>, <値>, <型>); JavaScript var v = Module.getValue(Module.getptr(), 'i32'); Module.setValue(Module.getptr(), v + 1, 'i32');
- 32. console.log(Pointer_stringify(Module.getptr())); 文字列 C/C++からJavaScriptで文字列を授受するときはポインタを使う場合が 多い Pointer_stringify(<ポインタ>[, <長さ>]);を使って文字列を取り出す JavaScriptからC/C++へ文字列を渡す場合、引数の型をstd::stringにし ておくとemscriptenで変換される unsigned int getptr() { char* str = "hello world!"; return (unsigned int)(&str); } C/C++ JavaScript
- 34. 以上 ありがとうございました