Zynga’s first foray into WebGL, and how it runs on IE10
Zynga recently released the web version of Duck Dynasty Slots, a game that started life as a mobile-only game. By leveraging Mozilla’s Emscripten project, we were able to port it to the web and deliver an experience just as compelling as the mobile version, all from one codebase for iOS, Android and WebGL. We believe this is one of the largest deployments of this technology for gaming to date, so today we wanted to share some of what we learned in the process, and talk about some of the challenges we faced.
We originally started working with the Duck team in January, right before their iOS launch. This proved to be a great choice. By partnering with the game team on a title that was launch-ready, we didn’t have to spend time tracking down bugs in the game and could focus 100% on getting the game working on web. Our first pass took about two weeks, and while the load time was terrible, it ran at a solid 60 FPS, and even had audio, thanks to the SoundManager 2 project.
Most of the work in that first pass was just disabling functionality for which we didn’t have a web implementation. From there, we just worked through the list of functionality we had disabled and began implementing each component, one by one. We added in a couple of tweaks to the web experience – scroll-bars, for instance – and refactored the game to load assets asynchronously. This turned out to be tricky to get right, but once we had it working, we were seeing load-times on Firefox of around 7.5 seconds, and around 10 seconds on Chrome.
We were thrilled with the experience we’d been able to deliver for web, but there was one issue: Internet Explorer*. While the overall trends on WebGL adoption make it a very promising platform, the truth is that WebGL penetration varies significantly by gaming genre. So, we hatched a plan to support our WebGL game on browsers without WebGL.
WebGL deals in terms of triangles, and it has two stages, called “shaders”, of processing applied to those triangles. These “shaders” are able to run arbitrary program code on the data to transform it. Canvas, in contrast, really only allows you to draw rectangles with images on them, not triangles. It also has no equivalent to a WebGL shader program.
The key insight that we leveraged to make ZyGL work is that unlike 3D engines, 2D graphics engines tend not to send arbitrary triangles to be rendered. Instead, they only send pairs of triangles that, when stitched together, would form a rectangle or “quad”, and quads are Canvas’s bread and butter.
Each pair of red and green triangles is a deconstruction of the quad we are trying to render. This is how WebGL sees the world.
This is ZyGL’s reconstruction of the original rectangles from the triangles above so that Canvas can render the scene. Each white rectangle is the reconstruction of one of the pairs of triangles above.
Lobby with color * texture shader emulation disabled – note the white regions. These areas should be tinted with various colors (mostly black in this scene).
Lobby with color * texture shader emulation enabled to yield the effect the game artists intended.
Using ZyGL means that we have extremely broad reach. Adding Internet Explorer 10 and 11 to the set of modern browsers we can target allows us to reach a broader swath of consumers. Being able to come to our games with any browser and have it just work, with no messing around with plugins or browser updates – that’s a meaningful improvement to our players’ experience.
We believe this is one of the largest deployments of this technology to date. While that is a source of pride for us, it also meant that we didn’t have a blueprint to follow to tackle some of the issues we faced, and going into this project didn’t even know what issues we would see. This was a massive team effort. We have great engineers at Zynga, and without them working on this project we probably wouldn’t have been successful in solving all these problems.
So far, Emscripten has proved to be a great way for us to deploy our games to the web. Since launching Duck Dynasty Slots live on this tech-stack, we’ve learned a lot of valuable lessons. Zynga still builds a large percentage of its games in C++, and our plan is to keep applying this formula to as many of them as we can. We’re also looking for places where we can open-source parts of what we’re doing to help the ecosystem mature.
Interested in learning more or working on cutting-edge web technologies and writing code like this that seemingly make the impossible possible? Feel free to reach out to me at firstname.lastname@example.org.
If you find this kind of thing exciting, we’re hiring! Come work with us!
[*] Observant readers will note that while IE10 lacks WebGL, IE11 has it as one of its headline features. Unfortunately, when we were building the game, IE11′s WebGL support wasn’t complete, and each new point release had different features enabled. So, we chose not to leverage IE11′s partial WebGL support, and instead treated it as if it were no different to IE10.