Web.Dev 6: What is WebGL and How to Use It

Sign in to queue

Description

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 visualizations, charting 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.

Topics covered

[00:20] What is webGL?

[02:30] The rise of GPUs

[04:10] How does it work?

[05:20] WebGL app structure

[05:43] Browser support

[07:00] Using WebGL directly

[08:00] WebGL for data visualizations

[08:44] WebGL for gaming

[10:36] How Sony uses WebGL for their PS4 UI

[11:45] Popular WebGL libraries

[13:24] How to use BabylonJS

 

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:

Finally, I've got lots of WebGL samples and tutorials on my blog, DaveVoyles.com, so take a look there for more. 

Embed

Download

Download this episode

The Discussion

Add Your 2 Cents