Getting Started

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:

• GLSL, the shading language used by OpenGL and WebGL
• Matrix computation to set up transformations
• Vertex buffers to hold data about vertex positions, normals, colors, and textures (?)

Fortunately, there are many resources to help you learn about OpenGL ES, GLSL, and other standard 3D graphics programming concepts. Good places to start are the following:

• OpenGL ES 2.0 Programming Guide by Aaftab Munshi, Dan Ginsburg, and Dave Shreiner (Addison-Wesley Professional, 2008)
• OpenGL Tutorials
• OpenGL Light and Polygon Surface Tutorials

Next Steps

If you're interested in learning more about WebGL, obtain a copy of one of the browsers that supports a provisional implementation of WebGL. Check out the code samples and then start experimenting!