oF 0.9 より、emscripten に対応しました。
ざっくりとした内容はこの登壇資料で。
JSオジサン openFrameworks emscripten setup!
一言でいえば、ブラウザでoFが動くということです。
本稿は、この時の導入記録。
開発環境
手元の環境は、Mavericks でした。
OSX 10.9.5
Xcode 6
openFrameworks 0.9.0
oF 0.9 を準備する
まずは oF 0.9 をダウンロードしてましょう。
http://openframeworks.cc/download/
解凍後、サンプルディレクトリから、適当に選んでビルドしてみます。
(oFディレクトリ)/of_v0.9.0_osx_release/examples/3d/3DPrimitivesExample
Xcodeで開いたところ
インポートが完了したら、Run（cmd + r）でビルドしてみます。
無事にビルドが通りました。
さていよいよJS化しますが、Emscripten の準備に少し手順がかかります。
Emscriptenを準備する
emscripten には本体のSDKと、いくつかの依存ツールが必要です。
必須ツール
不足していたらインストールしておきましょう。
- XCode Command Line Tools
- Node.js
- Python 2.x
- Git
- Java
- CMake
Mac 環境ならば、Python 入ってると思いますが、emscripten が python2 という名前で呼び出します。
おそらく、python2.5 とか、python2.7 とかがインストールされているので、ビルド時に怒られます。
$ python2: No such file or directory
なのでローカルの python から python2 にシンボリックリンクを張っておきます。
$ sudo ln -s /usr/bin/python2.7 /usr/bin/python2
SDKをダウンロード
Mac なら、 Portable Emscripten SDK for Linux and OS X というリンクからダウンロードしてください。
解凍後、適当なディレクトに配置したらターミナルで emsdk_portable に移動して、以下のコマンドを実行します。
# Fetch the latest registry of available tools.
./emsdk update
# Download and install the latest SDK tools.
./emsdk install latest
# Make the "latest" SDK "active"
./emsdk activate latest
Mac 環境はパスを通すシェルが用意されてます。
# Set the current Emscripten path on Linux/Mac OS X
source ./emsdk_env.sh
.zshrc とか、.bashrc にも追記します。
local EMSCRIPTEN_PATH="$HOME/Workspace/emsdk_portable/emscripten/1.35.0"
export PATH="$EMSCRIPTEN_PATH:$PATH"
ビルドしてみる
さきほど、Xcodeでビルドしてみた 3DPrimitivesExample で試してみます。
$ cd (oFディレクトリ)/of_v0.9.0_osx_release/examples/3d/3DPrimitivesExample
$ emmake make
html と js が bin フォルダに出力されます。
出力時のメッセージにしたがって下記を実行。
$ emrun bin/3DPrimitivesExample.html
サーバーが起動し、ブラウザが開いたら成功です。
Safari より Chrome のほうが比較的安定している気がします。
参考リンク
公式セットアップガイド（日本語）
http://openframeworks.jp/setup/emscripten/
openFrameworks v0.9.0 をブラウザで動かしてみる
http://poipoides.hatenablog.com/entry/2015/11/11/001933