emscriptenセットアップガイド

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

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

Emscriptenのインストール

このページからあなたのOSに対応するSDKをダウンロードしてください。Windowsの場合、いずれかの.exeインストーラをダウンロードし、ダブルクリックしてウィザードに従います。MacとLinuxの場合、Portable Emscripten SDK for Linux and OS Xを見つけてダウンロードします。ダウンロードが終わったらアーカイブを解凍して任意のディレクトリに展開し、ターミナルを開いて以下のコマンドを実行してください。

# 利用可能なツール群の最新のレジストリをフェッチする
./emsdk update

# 最新のSDKをインストールする
./emsdk install latest

# "latest"のSDKを有効にする
./emsdk activate latest

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

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によるこちらの記事をもとにしました。