エフェクトツール「Effekseer」ですが、2017年5月25日、WebGLに対応したEffekseerForWebGLがリリースされました。今回はEffekseerで作成したエフェクトをJavaScriptライブラリ「Three.js」を使ってWebGLで表示するまでの流れを紹介します。
EffekseerForWebGLのデモ
Effekseerでのエフェクト作成をオススメしたい理由とは？
- 1つのエフェクトソースでマルチプラットフォームに展開できる点。たとえばEffekseerはUnityにも対応しているため、WebブラウザとUnityプラットフォームの両方に対応できます (DirectXやOpenGLを用いたアプリケーション、Cocos2d-x、Unreal Engine4、さらにはMMDやSiv3Dにも対応）。Unity用コンテンツをWebに展開する際（逆もまた同様）、Effekseerでエフェクトを作成しておくと作り直しは必要ありません。
- GUIを使ってエフェクトが作成できるため、プログラマーとアーティストの分業ができる点
- ツールがオープンソースで無料
- ツールの動作が軽快なところ
- 公式サイトで150個以上の自由に使えるサンプルがダウンロードでき、エフェクト初心者でもはじめやすい
EffekseerForWebGLの使い方
ウェブページでWebGLとして表示するまでの流れはこんな感じです。
Step1：JSライブラリの読み込み
HTMLでscriptタグを使って、Three.jsとEffekseerForWebGLのJSライブラリを読み込みます。
<script src="three.min.js"></script>
<script src="effekseer.min.js"></script>
Step2：エフェクトファイルの読み込みとThree.jsへの組み込み
JavaScriptとして次のように書きます。ここではEffecseerのエフェクトファイルを読み込む処理を記載しています。
// WebGLRendererの初期化
var renderer = new THREE.WebGLRenderer();
// effekseerの初期化
effekseer.init(renderer.context);
// エフェクトファイルの読み込み
var effect = effekseer.loadEffect(
"Laser01.efk",
function() {
// 読み込み完了
// エフェクトファイルの再生
effekseer.play(effect);
}
);
Step3:エフェクトのレンダリング
JavaScriptに毎フレーム実行されるループ処理を書きます。EffekseerとThree.jsの3D空間を合わせた後、それぞれのレンダリング処理を行います。「3D空間を合わせる」とは、カメラの位置や画角・ズームなどを合致させる処理になります。
(function renderLoop() {
requestAnimationFrame(renderLoop);
// Effekseerの更新
effekseer.update();
// Three.jsのレンダリング
renderer.render(scene, camera);
// EffekseerをThree.jsの3D空間に合わせる
effekseer.setProjectionMatrix(
camera.projectionMatrix.elements
);
effekseer.setCameraMatrix(
camera.matrixWorldInverse.elements
);
// Effekseerのレンダリング
effekseer.draw();
})();
終わりに
Web3Dコンテンツを作る際、Three.jsを選ぶ方は多いと思います。Three.jsの3D空間へ簡単にエフェクトを組み込むことができるEffekseerForWebGL、使ってみたいと思われた方が多いのではないでしょうか？ 現在β版のためEffekseerの一部の機能でうまく動かないところもありますが（3Dモデルを使ったエフェクト等）、パーティクルやUVスクロール、リボンを用いたエフェクトなどGUIツールで作成したエフェクトが動作可能となっています。
Effekseerが気になった方は下記のエフェクト作成入門講座などを参考にしていただき、ぜひチャレンジしてもらえると嬉しく思います。
