「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 4.72MB 0.22MB
一方Unityは、WebGLへのエクスポートの際Emscriptenに依存します。このツールはC#コードをC++コードに自動変換します。その後LLVMにコンパイルしてから、JavaScriptへと変換します。この処理の影響で莫大な量のコードが生成されるため、エクスポートされたアプリケーションのサイズが増加し、現在のJavaScriptエンジンに圧倒的な負担がかかります。結果的に、ブラウザのメモリ不足となります。
ロードタイム
弊社は2つのアプリケーションを、ローエンドからハイエンドまでの12個の異なるデバイスで実行しました。
下記は、ネット接続が50Gの場合のロードタイムの記録です:
デバイス ブラウザ Unity(秒) PlayCanvas(秒) iPhone 4S Safari クラッシュ 2 iPhone 5S Safari 18 1 iPhone 6 Safari 17 1 iPad Mini 2 Safari 21 1 Samsung Galaxy Tab S2 Chrome 51 19 1 Samsung Galaxy Note 10.1 2014 Chrome 51 28 1 Samsung Galaxy S6 Edge Chrome 51 28 1 Samsung Galaxy Note 4 Chrome 51 28 1 LG Nexus 4 Chrome 51 44 2 Leapfrog Epic Chrome 51 43 1 Blackberry Z10 Default Browser クラッシュ 1 PC (Core i7 + GeForce GTX 880M) Chrome 51 13 1
重要な留意点:
・PlayCanvasアプリケーションのロードタイムはUnityアプリケーションに比べて、最大で43倍の速さです。
・Unityアプリケーションでは、ローエンドのデバイスでもロードエラーが発生します。これらのデバイスでは、ページをローディングする際に多量のJavaScriptが原因となってメモリ不足となります。
・Chromeでは、UnityのロードタイムはSafariと比べて最大で2倍の時間を要します。これは、Chromeがアプリケーションの膨大なJavaScriptコードベースの実行準備に時間がかかるためです。
フレームレート
下記は、上記と同じデバイス群についてのフレームレートの記録です:
デバイス ブラウザ Unity(fps) PlayCanvas(fps) iPhone 4S Safari クラッシュ 58 iPhone 5S Safari 21 60 iPhone 6 Safari 28 60 iPad Mini 2 Safari 16 60 Samsung Galaxy Tab S2 Chrome 51 17-55 60 Samsung Galaxy Note 10.1 2014 Chrome 51 15-50 60 Samsung Galaxy S6 Edge Chrome 51 15-50 60 Samsung Galaxy Note 4 Chrome 51 15-57 60 LG Nexus 4 Chrome 51 15-50 60 Leapfrog Epic Chrome 51 16-55 60 Blackberry Z10 Default Browser クラッシュ 60 PC (Core i7 + GeForce GTX 880M) Chrome 51 57-60 60
重要な留意点:
・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はこの点でもより多くの実績をあげています。
PlayCanvas Management Office
Updated 3 months ago
This is a translation of the following document, published on August 4, 2016.
PlayCanvas versus Unity WebGL
How does PlayCanvas compare to Unity WebGL export? We are often asked, "What is the best way to do this? In this paper, we will compare the two.
First, for beginners, we'll introduce Unity and PlayCanvas: Unity is a game engine delivered as a native Windows, Mac, and Linux desktop application; PlayCanvas is an HTML5/WebGL game engine delivered as a web application that runs on all browsers and operating systems; and PlayCanvas is an HTML5/WebGL game engine delivered as a web application that runs on all browsers and operating systems.
In order to carry out the purpose of this paper, we will make a simple configuration. We created the application Hello World in both Unity 5.3.2 and Play Canvas. In this application, a textured cube is rotated.
Click here for full screen view
What you see above is the PlayCanvas application. I didn't embed the Unity application because it would crash the page. (Click here if you're brave enough to do it in a new tab.)
The comparison is made on three main criteria: download size, load time and frame rate.
Download Size.
In order to check the download size of each application, we have deactivated the cache in the Chrome development tool and recorded all transmissions:
Unity PlayCanvas
4.72MB 0.22MB
The Unity application is more than 21 times larger than the PlayCanvas application. The PlayCanvas engine is very small, 147KB when gziped, and the remaining 73KB in application code and assets.Because it was handcrafted in JavaScript, the PlayCanvas engine is very small and relies as much as possible on the functionality of the browser itself.
Unity, on the other hand, relies on Emscripten when exporting to WebGL. This tool automatically converts C# code to C++ code. After that, it is compiled into LLVM and converted to JavaScript. The effect of this process is to generate an enormous amount of code, which increases the size of the exported application and is overwhelming to the current JavaScript engine. As a result, the browser will run out of memory.
load time
We ran two applications on a dozen different devices, ranging from low-end to high-end.
The following is a record of the load time when the net connection is 50G:
Device Browser Unity(sec) PlayCanvas(sec)
iPhone 4S Safari Crash 2
iPhone 5S Safari 18 1
iPhone 6 Safari 17 1
iPad Mini 2 Safari 21 1
Samsung Galaxy Tab S2 Chrome 51 19 1
Samsung Galaxy Note 10.1 2014 Chrome 51 28 1
Samsung Galaxy S6 Edge Chrome 51 28 1
Samsung Galaxy Note 4 Chrome 51 28 1
LG Nexus 4 Chrome 51 44 2
Leapfrog Epic Chrome 51 43 1
Blackberry Z10 Default Browser Crash 1
PC (Core i7 + GeForce GTX 880M) Chrome 51 13 1
Important Notes:
PlayCanvas application load times are up to 43 times faster than Unity applications.
In Unity applications, load errors occur even on low-end devices. These devices will run out of memory due to the large amount of JavaScript when loading pages.
In Chrome, the load time of Unity takes up to twice as long as Safari. This is because Chrome takes a long time to prepare an application's massive JavaScript codebase to run.
frame rate
The following is a record of the frame rate for the same group of devices as above:
Device Browser Unity(fps) PlayCanvas(fps)
iPhone 4S Safari Crash 58
iPhone 5S Safari 21 60
iPhone 6 Safari 28 60
iPad Mini 2 Safari 16 60
Samsung Galaxy Tab S2 Chrome 51 17-55 60
Samsung Galaxy Note 10.1 2014 Chrome 51 15-50 60
Samsung Galaxy S6 Edge Chrome 51 15-50 60
Samsung Galaxy Note 4 Chrome 51 15-57 60
LG Nexus 4 Chrome 51 15-50 60
Leapfrog Epic Chrome 51 16-55 60
Blackberry Z10 Default Browser Crash 60
PC (Core i7 + GeForce GTX 880M) Chrome 51 57-60 60
Important Points to Keep in Mind:
The frame rate of PlayCanvas is up to 4 times higher than Unity. Unity performance is degraded, especially in Safari on iOS.
The performance of Unity is very unstable in Chrome for Android. First, for the first 20 seconds, Unity's frame rate goes from 15fps to less than 20fps, and then rises to the 50fps range. At this point the frame rate will always drop and will never be stable at 60fps.
PlayCanvas immediately stabilizes to 60fps on all devices except the iPhone4S, with the iPhone4S experiencing an occasional drop in frame rate. For this reason, ideally PlayCanvas would need to be tested with more load.
Conclusion.
Bottom line.
The size of Unity WebGL applications is up to 21 times larger.
The loading speed of the PlayCanvas application is up to 43 times faster.
The frame rate of the PlayCanvas application is up to 4 times.
Even the most basic 3D applications are difficult to reach satisfactory sizes, load times, and frame rates in Unity. It's important not to attribute this result to browser vendors or HTML5/WebGL; as PlayCanvas has proven, even with these latest web technologies, it is possible to achieve very high performance if a sensible approach is taken to building the engine.
To learn more about how PlayCanvas, the best engine for browsers, was built, see the open-sourced runtime on GitHub; if you want to start building with PlayCanvas, sign up at playcanvas.com.
Update.
Click here for the Unity project and here for the PlayCanvas project to see the original project that builds on the two applications used in this paper. One thing I noticed after publishing this paper is that hardware anti-aliasing is disabled in the Unity project and bilinear filtering is used for textures. In PlayCanvas, on the other hand, anti-aliasing and trilinear filtering are enabled. For this reason, PlayCanvas has more experience in this regard as well.
Translated with www.DeepL.com/Translator (free version)
2020年3月27日金曜日
HTML5&CSS3＆JavaScriptでWEBGLを扱いPCでもタブレットでもスマホでも60Fpsが出せるPlayCanvasとUnity WebGLの比較。Compare PlayCanvas and Unity WebGL, which can handle WEBGL with HTML5&CSS3&JavaScript and achieve 60Fps on PC, tablet and smartphone.
全画面表示はこちら
UnityアプリケーションはPlayCanvasアプリケーションの21倍以上の大きさです。なぜPlayCanvasではこれほどまでにアプリケーションサイズを小さくできるのでしょうか？PlayCanvasエンジンはgzip圧縮すると147KBと極めて小さくなり、アプリケーションのコードとアセットで残りの73KBになります。JavaScriptにて手作業で作られたため、PlayCanvasエンジンは非常に小さいため、ブラウザ自体の機能性に可能な限り依存しています。
0 コメント:
コメントを投稿