こちらは、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開発ツールのキャッシュを非有効化し、すべての伝送を記録しました:
UnityPlayCanvas
4.72MB0.22MB
UnityアプリケーションはPlayCanvasアプリケーションの21倍以上の大きさです。なぜPlayCanvasではこれほどまでにアプリケーションサイズを小さくできるのでしょうか？PlayCanvasエンジンはgzip圧縮すると147KBと極めて小さくなり、アプリケーションのコードとアセットで残りの73KBになります。JavaScriptにて手作業で作られたため、PlayCanvasエンジンは非常に小さいため、ブラウザ自体の機能性に可能な限り依存しています。

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

ロードタイム

弊社は2つのアプリケーションを、ローエンドからハイエンドまでの12個の異なるデバイスで実行しました。
下記は、ネット接続が50Gの場合のロードタイムの記録です:
デバイスブラウザUnity(秒)PlayCanvas(秒)
iPhone 4S  Safariクラッシュ2
iPhone 5SSafari181
iPhone 6Safari171
iPad Mini 2Safari211
Samsung Galaxy Tab S2Chrome 51191
Samsung Galaxy Note 10.1 2014Chrome 51281
Samsung Galaxy S6 EdgeChrome 51281
Samsung Galaxy Note 4Chrome 51281
LG Nexus 4Chrome 51442
Leapfrog EpicChrome 51431
Blackberry Z10Default Browserクラッシュ1
PC (Core i7 + GeForce GTX 880M)Chrome 51131

重要な留意点:

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

フレームレート

下記は、上記と同じデバイス群についてのフレームレートの記録です:
デバイスブラウザUnity(fps)PlayCanvas(fps)
iPhone 4S  Safariクラッシュ58
iPhone 5SSafari2160
iPhone 6Safari2860
iPad Mini 2Safari1660
Samsung Galaxy Tab S2Chrome 5117-5560
Samsung Galaxy Note 10.1 2014Chrome 5115-5060
Samsung Galaxy S6 EdgeChrome 5115-5060
Samsung Galaxy Note 4Chrome 5115-5760
LG Nexus 4Chrome 5115-5060
Leapfrog EpicChrome 5116-5560
Blackberry Z10Default Browserクラッシュ60
PC (Core i7 + GeForce GTX 880M)Chrome 5157-6060

重要な留意点:
 ・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はこの点でもより多くの実績をあげています。