Effekseerをemscriptenで動かす

はじめに

やり方としては２種類ある。（多分）

1. jsファイルとして出力し、Three.jsなどのJavaScript用グラフィックスライブラリを使用して動かす
2. 静的リンクライブラリとして出力し、既存のC++プロジェクトとともにリンクして直接動かす

今回は、2番の方法を紹介する。なお、1番の方法に関してはわざわざビルドする必要すら無く、ビルド済みのjsファイルが配布されているのでそちらを利用すれば良い。

github.com

2番の方法はやり方が載っていなかったので表示するまでに2日くらい掛かってしまった。

静的リンクライブラリのビルド

まずは普通に先程のリポジトリをcloneする。

git clone https://github.com/effekseer/EffekseerForWebGL
cd EffekseerForWebGL
git submodule update --init

src内にあるCMakeLists.txtを開き、

# Set output file extension
set(CMAKE_EXECUTABLE_SUFFIX ".js")

# Add build settings
add_executable(effekseer.core ${effekseer_src})

という記述を消し（このままビルドすると上記のjsファイルをビルド出来る）、代わりに

# Add build settings
add_library(effekseer STATIC ${effekseer_src})

としておく。 あとは

emsdk install latest
emsdk activate latest
emcmake cmake .
emmake make

とすればlibeffekseer.aが出力される

ファイルローダ

src/cpp/main.cppのような記述でなくても、本家のリポジトリのexampleのように記述すれば動く。しかし、ファイル読み込みについてはどうやら既存のローダでは読み込めないようなので自作する必要がある。
そこで、src/cpp/CustomFile.hを参考にした。EM_ASM内のコードが機能しなかったので、素直にstd::fstreamなどで読み込んだ。
テクスチャに関しては、読み込んだファイルをSDL_Imageを介して無理やり読み込ませた。マテリアルの読み込み等についてはまだ実装していない。

文字で説明なんかせずにコードを載せれば良いのだろうが、この辺りは未だ調査中なので不明な点が多い。
判明次第随時更新するつもりだが、とりあえず今回はこのへんで。