If you want to build graphically intense apps for the web, you’ll almost certainly need WebGL. Here are some great (and not so great) ways to build WebGL apps.
TL;DR; You can build WebGL apps in pure Javascript but there are great alternatives like Three.js, Phaser, PlayCanvas, and, my favorite, Unity. Here’s survey of a few of these methods with pros and cons.
Pure WebGL
The Assembly Language of Web Graphics Programming
If you’re a graphics genius with a PHD in Mathematics, this is definitely the way to go. For most of us mere mortals, I don’t recommend it.
In my head, using pure WebGL is the logical equivalent of learning and programming directly in assembly language, when you could be using a language like C++ to make your life significantly easier.
That said, it can be quite fascinating and useful to understand low-level WebGL code, so that you can build something extremely custom, or know how to debug things when using a higher level library.
Here’s the first video in an amazing series by a Youtube user, Indigo code. He gets into the true weeds of WebGL with precision and accuracy.
But beware! It will take you nearly two hours of tutorials before you’re drawing a 3D rotating cube. Don’t say I didn’t warn you.
ThreeJS
A higher level OpenGL Library
For most folks that want extreme control, but also a starting place, ThreeJS is the way to go.
some amazing things have been built with three.js
ThreeJS has an awesome community, and awesome documentation. It is pretty much the de-facto standard for anyone wanting to build something highly customized and fast, in pure Javascript.
It abstracts away some of the hundreds of lines of WebGL setup code, but still gives you massive control over the graphics pipeline. It even has a neat little graphical editor too:
If you go to the editor, check the “Examples” menu!
Edit: Babylon JS
I guess this article should be retitled Six Ways to build WebGL apps. A few commenters here and on Reddit mentioned that BabylonJS has a really great community, and may be even more popular than three.js. So, although I have not used it myself, I definitely recommend checking it out:
WebGL Game Engines
Collisions, Physics, and Sounds, with Minimal Dev Time
The next step up on the abstraction totem pole are a variety of WebGL Game Engines, including Phaser, pixi.js, PlayCanvas and Construct2.
If you’re looking to do a really cool 2D game or application, Phaser is a really fun library to work with (WebGL can do 2D, simply by rendering 2D sprites all on a single 3D plane). And they have examples galore:
I’m also pretty interested in PlayCanvas, although I haven’t personally tried out their development platform:
PlayCanvas Gallery
There are tons of options for Javascript HTML5 game engines, so https://html5gameengine.com/tag/webgl gives you a good starting place to learn about the features, licensing and pricing of each of them.
Professional Game Engines
By far my favorite way to create WebGL content for the web is to use the Unity Game engine. It’s mature, and has been used for over 12 years to create game content and it now has a great exporter for the web.
But for completeness, let’s take a look at Unreal first:
Unreal
Unreal engine does HTML5/WebGL export, but I experimented with it a bit, and it seemed less ready for primetime than Unity.
I personally tried it and I thought that builds took a LOOONNNGGGG time, and the output was extremely large (1GB building one of the sample projects).
Nevertheless, I believe that Unreal will make strides in WebGL as it takes hold. Here are a few examples of Unreal engine games in HTML5:
BTW I got an error when I tried to load Epic Zen Garden in Chrome. It works in Firefox, and is one of the prettiest 3D demo’s I’ve seen on the web.
Unity
By far, the easiest way to create 3D content for the web is to use the Unity game engine, and it’s my personal choice. This is a mature game engine that has been around for over 12 years, and their WebGL exporter has been around for almost two years.
ftw!
In fact, I believe in Unity so much that it will be the initial target for my website, SIMMER.io. (I’m building a platform to bring together the web’s WebGL content).
If you find an asset you like on the Unity Asset Store, you can literally compile, build, and have it up on the web in 35m, as described in this article.
the unity asset store
Of course nothing is ever a silver bullet. Despite Unity being a fabulous and mature platform, there are drawbacks:
- (Minor) C# is the language of choice, so this might deter some web programmers.
- (Major) The debugging toolchain isn’t great yet. If you have a problem on a WebGL export, you might be relying on console.log programming.
- (Major) Unity is closed source and only free for companies / individuals with less than 100K in revenue.
Personally, the three bullet points are not enough to deter me. Here’s just one example of the level of quality you can get with Unity:
Realistic Hovercraft from BoneCracker Games
(It takes a few seconds to load, but it’s worth it!)
A course on WebGL with Unity
Are you interested in learning more about WebGL with Unity? I’m now offering a four hour 60+ lecture course on Udemy. WebGL with Unity the Ultimate guide is available to my Medium readers at over 90% off. Just click the link below!
Stay Tuned!
There are many ways to achieve WebGL greatness on the web. Some bare to the metal, and some with highly mature engines attached.
I’m banking that WebGL paired with WebAssembly, will start to overtake the web as we know it.
Stay updated with my current musings, and also be the first to hear about SIMMER.io by joining my email list:
Did you learn something new today? Please 💚 or follow me on Medium. It gives me a ton of motivation to keep writing articles like this!