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.
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.
A higher level OpenGL Library
For most folks that want extreme control, but also a starting place, ThreeJS is the way to go.
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:
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
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:
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 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.
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.
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:
(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!
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.
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!