Emscriptenを使うと、C++のコードをJavaScriptに変換してブラウザで実行することができます。また、OpenGLのコードも自動的にWebGLに変換され、ブラウザで実行することができます。

Emscriptenは、C++をLLVMバイト・コードに変換した後、JavaScriptに落とします。そのため、LLVMとnode.jsに依存しています。Emscriptenはgitから直接インストールすることもできますが、LLVM3.4を要求されたり、fastcompを自分でビルドをしないといけなかったりします。公式のSDKを使うと、依存するライブラリ全てを自動的にインストールしてくれるので楽です。

Emscriptenのページから、Emscripten SDKをダウンロードします。

SDKのDownload

ダウンロードしたemsdk-portable.tar.gzを解凍してできたemsdk_portableで、emsdk update、emsdk install latest、emsdk activate latestを実行します。

1. Download and unzip the portable SDK package to a directory of your choice. This directory will contain the Emscripten SDK.
2. Open a command prompt to the directory of the SDK.
3. Run `emsdk update`. This will fetch the latest registry of available tools.
4. Run `emsdk install latest`. This will download and install the latest SDK tools.
5. Run `emsdk activate latest`. This will set up ~/.emscripten to point to the SDK.

インストールが終わると、emsdk_portableのフォルダ構成は以下のようになります。

README.md		emsdk			node
clang			emsdk_env.sh		zips
emscripten		emsdk_manifest.json

emsdk_portable/emscripten/1.27.0に移動します。hello.cppを作成します。

#include 

int main()
{
    printf("hello world\n");
}

以下のコマンドでコンパイルします。

./em++ -o hello.html hello.cpp

hello.htmlとhello.jsが生成されるので、hello.htmlをブラウザで開くと実行されます。

emscripten

hello.jsは356KBもあります。Looking through Emscripten outputにあるように、-O2 --closure 1を付けると89KBになりました。stdio.hをincludeしてもしなくても、これぐらいの容量になります。

スタック管理などの固定で消費するjsの容量が大きいので、C++のファイルを1つずつjsにするのではなくて、個別にバイト・コードにコンパイルした後、まとめてjsにするのがよさそうです。

External Interface的に、C++のコードからJavaScriptライブラリのメソッドを呼び出す場合は、--js-libraryオプションを使うとよいようです。(EmscriptenでC言語をJavaScriptに変換する

ネイティブとHTML5の共通フレームワークを作る場合は、C++でインタフェースを切っておいて、ネイティブ向けにはC++のコード、HTML5向けには--js-libraryで外部のJavaScriptコードを呼ぶ感じでいけそうです。