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.

Google 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.

How it 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 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).

Demonstrations and applications

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.

• Quake II in the browser with HTML 5.
  The classic game.
• Video showing the use of WebGL by the Webkit library.
  Displayed in Canvas.
• Music in pictures.
  Two videos showing how JavaScript and WebGL can make a media player that displays fractal as fast as a desktop software. The JavaScript source code is provided.
• Aquarium.
  From 1 to 1000 fishes, without a lost in fluidity!
• Body Browser.
  The human body in 3D. This strange creature has both male and female attributes!
• JellyFish.
  Requires Chrome.
• Pool.
  3D games with audio (on Chrome 14).
• 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.

The O3D library

Google previously followed a different approach with 03D, and decided now to go further and turn in into a JavaScript library instead of a another plugin. O3D is now a complement to WebGL.
Things have changed since the authors of 03D expressed their views on WebGL.

Compatibility

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.
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 does not support WebGL on the grounds, saying direct access to a system library would create a security breach, however, Silverlight 5, its competitor and proprietary system does it too (through XNA that is partially embedded) as does everything in compiled JavaScript code.

JavaScript Framewoks

• 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.
• C3DL. JavaScript library by Mozilla to use WebGL.
• 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.

Tools

• ANGLE. Using WebGL over DirectX.
• JebGL. Run WebGL apps on any browser by using Java applets as a fallback. This includes Internet Explorer until version 6.
• Mandreel. Convert OpenGL games to WebGL.

Documents and sites

• Khronos Group. Introducing WebGL.
• Specification of the standard API.
• Why we should use OpenGL.
• WebGL and HTML 5 challenges. The conditions for the platform to be used for games and thus, having a real future.
• QuakeGL. Study of the Quake 2 source code.