Getting Started

Contents

What Is WebGL?

WebGL is a cross-platform, royalty-free API used to create 3D graphics in a Web browser. Based on OpenGL ES 2.0, WebGL uses the OpenGL shading language, GLSL, and offers the familiarity of the standard OpenGL API. Because it runs in the HTML5 Canvas element, WebGL has full integration with all Document Object Model (DOM) interfaces.

WebGL is a DOM API, which means that it can be used from any DOM-compatible language: JavaScript, Java, or—if you embed WebKit into an application on a Mac—Objective C.

Major browser vendors Google (Chrome), Opera (Opera), Mozilla (Firefox), and Apple (Safari) are members of the Khronos consortium's WebGL Working Group, along with many other 3D graphics developers.

Key Advantages

Because it is based on OpenGL and will be integrated across popular browsers, WebGL offers a number of advantages, among them:

An API that is based on a familiar and widely accepted 3D graphics standard

Cross-browser and cross-platform compatibility

Tight integration with HTML content, including layered compositing, interaction with other HTML elements, and use of the standard HTML event handling mechanisms

Hardware-accelerated 3D graphics for the browser environment

A scripting environment that makes it easy to prototype 3D graphics—you don't need to compile and link before you can view and debug the rendered graphics

Prerequisites

WebGL is a low-level API, so it's not for the faint of heart. OpenGL's shading language, GLSL, is itself an entire programming environment. As a result, even simple things in WebGL take quite a bit of code. You have to load, compile, and link shaders, set up the variables to be passed in to the shaders, and also perform matrix math to animate shapes. Basic areas you'll need to be familiar with include: