読者です 読者をやめる 読者になる 読者になる

poipoiです。

技術的ななにかと、そうじゃないなにか。

openFrameworks v0.9.0 をブラウザで動かしてみる

どうもこんにちは。

久々のブログ投稿です。今日はoFネタです。

先日(2015年 11月8日)、openFrameworks v0.9.0 が無事正式リリースになりました!

で、リリース文を読んでみたら、気になる1文が載ってるではありませんか。

oF が正式に Emscripten 対応になったのです!なのでWEB上で動くのです!!

Emscripten とは?

Emscripten とは、LLVM -> JavaScript 変換ができるアツいヤローです。なので、C++ -> LLVM -> JavaScript みたいな感じで、C++ で書かれたコードを JS コードに変換できちゃいます。

C++ -> JS の変換が出来て何が嬉しいの?と思う方もいるかもしれませんが、これまでのゲーム系などのC/C++で書かれたコード資産をそのままWebに流用出来たり、asm.js に変換して高速な実行ができたりなんて利点があるらしいです。(詳しくは知らない。)

で、C++ -> JS 変換ということはですよ。 まさに oF をブラウザ上で動かすことができるようになるのですよ!

試してみた

と、いうことで、物は試しとばかりに早速やってみました。 詳しいやり方はこちらの Setup guide に載っているので、皆様ご自分の環境に合わせてトライしてみましょう!

http://openframeworks.cc/download/

ちなみに私は Mac 環境だったので、Mac に入れてみた流れをなんとなく書いていきたいと思います。

また、私がつまずいたポイントも備忘録的に記しておこうと思います。

まずは Emscripten を入れる!

なにはともあれ、まずは Emscripten を入れなければなりません。

Emscriptenの公式ページは以下になります。

http://kripken.github.io/emscripten-site/index.html

Emscripte を入れるための環境を作る。

まずは Emscripten を入れる前に、Emscripten を入れるための環境づくりが必要です。

こちらのページに Emscripten を入れるために必要なモノが書いてあるのでセコセコとインストールします。

http://kripken.github.io/emscripten-site/docs/getting_started/downloads.html#platform-notes-installation-instructions-portable-sdk

  • XCode Command Line Tools
  • git
  • cmake
  • node.js
  • python 2.x

もともとWeb系の方であれば、上記の環境もすでにいろいろとインストール済みかもしれません。 自分の環境にすでに上記が入っているかどうかは、以下のように確認ができるようです。

http://kripken.github.io/emscripten-site/docs/building_from_source/toolchain_what_is_needed.html#toolchain-test-which-dependencies-are-installed

つまずきポイント1:cmake の Command LIne 版のインストールについて

cmake のインストールパッケージをそのまま入れると、GUI版のcmakeが入ります。 ただ、そのままだと Command Line 上から使えないため、Emscripten のインストールでエラーが出てしまいます。

Command Line 版の cmake を入れるには

  1. GUI版 cmake を起動する
  2. [Tool] → [How to Install For Command Line Use] を選択
  3. ポップアップで出てきた指示にしたがう。

という手順で行えます。私の場合は一番上の直接パスを通す方法を使いました。

f:id:poipoides:20151111001443p:plain

つまずきポイント2:El Capitan での/usr/bin以下の書き換え

python2 に関しては以下のようにしろと Emscripten のページに書いてあります。

cd /usr/bin
sudo ln python python2
sudo ln ../../System/Library/Frameworks/Python.framework/Versions/2.7/bin/python2.7 python22.7

ですが、El Capitan だと Rootless というセキュリティ機能が入っているらしく、そのままでは上記コマンドがエラーになってしまいます。

対処法としては以下を参考にしました

http://applech2.com/archives/46435268.html

Emscripten のインストール

必要な環境を構築できたら、Emscripten 自体をダウンロード&インストール!

詳細はこちらに載っているので参照のこと。

http://kripken.github.io/emscripten-site/docs/getting_started/downloads.html

まずはパッケージをダウンロード&解凍し、適当なディレクトリに置きます。

そしてそのディレクトリ内で以下のコマンドを叩きます。

# 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/Linux の人は更に以下を叩きます。

# Set the current Emscripten path on Linux/Mac OS X
source ./emsdk_env.sh

これでアクティブにしたEmscriptenにパスが通るらしいです。

インストールは結構時間がかかったので気長に待つといいと思います。

つまずきポイント3:Emscripten のバージョン

実は上述の ./emsdk install latest だと私の場合下記のようなエラーが発生してしまいました。

Command '['make', '-j3']' returned non-zero exit status 2
Installation failed!

私が実行した時の最新バージョンが 1.35.7 だったのですが、どうもこれが不安定だったようです。

下記に示す様に 1.35.0 を入れるようにしたらうまくいきました。

./emsdk update sdk-tag-1.35.0-64bit
./emsdk install sdk-tag-1.35.0-64bit
./emsdk activate sdk-tag-1.35.0-64bit

パスを通す

最後に Emscripten のもろもろのバイナリがあるディレクトリにパスを通します。

ディレクトリは以下になりますので、忘れずに通してください。

(Emscriptenディレクトリ)/emscripten/(Emscripten のバージョン番号)/

oF を Emscripten でビルドする

さて、ようやく Emscripten インストール出来たので、次は oF のソースを Emscripten でビルドしてみたいと思います。

やり方は以下のとおり。

http://openframeworks.cc/setup/emscripten/

まずはビルドしたいプロジェクトのディレクトリに移動し、以下のコマンドを叩きます

emmake make

しばらくするとビルドが完了するので、そのまま動作チェックしたい場合は

emrun --browser chrome bin/(プロジェクト名).html

と実行すると Chrome が立ち上がってブラウザ上で動いているのが確認できます。

また、サーバーにアップしたい場合は、bin/ 以下のファイルをすべてアップロードすれば良い模様です。

取り急ぎ examples/3d/eDPrimitivesExample をビルドしてみた結果、以下のようになりました!

https://www.googledrive.com/host/0B0kSi87phV3Ia015ejhHNlEwRGM/3DPrimitivesExample.html

f:id:poipoides:20151111002239p:plain

おまけ

ちなみに、作ったoFのページを公開するのには、Google Drive を使った以下の方法を参考にしました。 http://ninagreen.hatenablog.com/entry/2015/09/14/030704

簡単にWEBページを公開できてお手軽です!

それでは、またそのうち。