PlayCanvasとUnity WebGLの比較

こちらは、2016年8月4日に公開された以下のドキュメントを翻訳したものとなります。

PlayCanvas versus Unity WebGL

「PlayCanvasのUnity WebGLエクスポートとの比較は？」とよく質問されます。本稿では両者の比較を行います。


まず始めに、初心者の方向けにUnityとPlayCanvasを紹介します。UnityはネイティブのWindows、Mac、Linux対応デスクトップアプリケーションとして提供されるゲームエンジンです。PlayCanvasはWebアプリケーションとして提供されるHTML5/WebGLゲームエンジンで、すべてのブラウザおよびオペレーティングシステムで作動します。

本稿の目的を実行するため、簡単な設定をします。弊社はアプリケーション「Hello World」をUnity 5.3.2とPlay Canvasの両方で作成しました。このアプリケーションでは、テクスチャー加工した立方体が回転しています。

全画面表示はこちら

上で表示されているのはPlayCanvasのアプリケーションです。ページがクラッシュしてしまうので、Unityのアプリケーションは埋め込んでいません。（勇気のある方はここをクリックして、新しいタブで実行してください。）

3つの主要な基準、すなわちダウンロードサイズ、ロード時間、フレームレートで比較をおこないます。


ダウンロードサイズ

各アプリケーションのダウンロードサイズを確認するため、弊社はChrome開発ツールのキャッシュを非有効化し、すべての伝送を記録しました:

UnityアプリケーションはPlayCanvasアプリケーションの21倍以上の大きさです。なぜPlayCanvasではこれほどまでにアプリケーションサイズを小さくできるのでしょうか？PlayCanvasエンジンはgzip圧縮すると147KBと極めて小さくなり、アプリケーションのコードとアセットで残りの73KBになります。JavaScriptにて手作業で作られたため、PlayCanvasエンジンは非常に小さいため、ブラウザ自体の機能性に可能な限り依存しています。

一方Unityは、WebGLへのエクスポートの際Emscriptenに依存します。このツールはC#コードをC++コードに自動変換します。その後LLVMにコンパイルしてから、JavaScriptへと変換します。この処理の影響で莫大な量のコードが生成されるため、エクスポートされたアプリケーションのサイズが増加し、現在のJavaScriptエンジンに圧倒的な負担がかかります。結果的に、ブラウザのメモリ不足となります。

ロードタイム

弊社は2つのアプリケーションを、ローエンドからハイエンドまでの12個の異なるデバイスで実行しました。
下記は、ネット接続が50Gの場合のロードタイムの記録です:

重要な留意点:

・PlayCanvasアプリケーションのロードタイムはUnityアプリケーションに比べて、最大で43倍の速さです。
・Unityアプリケーションでは、ローエンドのデバイスでもロードエラーが発生します。これらのデバイスでは、ページをローディングする際に多量のJavaScriptが原因となってメモリ不足となります。
・Chromeでは、UnityのロードタイムはSafariと比べて最大で2倍の時間を要します。これは、Chromeがアプリケーションの膨大なJavaScriptコードベースの実行準備に時間がかかるためです。

フレームレート

下記は、上記と同じデバイス群についてのフレームレートの記録です:

重要な留意点:
 ・PlayCanvasのフレームレートは、Unityに比べて最大で4倍以上です。特にiOSのSafariで、Unityのパフォーマンスは低下します。
 ・Unityのパフォーマンスは、Android対応のChromeで非常に不安定です。まず、はじめの20秒間はUnityのフレームレートは15fpsから20fps未満で、その後に50fps台まで上昇します。この時点ではフレームレートが常に低下し、60fpsで安定することはありません。
 ・PlayCanvasは、iPhone4S以外のすべてのデバイスですぐに60fpsに安定します。iPhone4Sでは、時折フレームレートが低下しました。このため、理想としてはPlayCanvasにはより多くの負荷をかけたテストが必要と考えられます。

結論

要点：
・Unity WebGLアプリケーションのサイズは最大で21倍です。
・PlayCanvasアプリケーションのロード速度は最大で43倍です。
・PlayCanvasアプリケーションのフレームレートは最大で4倍です。

もっとも基本的な3Dアプリケーションであっても、Unityでは満足のいくサイズ、ロードタイム、フレームレートに達することが困難です。この結果についてはブラウザベンダーやHTML5/WebGLが原因と考えない点が重要です。PlayCanvasが証明しているとおり、これらの最新のウェブテクノロジーを用いるとしても、エンジンを構築する際に賢明なアプローチが採られているならば、非常に高いパフォーマンスを実現することは可能です。

ブラウザに最適なエンジンであるPlayCanvasがどのように構築されたかについては、オープンソース化されたランタイムをGitHubで参照してください。PlayCanvasを使用して構築を始めたい場合には、playcanvas.comでサインアップしてください。

アップデート
本稿で使用された２つのアプリケーションをビルトしたオリジナルのプロジェクトを参照するには、Unityプロジェクトはこちら、PlayCanvasプロジェクトはこちらをクリックしてください。本稿を発行後に気づいた点ですが、Unityプロジェクトではハードウェア・アンチエイリアシングが無効になっており、テクスチャにはバイリニアフィルタリングが使用されています。一方、PlayCanvasではアンチエイリアシングとトリリニアフィルタリングが有効です。このため、PlayCanvasはこの点でもより多くの実績をあげています。