Unreal Engine in WebAssembly/WebGPU

Rate this content
Bookmark

Traditionally, browser games haven't been taken seriously. If you want to target the web, that traditionally has meant compromising on your vision as a game developer. Our team at Wonder Interactive is on a mission to change that, bringing one of the world's premiere native game engines to the browser - Unreal Engine. In our talk, we'll dive into our efforts porting the engine to the browser and carrying on the pioneering unfinished work started at Epic Games nearly a decade ago in collaboration with Mozilla. We'll dive into what this means for the future of games in the browser, and the open metaverse on the web.

Alex St. Louis
Alex St. Louis
33 min
08 Apr, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Alex Saint-Louis, co-founder of Wunder Interactive, shares the mission of bringing Unreal Engine to the browser, enabling cross-platform 3D applications and games. They are working on a WebGPU back end for Unreal Engine to push the limits of 3D on the web. Wunder Interactive has improved compression, built their own asset file system, and offers powerful tools for game developers. They are utilizing modern web technologies like WebAssembly, WebGL, and WebGPU, and plan to support other engines like Unity and Godot. The team aims to transform the industry by bringing console-quality games to the browser and providing an alternative distribution path. They are excited to bring Unreal Engine 5 to the web with WebGPU support and are working on WebXR support for cross-platform 3D experiences, including VR.

Available in Español

1. Introduction to Unreal Engine in the Browser

Short description:

Alex Saint-Louis, co-founder and COO of Wunder Interactive, shares the mission of bringing Unreal Engine to the browser. They aim to enable cross-platform, real-time 3D applications and games, allowing developers to distribute directly online without going through storefronts. Alex's passion for media and games started with browser games, and his fascination with the intersection of film and games led him to research the Unreal Engine. Along with his co-founder Rob Stewart, they believe in creating an open platform on the web for game developers to freely distribute their apps. They started Wonder Interactive after realizing the commercial opportunity presented by WebAssembly and WebGL. They conducted research on Unreal Engine on the web and found that Mozilla partnered with Epic Games to bring it to the web.

♪♪ Okay, hello and welcome. My name's Alex Saint-Louis, I'm the co-founder and chief operating officer of Wunder Interactive. Delighted to be speaking to you today about Unreal Engine in the browser.

Just a bit of context on my company. We're on a mission to bring one of the world's premier native game engines to the browser, enabling cross-platform, real-time 3D applications and games, enabling developers to ship their applications without the need to go through wall-to-garden storefronts and pay 30% fees to storefronts and distribute directly online to their users.

So, a little bit about my background. I actually come from the realm of film and TV. I had an agent for a while, did some film here in Canada. Lifelong passion for media, games, got me started on the road to the video game industry. I think browser games were the first games that I ever played, had access to on just a regular computer. The ability for me to click a link and just instantly jump in was like magic to me. Club Penguin, RuneScape, those were some of my first real games that I remember playing as a kid.

And started researching the Unreal Engine a few years ago. Got really into it, quite fascinated by the intersection of film and games and where real-time 3D is going. My co-founder Rob Stewart, who is not present for this talk, his background's in computer science, and he's been working with the Unreal Engine for several years now.

So as I mentioned, our vision is to create the most open platform on the web, an alternative app platform for developers to freely distribute their games in real-time 3D apps on the web. And you should be able to ship one code base, one binary, and it should perform the same across all devices. That's our belief. You shouldn't be hampered by walled gardens that demand a cut, have rules and regulations in place. You should be able to host, deploy, monetize on your own terms as a game developer.

So how we got started, one of Rob's initial clients with one of his software development companies was interested in web-based support for their Unreal Engine game. I was interested in web support. Around the same time, Rob and I connected and we realized the real commercial opportunity around the new technologies, WebAssembly and WebGL and how they would once again just disrupt the method of distribution for games online. And we started working together. We founded our company, Wonder Interactive, raised some seed funding. And last year we officially kicked off.

So we did a bit of research into Unreal Engine on the web. And it turns out that since Unreal Engine 3, Mozilla actually partnered with Epic Games to bring Unreal Engine to the web. And as you can see here in this GIF, that's representation of actually what was a mobile game called Epic Citadel. So kind of like World of Warcraft style graphics.

2. Pushing the Limits of 3D on the Web

Short description:

Now, WebGL 2 is based upon OpenGL, which is an old API. It's decades old. And so WebGPU is clearly the future 3D on the web, because you're going to get that Vulkan quality graphics API that can fully tap into modern hardware. And so this is a quantum leap from what you can do today. So we are currently working on a WebGPU back end for our platform for Unreal Engine.

Now today that's about OpenGL ES 3.1. So about a mobile game, several years old mobile game. That was running in the browser and also on phones. So it was an effort and a collaboration between Mozilla and Epic to see how far could web and 3D on the web be pushed.

And this actually turned into robust support in Unreal Engine 4 with the release. Once 4.23 version of the Engine came out, HTML5 support was officially deprecated and removed. There was only WebGL1 support present in the Engine at this time. There was no optimization for file sizes. So you would have these very large binaries that you'd be requesting the user to download over the network.

As you know on the web, as many of you know developing games, an instant start time, rather, is crucial. The time from your users clicking a link to jumping into the action, it has to be as minimal as possible to be successful. That's what users expect. The same way that they expect a 2D web page to load quickly and populate with content, they also expect the same for games on the web. Any type of content on the web, quite frankly. And below there is a blog post if you want to check out more on the history of Mozilla and Epic's work together.

As I mentioned, we raised a small seed round last year, started filling out the team. We also reached out to Epic Games and we wanted to see where they were at, to see if they'd be interested in us picking up the torch from where they left off what we considered unfinished work. So how far have we gotten? We've actually added support to the latest versions of Unreal Engine. I'm quite happy to say 4.24 all the way up to 4.27. Since 4.23, as I mentioned, Epic publicly removed support and made it a community supported platform extension. But nothing has really been done with it. So we've actually built out support for the newest releases of the engine. Unreal Engine 5 is in the works.

Now, WebGL 2 is based upon OpenGL, which is an old API. It's decades old. And so WebGPU is clearly the future 3D on the web, because you're going to get that Vulkan quality graphics API that can fully tap into modern hardware. And so this is a quantum leap from what you can do today. So we are currently working on a WebGPU back end for our platform for Unreal Engine. Some of the other innovations are initially, as I mentioned with previous versions of HTML5 support in Unreal, you would have to ship a very large binary. There was no code splitting.

QnA

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Utilising Rust from Vue with WebAssembly
Vue.js London Live 2021Vue.js London Live 2021
8 min
Utilising Rust from Vue with WebAssembly
Top Content
Rust is a new language for writing high-performance code, that can be compiled to WebAssembly, and run within the browser. In this talk you will be taken through how you can integrate Rust, within a Vue application, in a way that's painless and easy. With examples on how to interact with Rust from JavaScript, and some of the gotchas to be aware of.
Making JavaScript on WebAssembly Fast
JSNation Live 2021JSNation Live 2021
29 min
Making JavaScript on WebAssembly Fast
Top Content
JavaScript in the browser runs many times faster than it did two decades ago. And that happened because the browser vendors spent that time working on intensive performance optimizations in their JavaScript engines.Because of this optimization work, JavaScript is now running in many places besides the browser. But there are still some environments where the JS engines can’t apply those optimizations in the right way to make things fast.We’re working to solve this, beginning a whole new wave of JavaScript optimization work. We’re improving JavaScript performance for entirely different environments, where different rules apply. And this is possible because of WebAssembly. In this talk, I'll explain how this all works and what's coming next.
Optimizing HTML5 Games: 10 Years of Learnings
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Optimizing HTML5 Games: 10 Years of Learnings
Top Content
The open source PlayCanvas game engine is built specifically for the browser, incorporating 10 years of learnings about optimization. In this talk, you will discover the secret sauce that enables PlayCanvas to generate games with lightning fast load times and rock solid frame rates.
Building Fun Experiments with WebXR & Babylon.js
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Building Fun Experiments with WebXR & Babylon.js
Top Content
During this session, we’ll see a couple of demos of what you can do using WebXR, with Babylon.js. From VR audio experiments, to casual gaming in VR on an arcade machine up to more serious usage to create new ways of collaboration using either AR or VR, you should have a pretty good understanding of what you can do today.
Check the article as well to see the full content including code samples: article. 
Making Awesome Games with LittleJS
JS GameDev Summit 2022JS GameDev Summit 2022
34 min
Making Awesome Games with LittleJS
LittleJS is a super lightweight game engine that is easy to use and powerfully fast. The developer will talk about why he made it, what it does, and how you can use it to create your own games. The talk will include a demonstration of how to build a small game from scratch with LittleJS.
How Not to Build a Video Game
React Summit 2023React Summit 2023
32 min
How Not to Build a Video Game
In this talk we'll delve into the art of creating something meaningful and fulfilling. Through the lens of my own journey of rediscovering my passion for coding and building a video game from the ground up with JavaScript and React, we will explore the trade-offs between easy solutions and fast performance. You will gain valuable insights into rapid prototyping, test infrastructure, and a range of CSS tricks that can be applied to both game development and your day-to-day work.

Workshops on related topic

Make a Game With PlayCanvas in 2 Hours
JSNation 2023JSNation 2023
116 min
Make a Game With PlayCanvas in 2 Hours
Featured WorkshopFree
Steven Yau
Steven Yau
In this workshop, we’ll build a game using the PlayCanvas WebGL engine from start to finish. From development to publishing, we’ll cover the most crucial features such as scripting, UI creation and much more.
Table of the content:- Introduction- Intro to PlayCanvas- What we will be building- Adding a character model and animation- Making the character move with scripts- 'Fake' running- Adding obstacles- Detecting collisions- Adding a score counter- Game over and restarting- Wrap up!- Questions
Workshop levelFamiliarity with game engines and game development aspects is recommended, but not required.
How to make amazing generative art with simple JavaScript code
JS GameDev Summit 2022JS GameDev Summit 2022
165 min
How to make amazing generative art with simple JavaScript code
Top Content
WorkshopFree
Frank Force
Frank Force
Instead of manually drawing each image like traditional art, generative artists write programs that are capable of producing a variety of results. In this workshop you will learn how to create incredible generative art using only a web browser and text editor. Starting with basic concepts and building towards advanced theory, we will cover everything you need to know.
PlayCanvas End-to-End : the quick version
JS GameDev Summit 2022JS GameDev Summit 2022
121 min
PlayCanvas End-to-End : the quick version
Top Content
WorkshopFree
João Ruschel
João Ruschel
In this workshop, we’ll build a complete game using the PlayCanvas engine while learning the best practices for project management. From development to publishing, we’ll cover the most crucial features such as asset management, scripting, audio, debugging, and much more.
Introduction to WebXR with Babylon.js
JS GameDev Summit 2022JS GameDev Summit 2022
86 min
Introduction to WebXR with Babylon.js
Workshop
Gustavo Cordido
Gustavo Cordido
In this workshop, we'll introduce you to the core concepts of building Mixed Reality experiences with WebXR and Balon.js.
You'll learn the following:- How to add 3D mesh objects and buttons to a scene- How to use procedural textures- How to add actions to objects- How to take advantage of the default Cross Reality (XR) experience- How to add physics to a scene
For the first project in this workshop, you'll create an interactive Mixed Reality experience that'll display basketball player stats to fans and coaches. For the second project in this workshop, you'll create a voice activated WebXR app using Balon.js and Azure Speech-to-Text. You'll then deploy the web app using Static Website Hosting provided Azure Blob Storage.