Developing with WebXR: How Playko Built Ski Fit 365 on the Wonderland Engine

Playko’s Ski Fit 365⁠, a WebXR-based downhill skiing experience built on the Wonderland Engine⁠, combines lower-body leg tracking (by placing the Quest controller in your sock) with an immersive ski resort experience that includes a helicopter ride directly to the lobby of the resort, followed by racing down the slopes.

Wonderland Engine is a development platform for web-based VR, AR, and 3D applications, with a 3D editor application and an efficient WebAssembly-based runtime that runs in the browser.

We recently sat down with Playko CEO/CTO Yinch Yeap and Wonderland CEO Jonathan Hale for a look at how Playko built Ski Fit 365 on the Wonderland Engine. Read on for more details.

Yeap: Ski Fit 365 is a WebXR-based ski game that delivers the complete ski adventure experience. It is the first activity in a future suite of VR games called “The Fitness Resort” that will include further extreme sports experiences with fitness-building games. These will all incorporate a way to remotely exercise with online friends on a social fitness platform. The Fitness Resort is part of a campaign to demonstrate that WebXR can deliver a convenient, engaging, high quality experience that attracts and holds players.

Yeap: WebXR combines the power of immersive VR with the convenience of the web. The web is the platform of least friction, with nothing to install. Sharing an experience is one click away. It allows for easy updates to the software and flexibility in configuring for different deployments scenarios e.g. consumer vs commercial versions. WebXR is also device-agnostic, and this standard gives new hardware instant access to a growing range of creative and immersive experiences.

I wanted Ski Fit 365 to reach as wide an audience as possible and with the success and growing popularity of standalone headsets like the Quest 2, it became important to find a way to reach both tethered and standalone VR users. Using WebXR allowed us to serve both these markets without needing to target platform-specific builds nor depend on native app stores.

Yeap: Playko was founded in 2000 after I had worked as lead developer on console and disc-based titles. It was formed with the vision of bringing videogame technologies into non-videogame industries and to make digital interactive entertainment with truly mass appeal. We started with making digital interactive kiosks for trade show video walls (including Ford Motor Company) and then moved into online web apps then mobile apps.

Playko started working in VR when the Oculus Rift was released. We build and manage lots of Windows native SteamVR learning experiences that cover biology, history, space and geography. Our most recent work is in commercial VR training and collaboration. We have been interested in the convenience and affordability of the Quest headsets since they first arrived and believe they are the beginning of a new age of immersive interactivity.

Hale: AR and VR both conceptually provide so much value that it is a mere matter of time, with further incremental innovations, for it to be used by a majority of the population. The 2D web in XR will play a central role in our lives, like it does today with flat media, but we have the potential to do so much more! From VR web apps and VR browser games to immersive interactive websites, nearly anything that is possible on native could also be done on the web.

Some apps are either too specific, too small or too experimental for distribution through the store to make sense. The web provides a place to quickly publish and instantly access apps without needing to install and uninstall.

Native VR already has challenging requirements for performance, interaction and workflow. On top of these, the web adds some of its own: keep loading times at a minimum, graphics API limitations and unique performance characteristics.

That makes development of VR on the web uncharted for both native and web developers alike, requiring an intersection of those skill sets to build complex WebXR experiences. Not surprising that there is a myth that 3D/VR/AR on the web can’t run fast.

Wonderland Engine is a development platform for VR and AR on the web. It tackles the challenges of building WebXR applications by handling the unique performance characteristics of the web and supporting the developer in common WebXR development tasks like asset optimization and compression while providing a rapid workflow with sub-second packaging times.

With Wonderland Engine, you can rapidly put together XR web apps that use many thousands of dynamic objects, higher resolution textures and more skinned characters without wasting time on manual optimization and focus on your app’s logic instead.

Yeap: The Wonderland Engine is very performance driven. It is designed specifically for WebXR and does not carry the legacy baggage of the other web and native development frameworks. As the Ski Fit 365 features were added to improve user experience, the graphical demands (frame rate and visual quality) rose beyond the reach of other engines. This made Wonderland the natural, logical choice.

Development in the Wonderland Engine is Javascript-based and has a dedicated native IDE that mirrors the Scene preview paradigm of many other dev tools. It also has an extremely useful set of starting templates as well as extensibility through a component system. Besides the bundled components, other powerful features and examples are available and freely shared from the Wonderland website⁠. Beyond the extremely powerful graphical capabilities, Wonderland also excels by packaging deployment-ready builds in 1 second or less. This allows for a very responsive design-and-test iteration cycle that is crucial for testing concepts and refining designs.

Hale: Playko software has a strong innovator mindset, and they are always looking for better solutions. They joined the Wonderland Engine community in early 2021 and explored the development platform with a couple of small experiments.

As Playko was hitting performance issues with Ski Fit 365, we offered to help Yinch Yeap and his team with moving the project to Wonderland Engine. To match Wonderland Engine’s feature set to their needs, Playko sponsored development of features like an IK solver and spline-based meshes for procedural ski slopes.

For us, their ambitious project was a perfect opportunity to demonstrate the power of Wonderland Engine’s focus on WebXR and meant a big step closer towards our common vision of matching WebXR performance and presentation to what native apps deliver.

Yeap: The initial prototype of Ski Fit 365 was written in Unity which I had previously used to make a successful WebXR Airbus cockpit trainer. However, this platform, eventually, could not deliver sufficient graphical power to fully realise the game’s expanding vision. There was enormous help from the WebXR Discord⁠ community, including members of the Oculus Browser team. Many, many optimisations and compromises were made to try to get the engine to maintain a usable framerate but it became increasingly difficult to have any spare capacity for future development and upgrades. We had to become good at reading the performance profilers, understanding where the frametime was being spent and trying to find ways to maintain graphical quality (and user experience) as much as possible.

In the end, we ran out of options for improving the Unity performance before we reached our design goals and had to switch over to the Wonderland Engine. Jonathan extended enormous help to our team in porting the game from Unity to Wonderland. His contribution and participation were absolutely crucial to helping the game cross over to the new system. He continued to support the development with direct contribution to the codebase as well as enhancing the Wonderland Engine to deliver even better performance.

We had initially deferred creating leaderboards and implementing monetization because of time constraints, but we found that Wonderland offered integration with a WebXR-specific website called Construct Arcade⁠ that offered these features, along with hosting, publishing, and simple access to user login. This helped to provide so much of the external infrastructure that “finishes” a game for the complete player experience.

Hale: Once you get closer to the complexity of native apps, overcoming the performance challenges of the web is no longer sufficient and proven optimizations like culling or drawing order optimizations become important again. It is surprising how far Wonderland Engine can take you without them, but for the final mile, some manual tweaks to drawing order were required. We are looking to implement further common optimizations in upcoming releases of Wonderland Engine.

Yeap: We wanted players to enter a VR experience that felt like “being” somewhere real. This meant designing towards realism as far as the technology would allow. Spaces and objects with authentic scale, realistic resort buildings, highly responsive leg-steered skiing, ski slope gates and hundreths-of-a-second timers were all included to provide real-world familiarity to the virtual environment.

The professional skiers on the team directed us towards visual references for the scale and sophistication of modern ski resorts. We also incorporated elements familiar from downhill ski racing events around the world. The work towards the final versions of these design goals is ongoing but we are pleased with the immersion the current version already provides.

Yeap: VR designers are faced with the enormous responsibility of providing everything to the participant. When immersed, the user cannot access their phone or desktop or tablet to find help. Playtesting led to the inclusion of visual instructions including an animated skier figure to explain the required stance and motion. Wherever possible written instructions were made highly visible.

An interesting design challenge arose towards the end of the project where the skiing was reported to be too tough for casual users to finish but too easy for expert skiers. Based on that feedback, the game has been updated to have both an easy and hard mode when choosing the course - with the tougher setting requiring greater fine control of speeds to achieve good times.

Yeap: We started on marketing and promotions as early as we could but that was still not long before the initial launch (due to the rapid development period). We made contacts within the ski community through UK Olympic skier Tim Dudgeon and World Cup skier Jack Gower. I connected with other developers on the WebXR Discord server to raise awareness and gather feedback on design and improvements. The best outcome has been getting the skiers’ testimonials and the opportunity to be listed on the Quest Browser new tab page. The public, and even many native VR users, are not aware of what WebXR is and what it can do, so marketing a WebXR game always has to contain some explanation of how to get and play the game.

As developers and creators, it is easy to focus on the production of the software, to toil, sweat and bleed to make it better and better. But this is only one aspect of a successful game. An equal challenge is awareness and that is often not a natural space for engineers. The best chance for your game to be successful is to acknowledge the importance of raising awareness, through press releases or active social media or specialist press who might have a specific interest in something unique about your title.

You don’t have to do everything yourself. It’s good to get help from people who can help tell your story to individuals or companies that already have established communities.

Yeap: Designing for VR is a spatial design challenge. Less like flat screen, page, and tablet design and more like product design, interior design and architecture. As a VR developer you are put in charge of the player’s reality and visual environment. It’s really, really fun! But there are not yet well established templates for what works best. There is also a range of devices and their performance to consider. Hardware spans everything from the powerful dedicated GPU desktop computers to the convenient but less powerful standalone headsets. This equilibrium is still being altered by improvements in hardware as well as the demographics of the marketplace. There will be an increasing number of casual non-gamer users as time goes on.

There are many knowledgeable and helpful communities online and in the Discord universe. I found their assistance to be absolutely vital to our game development process. Do not be afraid to ask for help.

With the radically different needs of VR as a medium, it will be likely that existing tools will not always be a natural fit for what needs to be done. Be aware of the limitations of established tools and consider tools (like Wonderland Engine) which specialise in doing certain things very, very well.

And finally, the best news is that VR is still a new continent. Much is left to be done, to be explored, to be harnessed and commercialised. Let your imagination run free. What a great time to dare mighty things.

WebXR is a powerful combination of connection and interactivity which will be an essential ingredient in the immersive web of the future. I encourage everyone to play their part in shaping what this will be. To challenge established thinking, to undertake bold ventures and to build new worlds.

Hale: WebXR is a great place to start. You can get a simple application up and running in minutes without much previous development experience and publishing is as simple as pushing the result to a web server.

It may also be a great way to test your game ideas by launching them as VR browser games on Construct Arcade⁠ before building them out to full store offerings.

If you are interested in getting into WebXR development with Wonderland Engine, our Quick Start guide⁠ is a great place to start. With some Unity experience, you should be able to get up to speed in no time with our Unity to Wonderland Engine guide⁠. For support and questions, reach out on the Wonderland Engine Discord community⁠.