Join the Discord
Login With Twitter

Creating a VR Game in WebXR: Unity vs. A-Frame

The Best Way to Create Virtual Reality Browser Games

Virtual Reality can seem a bit overwhelming. I mean how the heck did we go from doodle jump to doing pushups in VR with headsets on through a web browser? I'm not really sure, but here's a secret--the push up game was as easy to make as doodle jump. So now that I've definitely, totally convinced you by my making a completely wild supposition, let's dig in.

WebXR Logo

You have Unity, and you have A-frame. I introduce these two in a bit more detail here, but to sum it up: Unity powerful, A-Frame fast. Tarzan speak aside, Unity is a full fledged game engine used to develop games, movies, and experiences that could compete with the likes of major game and movie studios, and A-Frame is maintained by a few guys who really like virtual reality and Javascript (probably more the first than the second).

Using Unity to Make VR Games

Unity Logo

Another disclaimer, this is not a Unity tutorial, but hopefully if you've gotten this far, you know that by now. Unity is powerful. When I say powerful, I mean Nascar: Heat 4 was made in Unity! Not impressed? Well what about VRChat, Hollow Knight, Katamari Damacy, Ironman VR, etc. etc. etc.. It's the real deal.

Pros of Unity for VR/WebXR Development

So what can you expect with Unity? Well, you'll probably watch a lot of Brackeys videos, and you'll probably pull your hair out a bit when learning the jargon and how to animate, but once you get it, you can literally do ANYTHING. Most things are premade for you, including interpolated animations, colliders, movement systems... and if you can't do it, you can script it yourself using C#. Now C# isn't the most fun thing in the world, especially if you come from a Python background, but it's not so bad.

Every game on the site at the time of writing this blog post is made using Unity, and while some of them did require some coding and math, the engine not only becomes intuitive, but a playground. On top of this, the community support is pretty good, and if the community fails you, the fundamentals rarely let you down as a fallback.

Cons of Unity for VR/WebXR Development

The cons list is short, but it unfortauntely holds a lot of weight. Unity is a honkin' boy. Unity loves to make builds that are 20x larger than they need to be, and the processing power needed to load and run these builds is just unreasonable for what you get. Now obviously a computer or gaming console can handle this stuff, but if you think your phone or VR headset is going to "just work", you're in for a rude awakening.

That is not to say it won't work, especially on a newer generation VR headset; it's more just a warning that you're going to end up with a hefty list of hardware requirements to run what sometimes could be a much less hardware-intensive game.

Pros of Three.js and A-Frame for VR/WebXR Development

So obviously there is going to be some contrast (this is a versus blog after all), and I've already alluded to some of it, so the jig is up; A-Frame is fast, it's lightweight, the build sizes won't bankrupt your RAM, and it's all done using javascript. That's the sparknotes, and that's really all I need to write, but because I want you to spend more time on my site so I can make that sweet mullah (just kidding, we don't even have ads), I'll elaborate a bit more.

So Three.js is a flavor of javascript, and A-frame is a package built on top of it. A-frame was concieved by the great Firefox himself, Mozilla, and is now maintained by a few of the original engineers under the name SuperMedium (I believe they're doing something with comics in VR). I'm not only excited to see what they come up with, but I'm also excited that they've created a super lightweight solution to make VR content that works for headets and mobile, loads quickly, and doesn't eat up space or RAM.

A-frame Logo

I've said this before, A-frames's Hello VR is almost embarrassing compared to Unity--embrassing to Unity that is. In like 4 seconds you've got a VR game running, and I wish I were kidding, but it all just sorta works. It'll load fast, you won't run into funny bugs, and you can show your friends/parents that you're worth your salt as a game dev.

For a game engine built in javascript, it's also powerful. It's no Unity, but it doesn't aim to be. It's all about making something that does what is needed, and doesn't have the extra 17 menus that Unity offers. Of course, you'll have to learn javascript, but everyone knows CSS is the worst part of web development, so you get to focus on the fun part!

Cons of Three.js and A-Frame for VR/WebXR Development

I've alluded to this about 10 times so far, so this shouldn't be a surprise. A-Frame is good for a lot of things, but it's not as flexbile as Unity. I'm not going to rattle off what you can and can't build in A-Frame, but I can tell you it's a much smaller list than Unity. Unity is a game engine, with near boundless potential when combining scripts, assets, and the built in components. A-Frame is a javascript library maintained by a few engineers who are trying to build their own software on top of it.

If you are trying to make a full fledged game, or looking for an expansive feature set, community, and library of assets, do it in Unity. Obviously build sizes will be bigger, and browser load times will be longer, but that's a small price to pay for building what you want to build.

Wrap Up: Unity vs. A-Frame Using WebXR for VR Game Development

I'm not going to tell you what to use, because that's really project dependendent (and that would require me to have an opinion, which blogs never have), but I will tell you when to use them. If your goal is a big game, with complicated mechanics and awesome assets, maybe use Unity. Heck, if you know C# and are familiar with Unity, use Unity.

If you're not sure if game development is for you, you're new to both technologies, or if you're just wanting to save space and loading times, give A-Frame a try. In either case, the fact that I'm even able to make this comparison article spells trouble for the whole app-store economy, as web is becoming more and more accessible to develop virtual reality and augmented reality content.

If you do end up choosing Unity, we've got a great tutorial on how to build and export your game from Unity for use in WebXR, and if you're looking to play check out our top free VR games.