CrossRoad

AR、MR、VR、Babylon.jsを中心とした技術ブログ。 If you're non-Japanese native guys, check "English" category.

meshをParticleにしたときのFPS変化をBabylon.jsとUnity WebGLで比較しました

Unityをはじめ、CG系の開発環境にはParticle Systemがあります。炎、雷などの綺麗なグラフィック表現には必須の機能です。

Babylon.jsにもParticle Systemがあります。試したところ思ったよりも負荷が少ない感じでした。一方、UnityはWebGL書き出しが可能ですが、処理が重いと聞いたことがあります。ただ、どの程度重いのかはちゃんと調べたことがありませんでした。

そこで、今回はグラフィック表現に必須なParticle SystemをWebGLで使うとき、UnityとBabylon.jsで作ったときの処理負荷を調べました。

なお、どの方法でもよかったのですが、Babylon.jsを調べてた時に見つけた、meshをParticleにするサンプルコードが面白かったので、meshのParticleによる処理負荷を対象としています。

使用環境

  • MacBook Pro 13 inch 2017 (Intel Iris Plus Graphics 650 1536 MB)

  • Mac OS X 10.14.2

  • Unity: 2018.2.14f1

  • Babylon.js :3.3

  • Chrome:71.0.3578.98

1. Babylon.jsのSolid Particle Systemについて

Babylon.jsのParticle Systemはmeshも使えます。Solid Particle System(SPS)と呼び、meshはcollisionなどの物理性質を持つことができます。

The SPS is a single updatable mesh. The solid particles are simply separate parts or faces fo this big mesh.
As it is just a mesh, the SPS has all the same properties than any other BJS mesh : not more, not less.
It can be scaled, rotated, translated, enlighted, textured, moved, etc.

引用元:Use the Solid Particle System - Babylon.js Documentation

下記のページでJavascriptのコードとプレビューが確認できます。

https://www.babylonjs-playground.com/#2V1C4Z#0

アクセスできなかった時のため、プレビュー部分と同じ動きを切り取りました。

このように宝石がたくさん生成され、その中をSphereが動いています。Sphereが宝石とぶつかると宝石が弾かれています。今回はこれをUnityで再現して、FPSを調べました。

2. 軽量WebGL向けUnityのtiny modeは不使用

Unityには2018.3からTiny Modeという機能がpreview版としてリリースされています。以下の通り、軽量なHTML5を作るための機能です。

Unity's Tiny Mode provides a set of workflow features and a specialized build pipeline that allows you to create small, lightweight HTML5 games and apps in the Unity Editor. For example, you can use Tiny Mode to create playable ads or games for messaging platforms.

引用元:Tiny Mode | Package Manager UI website

preview版のためか、使える機能が限定されています。現時点で使える機能はこちらに書いてあります。

Compatibility Cheat Sheet | Package Manager UI website

Particle Systemに相当するのは、ut.Particles です。しかし、説明ページは404 Not Foundになっていました。

今回の検証について、本来はut.Particleで調べた方がよいです。しかし、まだ使えるかわからないため、従来のParticle Systemを使いました。いずれut.Particleも比較したいと思います。 

3. UnityでBabylon.jsのSolid Particle Systemサンプルコードを再現する手順

見た目をBabylon.jsのサンプルに近づけるように調整しました。

3.1 宝石が多数出現するエフェクト

Asset StoreでGemを入手しました。

空のGameObjectにParticle Systemコンポーネントをつけて、RendererをMeshにします。 Gemアセットの中から好きなMeshとMaterialを指定します。

Renderer mesh setting in particle system on Unity

あとは、Emmisionを調整して、発生するときの方向、数を調整します。

Emission setting in particle system on Unity

Babylon.jsのサンプルでは複数の宝石が出現していたので、こちらも複数の宝石を出現させます。複数のParticle Systemsを同じ場所に表示させて、異なる宝石を設定します。

このようになります。

3.2 動き回っているSphere

Babylon.jsのサンプルコードでは、Sphereが宝石を弾くように動いています。sphereの動きはこのように表現されています。

var k = 0.0;
var sphereAltitude = 40;
scene.registerBeforeRender(function () {
    sphere.position.x = 30.0 * Math.sin(k);
    sphere.position.z = 20.0 * Math.sin(k * 6.0);
    sphere.position.y = 8.0 * Math.sin(k * 8.0) + sphereAltitude;
    k += 0.02;
    });

これをUnityで再現するため、C#でこのようなコードを書きます。

void FixedUpdate(){
   sphereAltitude = this.gameObject.transform.position.y / 2.0f;
   float x = 1.5f * Mathf.Sin(k);
   float y = 4.5f+2.0f * Mathf.Sin(k * 6.0f);
   float z = 0.4f * Mathf.Sin(k * 8.0f) + sphereAltitude;
   this.gameObject.transform.position = new Vector3(x,y,z);
   k += 0.02f;
}

細かい位置を調整した結果がこちらです。

4. FPS比較

対象は、Babylon.js、UnityからWebGL出力してブラウザで表示、Unity Editorの3つとし、Particleの数を変えてFPSの値を記録しました。

FPSは全時間取るのは難しいため、目視で1分程度確認し、最も多い値を結果としました。Particleの数を1200、2400、3600、4800にしたときの結果は以下の通りです。

Result of FPS comparison between BJS and Unity

UnityのWebGLは重いという噂でしたが、2400個程度までならば、FPSは60で安定しました。しかし、3000個を超えてくると少し落ちてきます。数千個のParticleをWebGLで使う場合、Babylon.jsの方が性能が出やすそうです。 ただ、ゲームにしろアプリにしろ、一気に数千個出す処理を作らなければよいので、UnityのWebGL出力も十分に使えるとも言えます。

一方、Unity Editorでは早々にFPSが落ちてしまいました。Unity Editorは3D空間で構成を見たり、実行、やり直しをすぐに試すには適していますが、WebGL出力の性能を見るには向いていないですね。

補足:Unity側のParticle Systemで、Particleの数に応じて変更した値です。

Particleの合計数 1200 2400 3600 4800
1つのGem当たりのMax Particles 400 800 1200 1600
Rate over Time (on Emmision) 80 160 240 320

5. おわりに

UnityのWebGL出力はビルドに時間がかかる、重い、ということでしたが、今回の範囲ではビルドも1,2分で済みましたし、数千個のmesh Particleを使う範囲ならば60FPSを保てることがわかりました。 Babylon.jsはビルド不要、かつ多数のParticleを使うときはUnityよりも性能がよいです。ただ、コンテンツの作りやすさでは依然Unityの方が上と思います。

今回はUnityの従来Particle Systemしか試していないので、tiny modeのut.Particleが出たら試す予定です。