Submit Search
Upload
emscriptenでC/C++プログラムをwebブラウザから使うまでの難所攻略
•
28 likes
•
17,512 views
祐司 伊藤
Follow
CMU #29の発表資料です。 emscriptenを利用して、C/C++アプリをHTML化する具体的な手法についてです。
Read less
Read more
Software
Report
Share
Report
Share
1 of 34
Download now
Download to read offline
Recommended
ゲーム開発者のための C++11/C++14
ゲーム開発者のための C++11/C++14
Ryo Suzuki
【Unite Tokyo 2019】Unityだったら簡単!マルチプレイ用ゲームサーバ開発 ~実践編~
【Unite Tokyo 2019】Unityだったら簡単!マルチプレイ用ゲームサーバ開発 ~実践編~
UnityTechnologiesJapan002
ワタシはSingletonがキライだ
ワタシはSingletonがキライだ
Tetsuya Kaneuchi
20分くらいでわかった気分になれるC++20コルーチン
20分くらいでわかった気分になれるC++20コルーチン
yohhoy
コールバックと戦う話
コールバックと戦う話
torisoup
CEDEC 2018 最速のC#の書き方 - C#大統一理論へ向けて性能的課題を払拭する
CEDEC 2018 最速のC#の書き方 - C#大統一理論へ向けて性能的課題を払拭する
Yoshifumi Kawai
ネットワーク ゲームにおけるTCPとUDPの使い分け
ネットワーク ゲームにおけるTCPとUDPの使い分け
モノビット エンジン
C/C++とWebAssemblyを利用したライブラリ開発
C/C++とWebAssemblyを利用したライブラリ開発
祐司 伊藤
Recommended
ゲーム開発者のための C++11/C++14
ゲーム開発者のための C++11/C++14
Ryo Suzuki
【Unite Tokyo 2019】Unityだったら簡単!マルチプレイ用ゲームサーバ開発 ~実践編~
【Unite Tokyo 2019】Unityだったら簡単!マルチプレイ用ゲームサーバ開発 ~実践編~
UnityTechnologiesJapan002
ワタシはSingletonがキライだ
ワタシはSingletonがキライだ
Tetsuya Kaneuchi
20分くらいでわかった気分になれるC++20コルーチン
20分くらいでわかった気分になれるC++20コルーチン
yohhoy
コールバックと戦う話
コールバックと戦う話
torisoup
CEDEC 2018 最速のC#の書き方 - C#大統一理論へ向けて性能的課題を払拭する
CEDEC 2018 最速のC#の書き方 - C#大統一理論へ向けて性能的課題を払拭する
Yoshifumi Kawai
ネットワーク ゲームにおけるTCPとUDPの使い分け
ネットワーク ゲームにおけるTCPとUDPの使い分け
モノビット エンジン
C/C++とWebAssemblyを利用したライブラリ開発
C/C++とWebAssemblyを利用したライブラリ開発
祐司 伊藤
MagicOnion~C#でゲームサーバを開発しよう~
MagicOnion~C#でゲームサーバを開発しよう~
torisoup
画像処理の高性能計算
画像処理の高性能計算
Norishige Fukushima
メタプログラミングって何だろう
メタプログラミングって何だろう
Kota Mizushima
【Unite Tokyo 2018】さては非同期だなオメー!async/await完全に理解しよう
【Unite Tokyo 2018】さては非同期だなオメー!async/await完全に理解しよう
Unity Technologies Japan K.K.
すごい constexpr たのしくレイトレ!
すごい constexpr たのしくレイトレ!
Genya Murakami
C++の話(本当にあった怖い話)
C++の話(本当にあった怖い話)
Yuki Tamura
Unityでパフォーマンスの良いUIを作る為のTips
Unityでパフォーマンスの良いUIを作る為のTips
Unity Technologies Japan K.K.
C#で速度を極めるいろは
C#で速度を極めるいろは
Core Concept Technologies
こわくない Git
こわくない Git
Kota Saito
C# ゲームプログラミングはホントにメモリのことに無頓着でいいの?
C# ゲームプログラミングはホントにメモリのことに無頓着でいいの?
京大 マイコンクラブ
オブジェクト指向エクササイズのススメ
オブジェクト指向エクササイズのススメ
Yoji Kanno
Riderはいいぞ!
Riderはいいぞ!
UnityTechnologiesJapan002
マイクロサービスバックエンドAPIのためのRESTとgRPC
マイクロサービスバックエンドAPIのためのRESTとgRPC
disc99_
カスタムメモリマネージャと高速なメモリアロケータについて
カスタムメモリマネージャと高速なメモリアロケータについて
alwei
Docker Compose 徹底解説
Docker Compose 徹底解説
Masahito Zembutsu
きつねさんでもわかるLlvm読書会 第2回
きつねさんでもわかるLlvm読書会 第2回
Tomoya Kawanishi
Javaのログ出力: 道具と考え方
Javaのログ出力: 道具と考え方
Taku Miyakawa
今日からできる!簡単 .NET 高速化 Tips
今日からできる!簡単 .NET 高速化 Tips
Takaaki Suzuki
C++ マルチスレッドプログラミング
C++ マルチスレッドプログラミング
Kohsuke Yuasa
スマホゲームのチート手法とその対策 [DeNA TechCon 2019]
スマホゲームのチート手法とその対策 [DeNA TechCon 2019]
DeNA
【学習メモ#1st】12ステップで作る組込みOS自作入門
【学習メモ#1st】12ステップで作る組込みOS自作入門
sandai
Power shell で DSL
Power shell で DSL
urasandesu
More Related Content
What's hot
MagicOnion~C#でゲームサーバを開発しよう~
MagicOnion~C#でゲームサーバを開発しよう~
torisoup
画像処理の高性能計算
画像処理の高性能計算
Norishige Fukushima
メタプログラミングって何だろう
メタプログラミングって何だろう
Kota Mizushima
【Unite Tokyo 2018】さては非同期だなオメー!async/await完全に理解しよう
【Unite Tokyo 2018】さては非同期だなオメー!async/await完全に理解しよう
Unity Technologies Japan K.K.
すごい constexpr たのしくレイトレ!
すごい constexpr たのしくレイトレ!
Genya Murakami
C++の話(本当にあった怖い話)
C++の話(本当にあった怖い話)
Yuki Tamura
Unityでパフォーマンスの良いUIを作る為のTips
Unityでパフォーマンスの良いUIを作る為のTips
Unity Technologies Japan K.K.
C#で速度を極めるいろは
C#で速度を極めるいろは
Core Concept Technologies
こわくない Git
こわくない Git
Kota Saito
C# ゲームプログラミングはホントにメモリのことに無頓着でいいの?
C# ゲームプログラミングはホントにメモリのことに無頓着でいいの?
京大 マイコンクラブ
オブジェクト指向エクササイズのススメ
オブジェクト指向エクササイズのススメ
Yoji Kanno
Riderはいいぞ!
Riderはいいぞ!
UnityTechnologiesJapan002
マイクロサービスバックエンドAPIのためのRESTとgRPC
マイクロサービスバックエンドAPIのためのRESTとgRPC
disc99_
カスタムメモリマネージャと高速なメモリアロケータについて
カスタムメモリマネージャと高速なメモリアロケータについて
alwei
Docker Compose 徹底解説
Docker Compose 徹底解説
Masahito Zembutsu
きつねさんでもわかるLlvm読書会 第2回
きつねさんでもわかるLlvm読書会 第2回
Tomoya Kawanishi
Javaのログ出力: 道具と考え方
Javaのログ出力: 道具と考え方
Taku Miyakawa
今日からできる!簡単 .NET 高速化 Tips
今日からできる!簡単 .NET 高速化 Tips
Takaaki Suzuki
C++ マルチスレッドプログラミング
C++ マルチスレッドプログラミング
Kohsuke Yuasa
スマホゲームのチート手法とその対策 [DeNA TechCon 2019]
スマホゲームのチート手法とその対策 [DeNA TechCon 2019]
DeNA
What's hot
(20)
MagicOnion~C#でゲームサーバを開発しよう~
MagicOnion~C#でゲームサーバを開発しよう~
画像処理の高性能計算
画像処理の高性能計算
メタプログラミングって何だろう
メタプログラミングって何だろう
【Unite Tokyo 2018】さては非同期だなオメー!async/await完全に理解しよう
【Unite Tokyo 2018】さては非同期だなオメー!async/await完全に理解しよう
すごい constexpr たのしくレイトレ!
すごい constexpr たのしくレイトレ!
C++の話(本当にあった怖い話)
C++の話(本当にあった怖い話)
Unityでパフォーマンスの良いUIを作る為のTips
Unityでパフォーマンスの良いUIを作る為のTips
C#で速度を極めるいろは
C#で速度を極めるいろは
こわくない Git
こわくない Git
C# ゲームプログラミングはホントにメモリのことに無頓着でいいの?
C# ゲームプログラミングはホントにメモリのことに無頓着でいいの?
オブジェクト指向エクササイズのススメ
オブジェクト指向エクササイズのススメ
Riderはいいぞ!
Riderはいいぞ!
マイクロサービスバックエンドAPIのためのRESTとgRPC
マイクロサービスバックエンドAPIのためのRESTとgRPC
カスタムメモリマネージャと高速なメモリアロケータについて
カスタムメモリマネージャと高速なメモリアロケータについて
Docker Compose 徹底解説
Docker Compose 徹底解説
きつねさんでもわかるLlvm読書会 第2回
きつねさんでもわかるLlvm読書会 第2回
Javaのログ出力: 道具と考え方
Javaのログ出力: 道具と考え方
今日からできる!簡単 .NET 高速化 Tips
今日からできる!簡単 .NET 高速化 Tips
C++ マルチスレッドプログラミング
C++ マルチスレッドプログラミング
スマホゲームのチート手法とその対策 [DeNA TechCon 2019]
スマホゲームのチート手法とその対策 [DeNA TechCon 2019]
Similar to emscriptenでC/C++プログラムをwebブラウザから使うまでの難所攻略
【学習メモ#1st】12ステップで作る組込みOS自作入門
【学習メモ#1st】12ステップで作る組込みOS自作入門
sandai
Power shell で DSL
Power shell で DSL
urasandesu
FPGAアクセラレータの作り方 (IBM POWER+CAPI編)
FPGAアクセラレータの作り方 (IBM POWER+CAPI編)
Mr. Vengineer
Node.js勉強会 Framework Koa
Node.js勉強会 Framework Koa
kamiyam .
Docker講習会資料
Docker講習会資料
teruyaono1
Windows Azure PHP Tips
Windows Azure PHP Tips
Microsoft Openness Japan
WTM53 phpフレームワーク いまさらcodeigniter
WTM53 phpフレームワーク いまさらcodeigniter
Masanori Oobayashi
Adaptive optimization of JIT compiler
Adaptive optimization of JIT compiler
nothingcosmos
13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejs
Takayoshi Tanaka
CMake multiplatform build-tool
CMake multiplatform build-tool
Naruto TAKAHASHI
PEZY-SC programming overview
PEZY-SC programming overview
Ryo Sakamoto
Clrh 20140906 lt
Clrh 20140906 lt
Tomoyuki Obi
Alt#0x008 2017/5/20
Alt#0x008 2017/5/20
Koki Natsume
Lxc on cloud
Lxc on cloud
Yukihiko SAWANOBORI
Apache Module
Apache Module
Tomohiro Ikebe
Machine configoperatorのちょっとイイかもしれない話
Machine configoperatorのちょっとイイかもしれない話
Toshihiro Araki
NanoA
NanoA
Kazuho Oku
社内勉強会資料(Varnish Module)
社内勉強会資料(Varnish Module)
Iwana Chan
Buffer overflow
Buffer overflow
ionis111
今だからこそ知りたい Docker Compose/Swarm 入門
今だからこそ知りたい Docker Compose/Swarm 入門
Masahito Zembutsu
Similar to emscriptenでC/C++プログラムをwebブラウザから使うまでの難所攻略
(20)
【学習メモ#1st】12ステップで作る組込みOS自作入門
【学習メモ#1st】12ステップで作る組込みOS自作入門
Power shell で DSL
Power shell で DSL
FPGAアクセラレータの作り方 (IBM POWER+CAPI編)
FPGAアクセラレータの作り方 (IBM POWER+CAPI編)
Node.js勉強会 Framework Koa
Node.js勉強会 Framework Koa
Docker講習会資料
Docker講習会資料
Windows Azure PHP Tips
Windows Azure PHP Tips
WTM53 phpフレームワーク いまさらcodeigniter
WTM53 phpフレームワーク いまさらcodeigniter
Adaptive optimization of JIT compiler
Adaptive optimization of JIT compiler
13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejs
CMake multiplatform build-tool
CMake multiplatform build-tool
PEZY-SC programming overview
PEZY-SC programming overview
Clrh 20140906 lt
Clrh 20140906 lt
Alt#0x008 2017/5/20
Alt#0x008 2017/5/20
Lxc on cloud
Lxc on cloud
Apache Module
Apache Module
Machine configoperatorのちょっとイイかもしれない話
Machine configoperatorのちょっとイイかもしれない話
NanoA
NanoA
社内勉強会資料(Varnish Module)
社内勉強会資料(Varnish Module)
Buffer overflow
Buffer overflow
今だからこそ知りたい Docker Compose/Swarm 入門
今だからこそ知りたい Docker Compose/Swarm 入門
More from 祐司 伊藤
Container Storage Interface のすべて
Container Storage Interface のすべて
祐司 伊藤
C++からWebRTC (DataChannel)を利用する
C++からWebRTC (DataChannel)を利用する
祐司 伊藤
詳説WebAssembly
詳説WebAssembly
祐司 伊藤
シンプル Processing !
シンプル Processing !
祐司 伊藤
PROCESS WARP「プロセスがデバイス間で移動する」仕組みを作る
PROCESS WARP「プロセスがデバイス間で移動する」仕組みを作る
祐司 伊藤
PROCESS WARP
PROCESS WARP
祐司 伊藤
Webブラウザで使えるいろんな処理系
Webブラウザで使えるいろんな処理系
祐司 伊藤
PROCESS WARP
PROCESS WARP
祐司 伊藤
PIAXで作る P2Pネットワーク
PIAXで作る P2Pネットワーク
祐司 伊藤
新しい分散実行の仕組み PROCESS WARPについて
新しい分散実行の仕組み PROCESS WARPについて
祐司 伊藤
More from 祐司 伊藤
(10)
Container Storage Interface のすべて
Container Storage Interface のすべて
C++からWebRTC (DataChannel)を利用する
C++からWebRTC (DataChannel)を利用する
詳説WebAssembly
詳説WebAssembly
シンプル Processing !
シンプル Processing !
PROCESS WARP「プロセスがデバイス間で移動する」仕組みを作る
PROCESS WARP「プロセスがデバイス間で移動する」仕組みを作る
PROCESS WARP
PROCESS WARP
Webブラウザで使えるいろんな処理系
Webブラウザで使えるいろんな処理系
PROCESS WARP
PROCESS WARP
PIAXで作る P2Pネットワーク
PIAXで作る P2Pネットワーク
新しい分散実行の仕組み PROCESS WARPについて
新しい分散実行の仕組み PROCESS WARPについて
emscriptenでC/C++プログラムをwebブラウザから使うまでの難所攻略
1.
emscriptenでC/C++プログラムを webブラウザから使うまでの 難所攻略 伊藤 祐司 2015/6/20 Creators
MeetUp #29
2.
自己紹介 伊藤 祐司 バックエンドの設計 開発 フレームワークの作成
バイナリ・テキスト変換 クローラー アルゴリズム 仮想マシン 下北沢OSSカフェでPROCESS WARPというシステムを作っています http://www.processwarp.org/ GitHub llamerada-jp facebook ito.yuuji blog http://llamerad-jp.hatenablog.com/
3.
背景・動機 PROCESS WARP 複数のマシンを接続し、プロセス転送(ライブマイ グレーション)機能を持ったアプリ実行基盤 webブラウザ、Linux、Unix上で専用VMを実行
4.
背景・動機 PROCESS WARPのコアプログラムをweb上でも動かして手 軽に使ってもらいたいけど開発に時間は掛けたくない CORE SOURCE (C++) C/C++ compiler emscripten
5.
実際にやる前に インストールからハローワールド HTML側のカスタマイズ JavaScriptとC/C++の連携 ポインタと文字列
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
8.
コンパイルの流れ LLVM Optimizer Clang dragon egg original frontend C/C++ Obj-C Swift Fortran Ada Go original language -emit-llvm x86 backend ARM backend iPhone Android Raspberry Pi PC objectfile for
9.
LLVMとemscripten LLVM Optimizer Clang C/C++ emscripten JavaScript!
10.
できないこと マルチスレッド ソケット通信 アセンブラ 他、JavaScriptでできないこと 主要モダンブラウザではだいたい動くけどそれぞれ制 限事項(特にIE)がある http://kripken.github.io/emscripten-site/docs/ porting/guidelines/browser_limitations.html
11.
実際にやる前に インストールからハローワールド HTML側のカスタマイズ JavaScriptとC/C++の連携 ポインタと文字列
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.
こんにちわ
15.
実際にやる前に インストールからハローワールド HTML側のカスタマイズ JavaScriptとC/C++の連携 ポインタと文字列
16.
こんにちわ
17.
見た目を変える emsdk/emscripten/<バージョン>/src/ shell_minimal.html をもとにHTMLをカスタム $ emcc
hello.c --shell-file custom.html -o hello.html console
18.
見た目を変える #canvas OpenGLを使わないなら消してし まって構わない #output Module.printからテキストが出力 されている 他もJavaScript部分と整合性を取 りながら変更してOK {{ SCRIPT }}がscriptタグに変換 される
19.
HTMLの生成をやめる デザイン変更のたびにコンパイルするのは面倒 <script async type="text/javascript" src="hello.js">とModuleがあればHTMLは直接 編集したい $
emcc hello.c -o hello.js console hello.js
20.
実際にやる前に インストールからハローワールド HTML側のカスタマイズ JavaScriptとC/C++の連携 ポインタと文字列
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
27.
実際にやる前に インストールからハローワールド HTML側のカスタマイズ JavaScriptとC/C++の連携 ポインタと文字列
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
33.
まとめ 基本的なC/C++とJavaScript連携はだいたいできる OpenGLや、Moduleを使ったさらなる制御もできる できることと、できないことが分かった? ポインタはタダのインデックス アルゴリズムやコアは共有できてもGUI部分は別々の実 装のほうが良いと思う C/C++からDOMを操作するライブラリとかあったらど うなんでしょうね? Moduleの中を覗いてみると凄い作りだったり…
34.
以上 ありがとうございました
Download now