First introduced in early 2011, this is similar OpenGL ES, the mobile version of OpenGL, but built inside of the browser. Desktop browsers have really started to support it as of late, as have mobile browsers. I wrote about the current state of it (as of November 2014) here.
What is WebGL doing and why should I care?
WebGL has three distinct advantages over writing code that simply manipulates the DOM:
- Utilizing hardware acceleration (the GPU built into your device), WebGL is a great fit for games or complex visualizations.
- Complex visual effects can be produced with small programs known as “shaders”. This may be as simple as producing a sepia coloring effect, or more complex simulations such as water or flames. Visit Shadertoy for a showcase of some examples which really highlight this.
How do I get started?
Here are the essentials steps to create create your first WebGL project:
- Create <canvas> element
- Obtain drawing context
- Initialize viewport
- Create buffers
- Create matrices
- Create shaders
- Initialize shaders
- Draw primitives
I know what you’re thinking: “This sounds like a like of work. There’s got to be a better way”, and there is! Take a look at some of the engines below.
Engines / Frameworks
Babylon is an open source and free framework created by several folks at Microsoft as a fun side project. This is updated on nearly a daily basis, and even offers a sandbox to play in and test our your code. Here is a video coursebroken up into several parts, to get you started with BabylonJS and WebGL.
PlayCanvas is an open source engine which includes a bevvy of options, including an editor to help visualize your changes as you make them. Some useful experiences they highlight include brand experiences for viewing high performance cars, as well as playable ads which you can inject into applications. it was also used for the largest game of Space Invaders ever made!
Turbulenz offers a 2D and 3D engine for developers to build, publish, and monetize games on their platform. Founded by former developers at Electronic Arts, this tool is also open source under the MIT License. Download and build the latest Turbulenz Engine directly from the Github public repository. This includes everything from rendering effects and particles, to physics, animations, audio, inputs, and networking. Their developer page offers a ton of information to get you started.
James Austin, the CEO of Turbulenz, has a great write up about the engine on Gamasutra.
Pixi.js is a devoted rendering engine. There are a host of other engines covering game, sound and physics etc. and they all work beautifully with Pixi. It also has a number of added benefits including render auto-detect to fallback to Canvas when necessary, text support via bitmap (sprites) or webfont, as well as an ass loader.
This is the framework that I use most often when working with high school or university aged students who have never programmed a game before, largely due to the excellent editor. Developers can easily drag-and-drop all of their assets into the scene and view the properties in an easy to view pane. Even better, it comes with a ton of templates and samples to get started. Ashley Gullen has a great post on how WebGL works with this program as well.
ThreeJS is one of the more popular frameworks, and includes everything you need to get running: renders, scenes, cameras, animations, and lights. While this is fantastic for most things, it is lacking a physics engine, which will came in handy when creating a game. Three.js is made available under the MIT license. It even has an editor (beta) that you can play around in!
PhiloGL is a WebGL Framework for Data Visualization, Creative Coding and Game Development from the folks at Sencha Labs. . All lessons from Learning WebGL have been ported into the PhiloGL Framework. This is a great starting point for people wanting to learn PhiloGL and/or WebGL as well. This is also licensed under the MIT License.
Unity3D is the most widely used middleware tool for creating games at the moment. There is a free personal license, as well as a professional one which offers additional features, largely built around automation and online services. A built-in visual editor and massive app store for extensions and add-ons are two of the key features behind this powerful too.
Looking to learn more?
Here are some of the better resources I’ve found on the internet for learning WebGL:
Want to experience what WebGL websites look like? Here are some examples:
Top 5 best WebGL websites:
Multicoloured lighting and an interesting application of light and shade are put to good effect in this dramatic, slow-motion avalanche of macaroni. It’s strangely mesmerising.
02. Particle Morph
WebGL has the ability to push around a lot of 3D points, as you’ll see in OutsideOfSociety‘s Particle Morph demo. In the demo you’ll see 85,000 particles morphing between shapes, all of which should run silky smooth for anyone using a relatively new computer.
03. Nouvelle Vague
The premise of Nouvelle Vague by ultranoir is relatively simple: take some tweets and put them into a 3D landscape. That, however, doesn’t do justice to this particular site. Nouvelle Vague has all manner of flying vehicles including a biplane, an airship and some balloons. All of these brilliantly realised models – built and animated in Blender by artists and then imported into the WebGL scene – carry the tweets and circle around a giant central statue. It’s very surreal site and it’s very well made.
The Google Maps team joined with B-Reel to make the Google Maps Cube Game, where you help a small blue ball navigate the streets of New York, Tokyo, Paris and San Francisco (among others). As you move your mouse, the cube rotates and the ball rolls down the streets, bouncing off buildings and making its way towards the goal. The Maps Cube game makes use of three.js for its gorgeous rendering.
Keeping with the medical theme, we have the 3D Human from BioDigital Systems. Want to see the skeleton and the blood system? Just click the buttons. As an educational tool it’s easy to see the potential – the 3D map makes it possible to visualise diseases and treatments via the web or even on your mobile.