WebGL: 3D in the browser

WebGL is a standard for programming in 3D with the browser as platform. The final specification of the standard was published in 2010 and is defined by the Khronos Group, a consortium which is also in charge of Open GL and Open CL. It allows to make animations, interfaces or 3D games running both online and offline.

OpenGL has not always got unanimity. Google previously followed a different approach with 03D, whose authors expressed their views on WebGL, and crititized the framework.
They decided then to go further and turn O3D into a JavaScript library instead of a another plugin. Is is now a complement to WebGL.

Google so supports this technology that fits entirely within its intent to bring applications on the Web, and this complements projects as Native Client, Google Chrome OS.
It is also supported by Nvidia, manufacturer of chipsets and graphics cards, AMD, a manufacturer of microprocessors, Ericsson, a manufacturer of mobile phones, Mozilla, Opera Software.
These actors participate to the Khronos group that defines the specification. Microsoft has joined the Khronos Group in 2014.

How WebGL works?

WebGL is an interface between JavaScript and Open GL ES 2.0, a library in native code that directly accesses the hardware of graphics cards. There is a version of Open GL for each model of graphics card, which typically is installed by the operating system whatsoever.

The rendering is done in Canvas, a graphics display surface which is part of HTML 5 and is already implemented by all modern browsers. WebGL can be used on other platforms, whether they use WebKit in particular.
Thus WebGL runs on a browser supporting Canvas and with a JavaScript framework (see list in resources).

The use will be greatly simplified with the addition of a JavaScript framework to interface with the application. There are many:

• Three.js. 3D engine which wants to be lightweight and easy to use and works with WebGL, Canvas, SVG. Gallery demo includes a sample of human skin very realistic. A demo and tutorial: A city in 100 lines of code.
• PhiloGL. A JavaScript framework to ease making a WebGL app.
• GLGE. A JavaScript library to ease using WebGL. See a vidéo demo.
• 03D. Framework by Google.
• Babylon.js. 3D game engine in JavaScript. Several demos on the site. Includes an import tool for Blender models (FBX). Supported by Microsoft.
• Mandreel. Convert OpenGL games to WebGL.

A demo of Quake II running in browsers supporting HTML 5 was made by Google. It does use the Java port of Quake, the Google Web Toolkit and WebGL. Many other demos were posted online too.

• Quake II in the browser with HTML 5.
  The classic game. QuakeGL is a study of the Quake 2 source code.
• Video showing the use of WebGL by the Webkit library.
  Displayed in Canvas.
• Aquarium.
  From 1 to 1000 fishes, without a lost in fluidity!
• Realistic water
  Click to make waves, or move the sphere...
• Body Browser.
  The human body in 3D. This strange creature has both male and female attributes!
• Team Fortress 2.
  A level of the game comes with source code. Only the sets are present, the rendering is saccaded due to the recording, but what if shows is another level than Angry Birds that feels more like early games on Apple II.

Specification of the standard API.

Want to learn WebGL? Get the free book WebGL Insights. Or a direct link.

WebGL on which browsers?

WebGL works with OpenGL on most computers.

With ANGLE (Almost Native Layer Graphics Engine), an interface produced by Google, it also works with Direct3D that is a part of DirectX and allows to use WebGL over DirectX.
This for configurations of Windows that do not have an OpenGL module.
ANGLE should also enable mobile application developers to achieve the development phase on Windows.

Microsoft did not want to support WebGL on the grounds direct access to a system library would create a security breach. Even if Silverlight 5, its competitor and proprietary system does it too (through XNA that is partially embedded) as does everything in compiled JavaScript code.