PlayCanvasとUnreal WebGLの比較

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

以前公開したPlayCanvasとUnityのWebGLエクスポーターの比較についてのブログ記事、「PlayCanvasとUnity WebGLの比較」は、多くの方々の間で話題になりました。その後出てきた質問の1つは「では、UnrealのWebGLエクスポーターについては？」です。UnrealはネイティブコードベースをJavaScriptにエクスポートする際、Unityと同様にEmscriptenに依存します。このため、Unityと同様の問題が生じるのではないかと考えるのは当然です:すなわち、膨大なダウンロードサイズ、長いロードタイム、ランタイム・パフォーマンスの低さなどです。

前回と同様にテクスチャー加工した立方体で実験することも可能ですが、より現実的な比較をしてみましょう。
Flappy Birdそっくりのゲームを、UnrealとPlayCanvasの両方で作成してみました。Epicが作成したTappy ChickenとPlayCanvasで作成したFlappy Birdを比較してみましょう。以下が、プレイ可能なPlayCanvasのゲームです。



残念ながらEpicがデスクトップブラウザに制限しているため、Tappy Chickenをここに埋め込むことはできませんでした。こちらのリンクを参照してください。GIFアニメーションを添付します：

以下を参照いただく前に、注意していただくべき点があります。これから比較するゲームは同一ではなく、顕著な違いがあります。Tappy Chickenは多様なテクスチャのほか粒子などを使用し、また視差があります。これらの2つのゲームは全くの同一ではありませんが、本質的には非常に似ているため比較の余地があります。下記で述べる分析結果が、2つのゲームの違いによるものかどうかを決めるのは読者の皆さん次第です。

前回と同様に、3つの主要な基準について比較をおこないます:すなわち、ダウンロードサイズ、ロードタイムとランタイム・パフォーマンスです。

ダウンロードサイズ

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

EpicのゲームはPlayCanvasのゲームの47倍以上の大きさです。ここでもまた、Emscriptenに依存するエンジンではダウンロードサイズに問題が生じています。Tappy ChickenのJavaScriptのみでも全ペイロード10MBのうち7.3MBに達します。なお、これはGZIPで圧縮したサイズです。圧縮前のサイズはJavaScriptで36MBです。この点でも、PlayCanvasの手書きの「JavaScript優先」のアプローチのほうが優位で、全エンジンに占めるサイズは147KB(圧縮前は615KB)です。

ロードタイム

残念ながら、EpicのTappy Chickenはモバイル上では実行できないため、デスクトップでのみロードタイムをテストしました。テスト環境ではCore i7搭載のWin10マシンを使用し、ネットへの接続速度は50GBでした。ブラウザのキャッシュは非有効化してあります。

PlayCanvasのゲームは、多くのモバイルデバイス上で作動しました。また、常に60Hzで作動し、ロードタイムは2秒未満でした。

以下が着目すべき点です:

・ChromeはUnrealのゲームと比べて、PlayCanvasのゲームを17.6倍の速度でロードします。他のブラウザでも同様の結果が得られました。 
・Firefoxは、 asm.jsベースのUnrealランタイムを最も早くロードします。EmscriptenはMozillaの技術であり、Firefoxはasm.jsコードに対応するようかなり最適化されているため、これは驚くべき点ではありません。
・ロードタイムに影響を及ぼすのは、ゲームファイルのローディングだけではありません。36MBものサイズのJavaScriptをロードする必要があるため、Unrealのゲームのロードタイムがより長くなっています。

ランタイム・パフォーマンス

ランタイム・パフォーマンスを分析するため、Chrome developer ツールのTimelineパネルを使って2つのゲームのキャプチャを比較しましょう。以下は、PlayCanvasで作成したFlappy Birdを0.57ミリ秒で実行したフレームのキャプチャです。

そして、以下はUnrealで作成したTappy Chickenを5.0ミリ秒で実行したフレームのキャプチャです。

それぞれのキャプチャでは、典型的なフレームが選択されています。極端に速すぎるものでも、極端に遅すぎるものでもありません。ちょうど「平均的」なフレームです。2つのキャプチャでは同じタイムライン・スケールのフレームが表示されている点に留意してください。

着目すべき点：

・UnrealのゲームのCPU負荷は通常、PlayCanvasのゲームの8倍以上です。ブラウザの「混合レイヤー」ステップ（タイムライン・キャプチャの緑の部分）を考慮しても、ほぼ6倍となっています。どちらのゲームもテスト用ハードウェアで概ね60Hzで一定しています。ただしPlayCanvasのゲームは1フレームを1ミリ秒以内で十分に処理できますが、Unrealのゲームは明らかにCPUに負荷をかけています。よりローエンドのハードウェアでは、CPUにパフォーマンスが左右されることとなります。

・CPU負荷は、Unrealゲームの方でより変動しやすく、また常に上昇しています。Unrealエンジンの内部を理解していない限り、この現象の説明は難しいでしょう。ただ、結果的に断続的にフレーム落ちが生じています。

結論

要点:
・Epicのゲームは、PlayCanvasのゲームの47倍以上の大きさです。
・Chromeでは、PlayCanvasゲームのロードタイムはUnrealゲームの17.6倍の速さです。
・UnrealゲームのCPU負荷は通常、PlayCanvasゲームの8倍以上です。
    
公平を期するために記載しますが、Epicは自社のドキュメンテーションで下記のように述べています:

HTML5パイプラインは、現時点では実験段階です。一部のプロジェクトは、HTML5プラットフォームに対応するようビルトした場合、的確に作動しない場合があります。多少の誤差はご了承ください。

しかし上記で確認できたとおり、Unrealでは明らかにUniryのWebGLエクスポーターと同様の問題が生じています。PlayCanvasのような「WebGL優先」のエンジンと比べて、Unrealのエクスポートサイズは膨大で、ロードタイムは長く、ランタイムパフォーマンスは低くなっています。

PlayCanvasでブラウザに最適なエンジンを構築する方法については、GitHubでオープンソース化されたランタイムを参照してください。PlayCanvasを使っていますぐ構築を始めるには、playcanvas.com.でサインアップしてください。また、Flappy Birdプロジェクトを参照するにはこちらをクリックしてください。