Porting from Unity to PlayCanvas – Developer Spotlight with Christina Kaliora

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
  • Perfomance 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:

Stay tuned for more Developer Spotlights in the future!

Our 2022 developer showreel is live!

Welcome to our 2022 showcase, showing some of the very best WebGL browser games and experiences made with PlayCanvas!

We would like to thank our users that have allowed us to show their awesome content in this showcase:

See more games and experiences on Made with PlayCanvas!

PlayCanvas Releases glTF Viewer 2.0

Today, we are excited to announce the 2.0 release of our glTF viewer.

glTF (or Graphics Language Transmission Format) has become ubiquitous since its introduction in 2015. With support for advanced shading techniques, it is particularly important for graphics intensive applications like product configurators/visualizers. 

With so many companies now relying on glTF to transmit graphics data over the web, it is critical that high quality tools are available to work with the format. This led us to develop v2.0 of our popular glTF viewer.

Let’s take a closer look at what’s new.

Improved glTF Specification Support

The glTF format is managed by the Khronos Group and defines a base specification along with a variety of extensions. The first version of the viewer support 100% of the base spec plus the following extensions:

  • KHR_draco_mesh_compression
  • KHR_lights_punctual
  • KHR_materials_clearcoat
  • KHR_materials_unlit
  • KHR_mesh_quantization
  • KHR_texture_basisu
  • KHR_texture_transform

The new and improved viewer released today adds support for:

  • KHR_materials_emissive_strength
  • KHR_materials_ior
  • KHR_materials_sheen
  • KHR_materials_specular
  • KHR_materials_transmission
  • KHR_materials_variants
  • KHR_materials_volume

These extensions provide developers with the ability to achieve exciting new graphical effects. 

Let’s take a look at three of them.

Advanced Refraction

The volume, transmission and ior glTF extensions can simulate how light is refracted through transparent materials. This leverages PlayCanvas’ grab pass functionality to ‘grab’ and sample the back-buffer.

Realistic Rendering of Fabrics

glTF’s sheen extension enables developers to faithfully reproduce materials with the appearance of certain fabrics. This is incredibly important for production visualization (home furnishings, apparel, vehicle interiors and so on).

Material Variants

Most product configurators allow the user to modify the appearance of a product. For example, a specific style of chair might be upholstered in various fabrics in various colors. Or a pair of shoes might be available in a number of different designs/patterns/colors.

The PlayCanvas viewer now detects any material variants in the loaded scene and permits their selection in the interface.

Rendering Enhancements

The new viewer introduces a couple of interesting features if you care about rendering fidelity. 

First up is a ‘High Quality Rendering’ mode (which is a toggle in the Camera control panel). 

Enabling this feature activates supersampling which is a type of antialiasing that aims to eliminate jagged edges along polygons. It progressively re-renders the scene many times when the camera stops, slightly offsetting and then compositing the rendered image over previous frames. 

You can see both in action below, deliberately reduced in resolution to show the effect:

Also new is sharper reflections for smooth reflective surfaces. The viewer will now use the full resolution skybox cubemap in the engine’s image-based lighting pipeline which looks crisp and far more realistic.

Interface Redesign

Initially, all information and controls for the viewer appeared in the leftmost panel. Viewer 2.0 has been completely redesigned to more intelligently group specific areas of functionality. The leftmost panel remains but now just shows scene info and a tree view showing the loaded scene hierarchy.

Buttons to control viewer settings can now be found at the bottom of the 3D view. These buttons open options for camera, lighting and debug rendering (plus a fullscreen toggle).

If you load a scene that contains animation, animation controls will automatically appear:

The controls allow you to scrub through an animation, select playback speed and even choose which animation clip to play should the file contain more than one.

Lastly, there is also now a button bottom right to download a rendered PNG of the 3D view.

Open Source

PlayCanvas is fully committed to an open source strategy and our glTF viewer is therefore made available to you on GitHub. It is a TypeScript application built on PlayCanvas PCUI front-end framework and, of course, the PlayCanvas Engine runtime.

These open source projects have been years in the making and would not have been possible without the amazing OSS community. So why not explore our various GitHub repositories and consider making some contributions of your own. We also appreciate feature requests and bug reports, so don’t be shy!

We hope you find the new and improved glTF viewer useful for your projects. Stay tuned for further updates to it in the coming months!