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, . He gets into the true weeds of WebGL with precision and accuracy. Indigo code 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, is the way to go. ThreeJS some amazing things have been built with three.js ThreeJS has an awesome community, and . It is pretty much the de-facto standard for anyone wanting to build something highly customized and fast, in pure Javascript. awesome documentation 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 too: graphical editor If you go to the editor, check the “ ” menu! Examples Edit: Babylon JS I guess this article should be retitled . 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: Six Ways to build WebGL apps babylon.js 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 , , and . Phaser pixi.js PlayCanvas 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 gives you a good starting place to learn about the features, licensing and pricing of each of them. https://html5gameengine.com/tag/webgl 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 does HTML5/WebGL export, but I experimented with it a bit, and it seemed less ready for primetime than Unity. Unreal engine 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: Tappy Chicken Epic Zen Garden 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, . (I’m to bring together the web’s WebGL content). SIMMER.io building a platform If you find an asset you like on the , you can literally compile, build, and have it up on the web in 35m, as . Unity Asset Store 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 yet. If you have a problem on a WebGL export, you might be relying on console.log programming. isn’t great (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: from Realistic Hovercraft 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. is available to my Medium readers at over 90% off. Just click the link below! WebGL with Unity the Ultimate guide 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 the web as we know it. start to overtake Stay updated with my current musings, and also be the first to hear about by : SIMMER.io 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!

Assembly

Mozilla

Target

YouTube

Too Long; Didn't Read

Discover Saakuru: Web3 Mass-Adoption with 0-FEES

Five Ways To Build WebGL Apps

Too Long; Didn't Read

Companies Mentioned

Rocco Balsamo

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Five Ways To Build WebGL Apps

Too Long; Didn't Read

Companies Mentioned

Rocco Balsamo

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES