2 posts tagged with "unity"

Welcome to Developer Spotlight! A new series of blog articles where we talk to developers about how they use PlayCanvas and showcase the fantastic work they are doing on the Web.

Today we are excited to be joined by Christina Kaliora, a freelance web and games developer for Solar Games.

She will showing us the how she recently ported the John Lemon's Haunted Jaunt Unity project to PlayCanvas in the video presentation below covering areas:

• Exporting the scene from Unity
• Performance concerns
• Use of shaders and effects
• And more!

Presentation Slides

Hi Christina, welcome to Developer Spotlight! Tell us about yourself and your studio​

Hello! My name is Christina Kaliora and I’m a Games Programmer. I wrote my first line of code in September of 2016 inside PlayCanvas! I still remember that excitement when I saw my cube rotating! That’s when I said "This is what I wanna do!".

After that, I started learning more about PlayCanvas and experimenting with other Game Engines, like Unity. Later, I attended an online coding bootcamp about web development, and since then, I work as a freelancer both for Web Development projects and web based games (using PlayCanvas).

Also, together with my husband and some friends we run a company called Solar Games, where we develop tools and projects for PlayCanvas.

Why did you choose PlayCanvas?​

PlayCanvas caught my attention from the very beginning! Some of the main reasons me and my team choose PlayCanvas:

• PlayCanvas is one of the most powerful web based game engines out there.
• It is the only web based game engine that has such a powerful and collaborative editor.
• It has amazing support in the forums and discord and also, a great team to back it up!
• It has very good performance!

What were the initial challenges and how did the team overcome them?​

Personally, when I started, I had a very hard time getting a good grasp of PlayCanvas. There weren’t that many tutorial projects back then and since I was pretty much a newbie in coding, I had a very hard time understanding the coding concepts of game development.

What helped me there, was building smaller projects focused on specific areas, for example physics, player movement, raycast, UI, shaders etc. That way, I learned how to work with the API and I was able to start building larger projects/games.

Also, studying the engine’s code is something that any aspiring PlayCanvas developer should get into and helped me personally! Learning the inside and out of the game engine you're using will help you tremendously!

How is building an HTML5 game/experience different from a native game/experience?​

It is quite different in my opinion. Since things on the web work a bit differently, there are also different things that need to be taken into consideration. For example, loading times and download size are some very important things that web game devs need to pay attention to.

No one wants to wait over 30 seconds for a web page to load, right?

What are the team's favorite features of PlayCanvas?​

Favorite feature is the editor, by far. The fact that it is collaborative in real time, makes PlayCanvas the best tool for teams to work together. Also, the fact that PlayCanvas has version control integrated, is pretty cool! Something else I would add, is that PlayCanvas provides a very clean API to work with.

What is on the feature wishlist for PlayCanvas this year?​

Oh, there are so many things, but I will short down my list down to three:

• More starter templates!
• I would love to see the list of post processing effects growing! There isn’t something better than a web based game with nice graphics and effects. It would be great to provide developers with the tools to do so.
• Better particle editor. We need more VFX artists in PlayCanvas!

How do you see HTML5 games/experiences evolve over the next few years?​

I think that, since the devices are becoming more and more powerful and with the webGPU on the way, web games will become more and more popular.

Imagine, being able to play your game both on any web browser, phone, tv without the need of downloading and installing anything? It’s mind blowing to me!

And now with all the Metaverse buzz I see that web based experiences are gaining more and more attention.

Thank you very much for your time and we look forward to your presentation​

Thank you very much for inviting me!

Useful links:

• Play the game
• Public project link
• Twitter @christinaKlra
• Portfolio

Stay tuned for more Developer Spotlights in the future!

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.

Download Size​

To check the download size of each app, we disabled the cache in Chrome Dev Tools and recorded the total transfer:

Unity	PlayCanvas
4.72MB	0.22MB

The Unity app is over 21 times larger than the PlayCanvas app. How is this possible? The PlayCanvas engine is a miniscule 147KB when GZIPped meaning the code and assets for the app account for the remaining 73KB. The engine is so small because it is hand-crafted in JavaScript, relying on as much functionality as possible from the browser itself.

Unity, on the other hand, relies on Emscripten to export to WebGL. This tool auto-converts C# code to C++, which in turn is compiled to LLVM before finally being turned into JavaScript. A side effect of this process is the generation of huge amounts of code, which bloats the exported application, overwhelms modern JavaScript engines and often causes the browser to run out of memory.

Load Time​

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)
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

Key things to notice:

• The PlayCanvas app's load times are up to 43 times faster than the Unity app.
• The Unity app fails to even load on lower end devices. The sheer amount of JavaScript causes the browser on those devices to run out of memory loading the page.
• Load times for Unity are up to twice as slow in Chrome as Safari. This could be down to Chrome spending more time preparing the app's huge JavaScript codebase for execution.

Frame Rate​

Here are the frame rates recorded for the same set of devices:

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

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.

Conclusion​

To summarize:

• 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.

Update​

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.