What is WebGL doing and why should I care?

WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 3D computer graphics and 2D graphics within any compatible web browser without the use of plug-ins. You will often find developers using it for games, but it is finally gaining widespread visibility across the web, and is now being used for map visualizationscharting data, and even presentations.

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:

  • Tasks
    • Drawing reflective materials or complex lighting generate a ton of overhead, and seeing that JavaScript is single threaded and CPU bound, why not offload some of that to the GPU in your device and have that do the heavy lifting?
  • Performance
    •  Utilizing hardware acceleration (the GPU built into your device), WebGL is a great fit for games or complex visualizations.
  • Shaders
    •  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

BabylonJS

 

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

 

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

 

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

 

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.

Phaser.io

 

Phaser is also open source (fork it on GitHub) and even offers TypeScript support, which is a strongly typed version of JavaScript. I’ve found this to be great when working with developers who are familiar with C-style languages. It also has some in-depth guides, and a showcase of Phaser made games.

Construct 2

 

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.

 

Three.js

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

 

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.

 

Unity

 

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:

01. Pasta

Multicoloured carb heaven

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.

04. Google Maps Cube Game

WebGL sites Google Maps Cube Game

Help a small blue ball navigate the streets of a city near(ish) you

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.

 

05. The Biodigital Human

WebGL sites Biodigital Human

See the skeleton and the blood system with Biodigital Human

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.

Author: The Website Baba

Share This Post On

Submit a Comment

Your email address will not be published. Required fields are marked *