A question we get asked a lot is “How does PlayCanvas compare to Unity’s WebGL export?”. So let’s examine this in a blog post.
But first, let me quickly introduce Unity and PlayCanvas to the uninitiated. Unity is a game engine provided as a native, desktop application for Windows, Mac and Linux. PlayCanvas is an HTML5/WebGL game engine that is provided as a web application that runs in any browser on any operating system.
For the purpose of this article, we’re keeping things simple. We’ve created the ‘Hello World’ of apps in both Unity 5.3.2 and PlayCanvas: a spinning, textured cube:
The application above is the PlayCanvas app. I’m not embedding the Unity app since it can crash the page (if you’re feeling brave, click here to run it in a new tab).
We decided to look at 3 key metrics: download size, load time and frame rate.
To check the download size of each app, we disabled the cache in Chrome Dev Tools and recorded the total transfer:
We ran both apps on 12 different devices, from low end to high end. These were the recorded load times on a 50Mb/s connection to the net:
|Device||Browser||Unity (s)||PlayCanvas (s)|
|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|
Key things to notice:
- The PlayCanvas app’s load times are up to 43 times faster than the Unity app.
Here are the frame rates recorded for the same set of devices:
|Device||Browser||Unity (fps)||PlayCanvas (fps)|
|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|
Key things to notice:
- PlayCanvas frame rates are up to 4 times greater than Unity. In particular, Unity seems to perform poorly in Safari on iOS.
- Unity exhibits very unstable performance in Chrome for Android. Initially, the app’s frame rate is in the mid to high teens for approximately 20 seconds before it starts to rise to a number in the 50s. At that point it, it regularly drops frames and never reaches a solid 60FPS.
- PlayCanvas easily locks to 60FPS across all devices except iPhone 4S where an occasional frame is dropped. Ideally, a much heavier stress test would be required to start taxing PlayCanvas.
- Unity WebGL apps are up to 21 times larger.
- PlayCanvas apps load up to 43 times faster.
- PlayCanvas app frame rates are up to 4 times higher.
Even for the most basic of 3D apps, Unity struggles to achieve anything close to acceptable download size, load time and frame rate. It’s important not to somehow blame browser vendors or HTML5/WebGL for these results. As PlayCanvas proves, you can achieve incredible performance using these web technologies today as long as a sensible approach is taken when architecting an engine.
To learn how PlayCanvas built an engine so optimized for the browser, head over to GitHub to explore the open sourced runtime. And if you want to start building with PlayCanvas today, sign up on playcanvas.com.
If you want to look at the original projects that built the two apps used in the article, here is the Unity project, and here is the PlayCanvas project. After publishing this article, we noticed that the Unity project disables hardware anti-aliasing and uses bilinear filtering on the textures, whereas PlayCanvas enables AA and trilinear on the textures. So PlayCanvas is actually doing more work here.