emscriptenセットアップガイド

openFrameworksで作ったプロジェクトをWebで公開したいと思ったことはありませんか？いつもはビデオや写真を撮りますが、UIはどうでしょう？マウスを使ったエフェクトをどうやって見てもらいますか？そこで Emscripten の出番です。EmscriptenはあなたのC++コードをものの数分でJavaScriptに変換してくれるのです！あなたの作ったOFプロジェクトはポートフォリオに「すぐに」公開できます。

このガイドではあなた自身のスケッチをWebページに変換したいときにいつでも再利用できるようなやり方で、openFrameworksのディストリビューションに含まれるexampleプロジェクトのひとつをコンパイルする方法を紹介します。すでにopenFrameworks をダウンロードしていれば（emscriptenはOFのバージョン以上で動作します）、あとはemscriptenをインストールしてプロジェクトをコンパイルするだけです。ひとつずつ見ていきましょう。

Emscriptenのインストール

Emscriptenを導入する推奨の方法は、EmscriptenのリポジトリからGitで直接インストールすることです。 emsdkをインストールしたい場所でターミナルを開き、以下のコマンドを実行してください。

git clone https://github.com/emscripten-core/emsdk
cd emsdk
./emsdk install latest
./emsdk activate latest
source ./emsdk_env.sh

これには少し時間がかかります。終わったらsource ./emsdk_env.shと入力・実行してEmscriptenへのパスを通しましょう。次回のセッションのために、このコマンドが出力した変数群をコピーしてあなたの.profileファイルに加えておくのもよいでしょう。

Note: 以前にインストールしたemscriptenが残っている場合は、OF_FOLDERにあるコンパイル済みコードを削除したいでしょう。コンパイルを試行する前に、OF_FOLDER/libs/openFrameworksCompiled/lib/emscripten/の中にある全てのファイルおよびobjフォルダと、プロジェクトフォルダにある全てのobj/フォルダを削除してください。

emscriptenを使用してopenFrameworks プロジェクトをコンパイルする

ターミナルを開いて任意のexampleフォルダ（例：examples/3d/3DPrimitivesExample）に移動したら、次のコマンドを使ってコンパイルします。

emmake make

コンパイルが終わるとexamples/3d/3DPrimitivesExample/binフォルダの中に3DPrimitivesExample.htmlができているはずです。次のコマンドでこのファイルを開いてください。

emrun bin/3DPrimitivesExample.html

WebGLに対応していないブラウザでは動作しません。その場合はChromeなどで開いてみましょう。

emrun --browser chrome bin/3DPrimitivesExample.html

すべて上手く動いていればこのような画面が見えるはずです。

このチュートリアルはRegine Flores Mirによるこちらの記事をもとにしました。