Web runtime updates are here: Take your browser to the next level

At Unite 2023 we unveiled our latest web runtime offerings. This included more details on highly anticipated support for mobile browsers, an early look at what WebGPU can do for advanced graphics and rendering on desktop browsers, and an exciting announcement with our partners at Meta to bring Unity titles to the Instant Games platform on Facebook and Messenger. Keep reading for a deep dive on what’s in store for your next web-based project.

Unity has a long history with web runtimes. In 2006, the Unity web player debuted as a plug-in for web browsers. With the advent of HTML5, browsers began to remove support for plug-ins, and Unity’s web player was deprecated in 2015. Next, we adopted WebGL to run games directly in the browser with asm.js. Unity was there at the beginning of the WebAssembly (WASM) design process, and we’ve been evolving alongside WASM ever since. This brings near-native performance of the Unity Engine to the web. In 2018.2, our WebAssembly solution replaced asm.js as the default.

You haven’t heard from us in a while, but we believe we’re now at a tipping point for Unity content on the web.

In addition to our tech advances, we’ve updated our naming scheme for the platform. WebGL is now known as Unity Web in order to separate WebGL technology from Unity’s web platform. We also want to prepare for a future with more than one rendering standard. Eventually you’ll be able to create a build using WebGL, one with WebGPU, or a single build with both.

Offering content in this way gives gamers instant access to an experience with just the click of a link – or the scan of a QR code – without needing to install anything on their devices. In addition, when you bring your content into the secure environment of browsers, you have a direct connection between you and your gamers, without another online store getting in the way.

Web doesn’t have an installation step like other platforms, which promises low friction and instant engagement. However, this means users need to download the runtime and starter assets on first load. This means that for us, for you, and for all end users, load time is everything. There’s a ton of work being done to reduce load times, and you’ll hear more about that later in this post.

The depth and breadth of the engine gives developers the power to handle more complex simulations and interactive elements compared to other web technologies. That said, with users downloading the runtime and starter assets up front, smaller is almost always better in the context of the web – at least for now.

Given those tradeoffs, there are certainly some types of games that work better on the web than others, such as casual and hypercasual games, with their bite-size play sessions and easy-to-grasp mechanics.

Additionally, you can capitalize on the low-friction nature of the web by taking a small part of a larger game, say, your tutorial level, and making its own web build separate from the rest of the game and available for everyone. This allows for a frictionless first-time player experience without installing anything on their devices and gives you the opportunity to convert the player to the full native app after they’ve engaged with the mechanics.

The Artemis Real-time Orbit Website (AROW) is an interactive real-time tracker for the Artemis I mission, launched last November and built with Unity.

In mythology, Artemis is the twin sister of Apollo, so NASA named the series of missions that marks its return to the moon’s surface after the Greek figure.

Space fans around the globe were able to track where the Orion capsule was in orbit, as well as see its eventual splashdown site in the Pacific Ocean, all within their desktop web browsers. NASA is planning to build on this tool for all future Artemis missions and expand it to track not only the Orion capsule, but all mission components.

AROW was created by an intern, Seth Lambert, who has since become a full-time member of the NASA communications team.

At Unite, we were proud to announce that Android and iOS browser support will be coming in Unity 6. You will soon be able to run your Unity games anywhere on the web, including in iOS or Android browsers themselves. You will also be able to embed your games in a web view in a native app or use our progressive web app template to make your game behave more like a native app, with its own shortcut and offline functionality. We’re confident that if you’ve been targeting Unity Web on mobile, you likely had success with high-end mobile devices released in the last two or three years, but your results may have varied depending on your content. By the time we ship Unity 6, we’ll have clearer guidance around the minimum hardware requirements for Unity Web on mobile.

Here you can see our recent 2D sample project Happy Harvest running in Safari on an iPhone 15 Pro.

Safari has started supporting WebGL2, allowing Unity Web to work on iOS as well as Android devices. We’ve seen continuous advancements in both mobile network speed and reliability, as well as ever-improving CPU and GPU power. With modern audiences hungry for instant experiences with very low friction, we believe players are now primed for short-form interactive content.

As announced in the Unite Keynote, Unity has partnered with Meta to build support for their Instant Games platform. By unlocking this ecosystem for creators, players will be able to find and play games instantly on Facebook and inside Messenger conversations. With an audience of gamers in the hundreds of millions, this is a fantastic opportunity for you to extend your content’s reach to a whole new cohort.

“The close collaboration between Meta and Unity has already yielded some promising early results in terms of performance gains for HTML5 games built using Unity,” noted Andrew Mo, product lead for Facebook Gaming at Meta. “We are excited to continue this momentum into the coming year and look forward to making it easier for game developers to bring their content to Facebook and Messenger.”

He added, “We believe there’s a lot of potential in making games instantly accessible, especially when they’re designed to be played with your friends and community. And we’re excited to partner with Unity to unlock that potential on our platform.”

“There’s a lot of potential in making games instantly accessible, especially when they’re designed to be played with your friends and community [...] we’re excited to partner with Unity to unlock that potential on our platform.” – Andrew Mo, Product Lead for Facebook Gaming, Meta

There are a number of things the Unity Web platform team is working on to facilitate this partnership, including a dedicated build target so you can test, optimize, and publish games in a streamlined flow tailored for Instant Games. There will be a C# SDK to interface with Instant Game APIs and a multitude of net new optimizations to ensure players can get into games in seconds.

We’re also partnering with game studios to validate this new tooling. Launch partners include Coatsink, who have a few games on Meta’s platforms, including Ready, Set, Cook! Soon after Coatsink signed on as a launch partner, the team at Unity applied some early optimizations to this game, and the results were extremely promising.

With just a 25% drop in load time, active sessions grew by 50% and click-to-play rates jumped from 35% to 58%. This means that at the very beginning of this optimization work, Ready, Set, Cook! went from most players never seeing gameplay to the majority getting into a game with their friends. This is just the tip of our optimization iceberg, but you can see how relatively small reductions in load time can make a huge difference in engagement.

This graph shows a comparison between the original build provided by Coatsink and the optimized version with our latest Instant Games-ready tools applied. As you can see, we’ve already reduced the time to interactivity for Ready, Set, Cook! by over 50%. This particular test was run on a Pixel 5 throttled to 48 Mbps.

In the chart above, you can see what the load times were before optimization and where we are currently using Ready, Set, Cook! as a testbed title. First, throttled to 48 Mbps – this is the global median mobile network speed as reported by Ookla, not even 5G. At the global median broadband speed, 86 Mbps, we’re even faster. On a solid 5G connection at 176 Mbps, we saw even faster speeds, but we also encountered diminishing returns as network bandwidth is no longer the primary limiting factor.

To achieve fast load times, it’s necessary to look at all aspects of the download and initialization of your game within the web browser.

A web build consists several files:

• WebAssembly (.wasm) file: This is the binary executable including the Unity Engine and your game logic.
• A large resource file (.data): This includes global metadata and asset resources for scenes included in the build.
• There may be asset bundles or Addressables.
• Your WebGL template (HTML and CSS), and some Unity Framework JavaScript files to get it all going.

To begin with, there are some initial best practices you should follow to create a good release build, including:

• Telling the compiler and linker to build for optimal code size
• Using Brotli compression
• Adding HTTP preload tags to your web template to load any asset bundles and Addressables required for the first scene up front.

We will be making these the default in the upcoming Instant Games build target.

Also, consider how to reduce the perceived load time experienced by your players by displaying a splash screen or animation while the Unity Engine is loading and initializing.

Depending on your game, the assets may be bigger or smaller than the WebAssembly.

First, consider some best practices. Since the time taken to load that first scene is critical, consider using the Unity Addressables System to break each asset into a separate download. Then, add HTTP preload tags to preload Addressables that are required for the first scene. Subsequent scenes will then load assets on demand from the Addressables system.

If your game has lots of audio usage, be sure to use compressed audio, and consider forcing it to mono and lowering the audio quality.

Second, let’s look at the graphics settings used. Choosing ETC Crunch compressed textures gives the smallest download sizes and keeps GPU memory usage low on mobile devices. If you’re using ASTC compressed textures, look carefully at the block size, choosing larger block sizes for smaller textures. Likewise, configure shader stripping in the Player Settings for your project.

WebAssembly technology isn’t standing still, and we’re bringing the updates to Unity. We’re incredibly grateful for the work done in the Web W3C Communities to support these advanced technologies. Web gaming isn’t possible without the investments and support from all browser developers. We particularly appreciate our collaboration with the Chrome team at Google. Together, we’ve worked on strengthening gaming use cases for WebAssembly and graphics performance for complex gaming workloads.

The Emscripten compiler brings your Unity il2cpp build to WebAssembly. With each new Long Term Support (LTS) release, we include the latest version of Emscripten, allowing for faster development builds and smaller, more optimized release builds (which can take a while to build).

In Unity 6, you will be able to enable 4GB memory support. This enables bigger real-time 3D experiences on the web, making use of the larger memory available to desktop browsers. In the future, this will pave the way for 64-bit memory support once all browsers release support for it.

Currently, when you enable exception support for web builds, there’s some overhead, such as when code is added to all functions to support try/catch. With WebAssembly native exception handling, which will be available as an option in Unity 6, exceptions will be available with little overhead.

Also in Unity 6, you can enable WebAssembly SIMD support. This accelerates CPU mathematical calculations with vectorized instructions. It works on both x64 and Arm devices, mapping the WebAssembly SIMD instructions to either SSE or Arm NEON when the web page is loaded. Improvements here vary by device and browser, but they are noticeable.

These features are optional and are only available on newer web browser versions.

The introduction of a new WebGPU backend marks a significant milestone for web-based graphics acceleration, paving the way for unprecedented leaps in graphics rendering fidelity for Unity web games.

WebGPU is designed with the goal of harnessing and exposing modern GPU capabilities to the web. This new web API achieves this by providing a modern graphics acceleration interface that’s implemented internally via native GPU APIs such as DirectX 12, Vulkan, or Metal, depending on the desktop device you use.

WebGPU will unlock support for new and exciting rendering features, enabling a level of graphics fidelity previously unseen on desktop web. Like other modern graphics APIs, lower-level control over the rendering setup and GPU execution unlocks new optimization opportunities, which could lead to reduced CPU and GPU overhead and improved throughput and latency.

WebGPU also brings compute shaders to the web for the first time. GPU Compute Skinning radically improves the performance of rendering skinned mesh characters. Now, the vertex transformations are all offloaded to the GPU. The demo above takes advantage of GPU Skinning to mesh the skin of these robots to the skeleton underneath, while maintaining a relatively high framerate. If this was done on the CPU, it would run at single-digit FPS.

Another example is Unity’s VFX Graph, which procedurally generates geometry directly within compute shaders. In the below particle simulation, we have just over half a million particles being animated, and they’re all being moved through compute shaders on the GPU.

You may have seen the Boat Attack demo above in the past. Now, you can see it running entirely on WebGPU. WebGPU is enabled today on Google Chrome and Microsoft Edge on macOS and Windows. In this last example, we display an interactive Boat Attack, rendered in WebGPU.

Throughout development of Unity’s backend for WebGPU, Unity graphics engineers have been working closely with the Chrome team to stress test WebGPU with large scenes and complex shaders, yielding fantastic results.

The WebGPU graphics backend is still in development, and we do not recommend using it for production use cases. However, it’s available now in early access. Details for how to get started can be found in the graphics forum.

Web is incredibly powerful because of its potential for frictionless engagement and a direct connection with your players. Because they download the WASM and starter assets up front, reducing load time is critical for web projects. Because of those tradeoffs, smaller pieces of content are typically best suited for the web.

Coming late in 2024, build and deploy your Instant Games to Facebook and Messenger to access a whole new audience. If you would like to work directly with Unity and Meta to gain early access to tools and resources for making your Instant Games a success, or would like to stay up to date about this new platform support initiative, register your interest today.

Mobile web support starts in Unity 6. Learn more about Unity 6 from the Unite Keynote.

If you’re the tinkering type, go read our forum post about WebGPU – coming in Unity 6 – for information on early access to the WebGPU backend. Then, discover even more of the latest engine developments from the now-available, on-demand Unite 2023 sessions, including the Unite session “Instantly get your Unity game to more players on the web” (embedded below).