In this post I am not going to show you any game engine, nor framework, nor library. This post is a more general write-up that aims to give you a more general overview of the technology that powers some of these frameworks : WebGL.
Introduction
Back in the days, in 2011, 3D in the browser was not really a thing outside of the realm of Flash, and the websites didn’t make much use of the canvas element like they do today.
During that year, the Khronos Group started an initiative called WebGL. This project was about creating an implementation of OpenGL ES 2.0 in a royalty free, standard, and cross browser API.
Even though the canvas element can only draw 2d primitives, it actually is possible to render 3D graphics at a decent speed with this element. By making a clever use of perspective and using a lot of optimizations, MrDoob with THREE.js managed to create a 3D canvas renderer, which quite frankly offers stunning results as you can see here and there.
But, even though canvas can do the job, its speed and level of hardware-acceleration is nothing compared to the one WebGL benefits from, especially when you take into account the browsers on lower-end devices such as our mobile phones.
Fast-forward in time, when Apple officially announced the support of WebGL for mobile Safari in IOS 8, the main goal was reached, since most of the recent browsers were able to use this 3D technology natively.
Can I have 3D ?
It’s very likely that you can now, although there are still some graphics cards that were not made to support WebGL, but the global support is very good now.
If you are interested in learning how to make 3D graphics in the browser, I recommend you do some research about a library called THREE.js.
This library has been around for a while and is usually what most people choose to get started with, as this library is just a 3D library and nothing more. If you want to interact with the mouse, or create a bowling game, you will have to use some additional plugins and/or libraries.
3D in the gaming landscape
As the support and the awareness around WebGL started rising, some entrepreneurs and companies saw it as a way to create a business or wanted to take part in this 3D adventure.
As a result, several products are available to you if you want to delve into 3D gaming.
Playcanvas
This company likes saying that they re-created “Unity in the browser”, which is not far from the truth really. Their in-browser editor is very complete, and mimics the entity-component system that exists in Unity.
However, I think the best thing they have created among their products is their real-time collaboration feature. It allows you to work on a project with a team and instantly updates the editor and the visuals for everyone currently viewing it.
The whole engine was also open sourced a few months ago, which has given us beautiful demos like this one:
http://codepen.io/playcanvas/pen/ctxoD
Feel free to check out their website and give their editor a try:
https://playcanvas.com
Goo technology
Goo technology is an environment that encompasses a 3D engine, the Goo engine, an editor and a development environment. Goo create is also a very nicely designed 3D editor in the browser.
What I really like about Goo is their cartoony mascot, “Goon” that you can see in a lot of their demos and branding, which adds a lot of fun and humanity to them.
Have fun watching this little dude in his adventures and learn more about the company in these links:
http://www.goocreate.com
Babylonjs
I wasn’t sure if this one was worth including, Babylon is a contestant to THREE.js created by Microsoft that doesn’t want to be “just a rendering engine,” but wants to add some useful components available out-of-the-box such as camera controls, a physics engine, and some audio capabilities.
Babylon is relatively new and definitely not as battle-tested as THREE.js, but they created a set of tools that help you get started with it that I like, namely the playground and the shader editor.
2D ?
Yes, there is a major point that I haven’t mentioned yet. WebGL has been used across more 2D games that you might imagine. Yes, there is no reason why 2D games shouldn’t have this level of hardware-acceleration.
The first games that used WebGL for their 2D needs were Rovio and ZeptoLabs for the ports of their respective multi-million-dollar hits that are Angry Birds and Cut the Rope to JavaScript. When pixi.js came out, a lot of people started using it for their games. The major HTML5 game framework, Phaser is also using it.
Play !
This is the end of this post, I hope you enjoyed it and that you want to get started with these technologies. There is no time to waste — it’s all in your hands.
About the author
Alvin Ourrad is a web developer fond of the web and the power of open standards. A lover of open source, he likes experimenting with interactivity in the browser. He currently works as an HTML5 game developer.
